1

feDisplacementMap svg フィルターを使用すると、滑らかな svg ラインがすべてギザギザになります。おそらく大きくレンダリングしてから縮小することもできますが、SVG はアンチエイリアスができるはずではありませんか?

4

2 に答える 2

1

SVGフィルターは、ベクトルレベルではなく、ピクセルレベルで入力を処理します。SVGフィルターに関する限り、使用できるRGBAピクセルの大きな長方形が渡されています。ディスプレースメントマップの結果はピクセル化されたように見えることがあります。これは、フィルターがディスプレースメントされたエッジがどこにあるかを認識していないためです。（アンチエイリアシングとして使用されていた古い半透明のピクセルも置き換えられました。）ただし、これによって発生する問題を解決するために、別のフィルターを1つまたは2つ追加できる場合があります。この問題を解決するための創造的な方法：

  1. ディスプレイスメント後のグラフィックを取得し、半径数ピクセルでぼかしてから、元のグラフィックにぼかしをブレンドします。

  2. ディスプレイスメント後のグラフィックを取得し、輝度からアルファへの変換を行ってから、拡散照明効果を備えたそのアルファマップを使用して、偽のアンチエイリアス照明効果を追加します。

  3. エッジ検出値を持つコンボリューションマトリックスを使用して、グラフィックからエッジを抽出し、その結果をぼかして、ソースグラフィックにブレンドし直します。

グラフィックによっては、侵食または拡張フィルターを使用できる場合がありますが、それは箱型のハイライトを生成する傾向があり、機能しない場合があります。そしてもちろん、SVGでの入力を（ストローク効果を使用して）いつでも微調整して、ソースグラフィックを「アンチエイリアス」して、結果がそれほど奇妙に見えないようにすることができます。

于 2012-10-08T22:42:05.833 に答える
1

さて、私は自分の質問に対する答えを見つけました: filterRes 属性: http://www.w3.org/TR/SVG/filters.html#FilterElementFilterResAttribute

私のテストでは、Chrome で、filterRes を増やすとかなり劇的に遅くなりました。

于 2012-10-09T03:00:12.173 に答える