如何通过滚动查看溢出的 SVG 内容？

Question

我有这个简单的 HTML:

<html>
  <body>
    <embed src="test.svg" type="image/svg+xml" style="border:3px solid green;width:200px;height:200px;overflow:scroll;">
  </body>
</html>

还有一个简单的 SVG：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" style="border:3px solid red;width:500px;height:500px;overflow:auto;">
  <circle cx="50" cy="250" r="80" stroke="green" stroke-width="4" fill="yellow" />
</svg>

浏览器的输出：

[1,1] 边缘：确定
[2,1] IE11: 正常
[1,2] Chrome55: 不可滚动
[2,2] Firefox50：滚动程度可以忽略不计

如何确保 Firefox 和 Chrome 能够像在 Edge 和 IE 中那样具有可滚动 <embed> 和溢出的 SVG 内容？

谢谢。

Answer 1

只需在嵌入周围放置一个 div 并将其用作滚动区域...

<html>

<body>
  <div style="border:3px solid green;width:100px;height:100px;overflow:scroll;">
    <embed src="https://upload.wikimedia.org/wikipedia/commons/e/e9/SVG-Grundelemente.svg" type="image/svg+xml">
  </div>
</body>

</html>

为了匹配 MS 浏览器的行为，您必须扩展您的 viewBox 以包含您希望能够滚动到的所有元素... 给定适当的宽度和高度应该做你想要的......

您也可以使用 svgDocuments currentTranslate 和 currentScale 属性滚动您自己的缩放和平移解决方案...我很好奇 currentTranslate 对这种奇怪的 MS 行为的表现...

如何通过滚动查看溢出的 SVG 内容？

How to make overflow-ed SVG content viewable via scrolling?

html

css

svg

scroll

overflow