2

我正在使用该问题的第二个答案中讨论的“将所有内容偏移半个像素”技巧来在形状上获得清晰的 1px 笔划。

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

添加过滤器（我使用高斯模糊+偏移过滤器来实现投影）如何打破半像素偏移黑客？

你可以玩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>

显然我不能以新用户的身份发布内联图像，但你可以这是 svg 如何为我寻找的图像。

4

1 回答 1

0

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

<filter id="fee" x="-20%" y="-20%" width="160%" height="160%">
    <feComponentTransfer>
          <feFuncA type="table" tableValues="0 0 1" />
    </feComponentTransfer>
</filter>
于 2013-05-07T04:21:21.937 回答