html - SVG 舍入错误

Question

Chrome 在 SVG 中舍入子像素值的方式给我带来了问题。有什么办法可以解决这个问题吗？因为我使用了不透明度，所以我无法简单地添加深色背景来消除白色的阴影。

例子如下: http://dabblet.com/gist/766f6a238d00bcbb41d4

Answer 1

您可以创建一个过滤器以将“灌浆”添加到间隙中 :) 但这是一种通过增加这些像素的不透明度来工作的技巧。它还会使我们其他边缘的抗锯齿变得粗糙。此外，如果您在这些渐变中使用不透明度，那么您需要将下面的那些 tableValues 调整到您想要的范围(也就是如果您的填充是 0.4 不透明度，那么您的 tableValues 看起来像“0 .1 .4 .4 .4 ”)。如果您的渐变中有可变的不透明度，那么您可以使用其他类型的组件传输来更好地保留不透明度渐变。

<svg id="background-svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 150 75" >
  <defs>
    <linearGradient y2="1" x2="1" y1="0" x1="0" id="triangleGradient">
        <stop stop-color="black" offset="0"/>
        <stop stop-color="blue" offset="1"/>
    </linearGradient>

    <filter id="mynameisgrout">
       <feComponentTransfer>
         <feFuncA type="table" tableValues="0 .25 1 1 1"/>
       </feComponentTransfer>
    </filter>
   </defs>

   <g filter="url(#mynameisgrout)">
     <polygon points="0,75 100,75 50,0" fill="url(#triangleGradient)"></polygon>
     <polygon points="50,0 150,0 100,75" fill="url(#triangleGradient)"></polygon>
   </g>
</svg>