2

この質問に対する 2 番目の回答で説明した「すべてを 0.5 ピクセルずつオフセットする」トリックを使用して、シェイプ上で鮮明な 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 に答える