我有这个简单的 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 能够滚动 <embed>带有溢出的 SVG 内容，如 Edge 和 IE 中那样？
谢谢。
最佳答案
只需在嵌入周围放置一个 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 行为有何表现。 ..
关于css - 如何通过滚动使溢出的 SVG 内容可见？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41735743/