Question

我正在使用the second answer to this question中讨论的“偏移所有半像素”技巧，以便在形状上获得清晰的1px笔画。

（涉及圆形边缘，因此shape-rendering: crispEdges解决方案在这里不可行 - 它使得笔划的弯曲部分看起来很糟糕。）

为什么添加滤镜（我使用高斯模糊+偏移滤镜来实现投影）会破坏半像素偏移黑客？

您可以使用the jsfiddle。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="-20%" y="-20%" width="160%" height="160%">
      <feOffset result="offOut" in="SourceAlpha" dx="10" dy="10" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <g transform="translate(5.5,5.5)">
    <!-- This one has a blurry stroke -->
    <rect width="50" height="50" rx="5" ry="5" stroke="black" stroke-width="1" fill="steelblue" filter="url(#f1)" />
    <!-- This one has a crisp stroke -->
    <rect x="150" width="50" height="50" rx="5" ry="5" stroke="black" stroke-width="1" fill="steelblue" />
  </g>
</svg>

显然我无法以新用户的身份发布内嵌图片，但您可以this is an image of how the svg looks for me。

Answer 1

如果您不喜欢模糊边缘，您可以尝试添加带feFuncA的feComponentTransfer来手动操作边缘模糊。又名：

<filter id="fee" x="-20%" y="-20%" width="160%" height="160%">
    <feComponentTransfer>
          <feFuncA type="table" tableValues="0 0 1" />
    </feComponentTransfer>
</filter>

为什么过滤器会破坏半像素技巧以获得清晰的1px笔画？

1 个答案: