代码笔中的SVG边界差异

问题描述

在不同浏览器中运行 this codepen 时，我发现在资源管理器和 Chrome 中正确显示时，绿色和蓝色矩形没有像在 Firefox 中那样完全重叠。它们的几何属性完全相同，它们应该完全覆盖彼此。不过，它们不在 Firefox 中。但是，如果您复制代码并将其粘贴到 html 文档中，即使在 Firefox 中打开它时，它也会正确显示。我的代码有问题....还是 Firefox 本身有问题？

 <html>
 <body style="border:3px solid blue; padding:0px; margin:0px">
 <svg width="100vw" height="100%" style="position:absolute; border:1px solid red; padding:0px" stroke="2px solid yellow" viewbox="0 0 3 3">     
 <g filter="url(#returnunchanged)" >

   <g filter="url(#returnunchanged)">

  <rect x="1" y="0" width="1" height="1" fill="green"/>
   <svg style="padding:0px; margin:0px" width="1" height="1" class="container" x="1" y="0" viewbox="0 0 2 2"><rect height="2" width="2" fill="blue"/></svg>
     
   </g>
     
   </g>
 
      <filter id="returnunchanged" primitiveUnits="userSpaceOnUse" >
        <feOffset in="SourceGraphic" x="0" y="0" width="100%" height="100%"/>
       </filter>
         
       </svg> </body></html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

viewbox

代码笔中的SVG边界差异

问题描述

解决方法

相关问答