svg 中的线条抗锯齿效果

Question

我创建了一个简单的 SVG：https://thomas-guettler.de/tmp/bust-in-silhouette.svg

台词很“硬”。我想要软边框，就像抗锯齿字体一样。

如何做到这一点？

更新：shape-rendering 不是我要找的。我想让边缘模糊。像这样：

Answer 1

您可以使用 feGaussianBlur 过滤器：

<svg width="200" height="200">
<defs>
    <filter id="blur-filter" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1.5" />
    </filter>
  </defs>
  <g transform="translate(0,-70)">
    <circle style="fill:none;stroke:#e4e4e4;stroke-width:3" id="path12" cx="36.571712" cy="112.38668" r="14.648677" filter="url(#blur-filter)"/>
    <path id="path16" style="fill:none;stroke:#e4e4e4;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 44.558467,124.4381 c -0.785324,6.57119 12.819094,2.84752 14.563786,9.83637 -0.136789,8.75076 1.389218,15.51609 -1.00371,16.20504 -3.548352,3.55851 -37.719446,1.47838 -43.074237,-0.51107 -2.069788,-3.00382 -0.76269,-4.39621 -1.193106,-12.72626 0.649711,-9.64531 16.184933,-5.35944 15.200858,-11.71705" filter="url(#blur-filter)"/>
  </g>
</svg>