时间戳

首页 > 解决方案 > SVG 渲染问题 - Firefox 切断了兄弟 SVG 元素 - 有解决方法吗？

html - SVG 渲染问题 - Firefox 切断了兄弟 SVG 元素 - 有解决方法吗？

问题描述

<div>
  <svg id="svg_viewport"
width="800" height="800"
style="background-color: pink"
>
 <svg id="o_1"
   x="10" y="10" width="200" height="200"
   >
   <image href="https://www.1kfa.com/table/img/image.png"
     height="200" width="200"></image>
 </svg>
 <svg id="o_2"
   x="0" y="100" width="100" height="100"
   >
   <rect id="r_2"
     width="100" height="100"
     fill="green"
     ></rect>
 </svg>
  </svg>
</div>

这在 Chromium 中有效，但在 Firefox 中，绿色矩形被切断。就像浏览器将其呈现在 svg 的图像“内部”一样o_1。

有没有人遇到过这个问题？解决方法？

标签： htmlsvgfirefox

解决方案

我想我找到了解决方法。

通过添加viewBox，Firefox 决定正确呈现它。见第 8 行：

<div>
  <svg id="svg_viewport"
    width="800" height="800"
    style="background-color: pink"
    >
     <svg id="o_1"
       x="10" y="10" width="200" height="200"
       viewBox="0 0 200 200"
       >
       <image href="https://www.1kfa.com/table/img/image.png"
         height="200" width="200"></image>
     </svg>
     <svg id="o_2"
       x="0" y="100" width="100" height="100"
       >
       <rect id="r_2"
         width="100" height="100"
         fill="green"
         ></rect>
     </svg>
  </svg>
</div>

推荐阅读