时间戳

首页 > 解决方案 > Codepen中的SVG边界差异

viewbox - Codepen中的SVG边界差异

问题描述

在不同的浏览器中运行此代码笔时，我发现在资源管理器和 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>

标签： viewbox

解决方案

推荐阅读