Question

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

以下是示例： http://dabblet.com/gist/766f6a238d00bcbb41d4

Answer 1

你可以创建一个过滤器来将“灌浆”添加到间隙中:)但这是一个通过增加这些像素的不透明度来起作用的黑客。它还会使我们其他边缘的抗锯齿变得粗糙。此外，如果你在这些渐变中使用不透明度，那么你需要将下面的tableValues调整到你想要的范围（也就是如果你的填充是0.4不透明度，那么你的tableValues看起来像是“0.1.4.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>

Answer 2

SVG形状渲染选项允许配置对渲染很重要的内容。在这种情况下， shape-rendering =“crispEdges”解决了这个问题。

请参阅https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering

SVG Rounding Bug

2 个答案: