内嵌的SVG转换在Firefox中不可见，在Chrome中运行良好 [英] Inline SVG with transforms not visible in Firefox, works fine in Chrome
问题描述
<？php
在PHP脚本中有这个代码。 header（'Content-type：application / xhtml + xml'）;
？>
<！DOCTYPE html>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>文本/ html中的
< title> SVG< / title>
< / head>
< body>
< svg xmlns =http://www.w3.org/2000/svgversion =1.1>
< g width =100％height =100％transform =matrix（1,0,0,1,683,285）buffered-rendering =dynamic>
< / body>
< / html>
这个脚本在Chrome中运行良好（在屏幕上绘制一条直线）。然而，Firefox（18.0.2）似乎并没有渲染它。我只是看到一个空白的屏幕。
我一直在绞尽脑汁想要弄清楚这个问题，但对于我的生活，我无法理解为什么这样应该发生。有任何想法吗？我已经搜遍了关于该主题的所有stackexchange帖子，并没有一个在我的情况帮助
编辑：我忘记提及：只要我删除'transform = ...'属性，但我需要为我的计划。
没有指定任何宽度或高度，所以SVG是300×150像素（铬得到这个错误），HTML和身体也不扩展。这似乎更像你想要的。
<！DOCTYPE html>< head>文本/ html中的
< title> SVG< / title>
< / head>
< body style =width：100％; height：100％>
< svg xmlns =http://www.w3.org/2000/svgversion =1.1width =100％height =100％>
< g width =100％height =100％transform =matrix（1,0,0,1,683,285）buffered-rendering =dynamic>
< / body>
< / html>
I have this code in a PHP script, being served up from Apache.
<?php
header('Content-type: application/xhtml+xml');
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG in text/html</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g width="100%" height="100%" transform="matrix(1, 0, 0,1,683,285)" buffered-rendering="dynamic">
<line y2="208" x2="85" y1="10" x1="24" stroke="#999"></line></g></svg>
</body>
</html>
The script works fine in Chrome (draws a straight line on screen). Firefox (18.0.2), however, does not seem to render it at all. I just see a blank white screen.
I've been racking my brains trying to figure this one out, but for the life of me I can't understand why this should happen. Any ideas? I've scoured through all the stackexchange posts on the topic, and none of them helped in my case
Edit: I forgot to mention: it works fine as soon as I remove the 'transform=...' attribute, but I need that for what I'm planning.
You don't have any widths or heights specified so the SVG is 300 x 150 pixels (Chrome gets this wrong) and the html and body don't extend either. This seems more like what you want.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%">
<head>
<title>SVG in text/html</title>
</head>
<body style="width: 100%; height: 100%">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<g width="100%" height="100%" transform="matrix(1, 0, 0,1,683,285)" buffered-rendering="dynamic">
<line y2="208" x2="85" y1="10" x1="24" stroke="#999"></line></g></svg>
</body>
</html>
这篇关于内嵌的SVG转换在Firefox中不可见，在Chrome中运行良好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
