Fatal编程技术网
  • html/
  • 是否在嵌入HTML时保留AspectRatio不工作？

是否在嵌入HTML时保留AspectRatio不工作？

html svg

是否在嵌入HTML时保留AspectRatio不工作？,html,svg,Html,Svg,我可能只是遗漏了一些东西，但我发现，当SVG嵌入到HTML文档中时，viewBox会被遵守，但PreserveSpectratio似乎会被忽略。 这里是一个非常简单的演示。独立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

我可能只是遗漏了一些东西，但我发现，当SVG嵌入到HTML文档中时，viewBox会被遵守，但PreserveSpectratio似乎会被忽略。 这里是一个非常简单的演示。独立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
下面是SVG的演示。下面是嵌入HTML的SVG的一个示例。 这里是一个关于嵌入式SVG的JSFIDLE的示例（并没有独立的SG JSFDLL，因为JSFIDLE包装了HTML中的任何内容）。
这对我来说似乎是一个bug，但希望我只是缺少了一些东西。

HTML内容没有固有的高度。因此，SVG将始终使用可用的宽度，高度仅在之后计算。如果您的容器具有定义的高度，如下所示：

<div style="position:fixed;height:100%;overflow:scroll">
    <svg...>
</div>
此时将显示一个垂直滚动条，并且仍使用水平空间

但是，如果现在明确地将svg高度设置为100%，则svg将缩放：

<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>
谢谢你的建议。我可以理解您的观点，但我认为在这种情况下，浏览器将有效地传递innerWidth/Height，SVG引擎将像处理独立SVG一样处理这一点。独立SVG可以在我尝试的所有浏览器中正常工作。你的建议很有帮助，但在所有不同的浏览器中，剪辑或溢出内容的方式都不同，通常是以奇怪的方式。所以这并不是一个可以接受的结果。请记住，a上宽度/高度的默认值为100%。-您是否找到了我的示例不适用的浏览器？在我的测试中，它们都是这样的。好吧，你给出的确切例子在任何地方都是有效的，除了一个没有滚动就能看到所有的矩形。“相遇”的要点是SVG完全可见（填充视口），无需滚动。如果将溢出设置为“隐藏”，则SVG矩形的一部分将在所有浏览器中被剪裁。所以我仍然在寻找一个好的解决方案。可能没有。你仔细看过这些例子了吗？第一个仅用于演示，第二个仅在svg元素上使用
和一个无关的
height=“100%”
。第二种方法是将SVG缩放到视口，没有滚动条或隐藏部分。是的，我这样做了。你是对的，几乎是对的。一个额外的调整和警告。我不得不将SVG高度更改为98%，以避免剪裁底部。即使进行了这些更改，它也能正常工作，除非容器的纵横比小于viewbox的纵横比。如果容器较窄，则它将进行剪辑而不是改变缩放以降低渲染SVG内容的高度。尽管如此，它还是离我们更近了。谢谢你的见解。我认为这是最接近它将得到的，所以已经标记了答案。我还使用这些更改更新了JSFIDLE。