<html>
<head></head><body>
<div>
<svg width="300px" height="200px" viewBox="0 0 2800 1200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="0" y="0" width="1500" height="1000" fill="yellow" stroke="blue" stroke-width="12"/>
<path fill="red" d="M 750,100 L 250,900 L 1250,900 z"/>
<text x="100" y="600" font-size="200" font-family="Verdana">
Stretch to fit
</text>
</svg>
</div></body>
</html>
我有上面的svg标记，并有以下疑问 .
-
在svg标签宽度中，高度分别为300px，200px . 但是当我用布局面板（在萤火虫中）检查它时，它显示172px宽度和119px高度 . 为什么我的svg元素没有像我指定的那样获取维度 .
-
当我删除svg元素中的viewBox attr时，它的维度为1596 * 1096 . svg元素再次没有采用我指定的尺寸，并且屏幕上没有可见的图形 .
-
如果我在svg标签上给出preserveAspectRatio = "none"，则svg元素的维度会发生变化，但这也是不正确的 .
通过搜索，发现视图框尺寸给出了svg的实际尺寸，它被映射到svg元素容器的宽度（比如html页面中的div） .
无法将视图框，视口，用户空间放在一起并了解事物 .
1 回答
我想，基本上，Firebug对你撒谎 . Add an outline to the svg element with CSS，你会发现它占用了300x200像素的空间 . 您也可以尝试adding the width and height to the div container，但是如果您关闭浏览器take the viewBox，则不再有足够的信息来缩放图像 .
对于更多示例，I have a test page具有在不同场景中指定的
viewBox和width＆height的各种组合，用于使用CSS缩放svg元素 .