Question

<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。）

无法将viewbox，viewport，用户空间放在一起并理解事物。

Answer 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＆amp;的各种组合。 height在不同场景中指定用于使用CSS缩放svg元素。

无法将视窗，视口，用户空间放在一起并获得图片

1 个答案: