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

【问题标题】：SVG Rendering problem - Firefox cuts off the sibling SVG elements - is there a workaround?SVG 渲染问题 - Firefox 切断了兄弟 SVG 元素 - 有解决方法吗？
【发布时间】：2021-04-08 01:35:58
【问题描述】：

<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 的图像“内部”。

以前有人遇到过这种情况吗？解决方法？

【问题讨论】：

我在 FF 84.0.1 中看到了错误。绿色方块被剪裁到前一个子 SVG 的边界。我已提交错误报告：bugzilla.mozilla.org/show_bug.cgi?id=1684625
罗伯特，绿色方块应该一直到粉红色背景的最左边。对我来说，它没有。
这个问题将在 Firefox 86 中消失。我已经禁用了失败的代码路径并签入了测试，以便在启用该代码路径时需要修复它引起的问题。
听起来不错。代码路径实际上提供了任何功能吗？

标签： html svg firefox

【解决方案1】：

我想我找到了解决方法。

通过添加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>

【讨论】：