Question

我可能只是遗漏了一些东西，但我发现当SVG嵌入到HTML文档中时，会遵循viewBox但似乎忽略了preserveAspectRatio。这是一个非常简单的演示。独立SVG：

<svg xmlns="http://www.w3.org/2000/svg"  
       viewBox="0 0 720 960" preserveAspectRatio="xMinYMin meet">
    <rect x="0" y="0" width="720" height="960" 
         style="fill:none;stroke:red;stroke-width:10"/>
</svg>

嵌入在HTML文件中的相同SVG：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>SVG Embedded</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 720 960"
      preserveAspectRatio="xMinYMin meet">
    <rect x="0" y="0" width="720" height="960"  
       style="fill:none;stroke:red;stroke-width:10"/>
</svg>
</body>
</html>

这是SVG演示的link。这里是嵌入HTML的SVG link。这是一个link到嵌入式SVG的jsfiddle（没有独立的SG jsfddle，因为jsfiddle包含HTML中的任何内容）。这看起来像是一个错误，但希望我只是遗漏了一些东西。

Answer 1

HTML content has no inherent height. Therefore the SVG will always use the available width, and the height is only computed afterwards. If your container has a defined height, like so:

<div style="position:fixed;height:100%;overflow:scroll">
    <svg...>
</div>

a vertical scrollbar is shown, and the horizontal space is still used.

But if you now explicitely set the svg height to 100%, the svg is scaled:

<div style="position:fixed;height:100%">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 720 960"
         preserveAspectRatio="xMinYMin meet">
        <rect x="0" y="0" width="720" height="960"  
              style="fill:none;stroke:red;stroke-width:10"/>
    </svg>
</div>

在嵌入HTML时，preserveAspectRatio无法正常工作？

1 个答案: