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

时间：2017-01-19 07:06:25

标签： css html5 svg scroll overflow

我有这个简单的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,1]边缘：好的
  2. [2,1] IE11：好的
  3. [1,2] Chrome55：不可滚动
  4. [2,2] Firefox50：可滚动的程度可以忽略不计

    5. SVG Overflow

    如何确保Firefox和Chrome能够使用带有溢出SVG内容的可滚动<embed>，如Edge和IE？

    谢谢。

1 个答案:

答案 0 :(得分：1)

只是在embed周围加一个div并将其用作滚动区域......

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

相关问题
最新问题