web-dev-qa-db-ja.com

アンチエイリアスを維持しながら、鮮明なエッジを持つSVG要素をレンダリングするにはどうすればよいですか？

アンチエイリアスを維持しながら、鮮明なエッジを持つsvg要素をレンダリングする方法はありますか？

最新のブラウザで動作するブラウザベースのツールを作成しています。

shape-rendering 属性をいじってみても、探している結果が得られません。

パスが滑らかに見えるように、要素にNiceアンチエイリアスを設定しますで_shape-rendering: auto_を使用します：

enter image description here

しかし、_shape-rendering: crispEdges_でレンダリングされた場合のように、開始ボックスがシャープで鮮明なに見えるように、アンチエイリアスを必要としない要素も必要です。

enter image description here

これは可能ですか？ケーキを食べて食べたいですか？

html5svg
62
brice

おそらく、ルートsvg要素の形状レンダリングプロパティを設定します。
このように、各形状要素に形状レンダリングプロパティを設定する必要があります。

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
        fill="none" stroke="black"/>
    <path d="M80,30l100,100" shape-rendering="optimizeQuality" 
        stroke="black" stroke-width="5"/>
</svg>
71
defghi1977

アンチエイリアスによるぼけやcrispEdgesモードを使用せずにボックスをシャープに見せたい場合は、ラインエッジがピクセル境界にあることを確認してください。したがって、たとえば、ラインの幅が奇数ピクセルの場合、0.5ピクセルの座標を指定します。

<rect x="10.5" y="10.5" width="150" height="20" 
    stroke-width="1px" fill="none" stroke="black"/>

ストローク幅が均等の場合は境界上。

<rect x="10" y="10" width="150" height="20" 
    stroke-width="2px" fill="none" stroke="black"/>

もちろん、これは実際にSVGが1：1でレンダリングされている場合にのみ機能します。つまり、ブラウザによって再スケーリングされていません。そして、水平線と垂直線のみ。

22
Paul LeBeau

[写真を投稿したいので、コメントではなく回答として投稿しています。それ以外の場合、これは @ defghi1977による有用な投稿 に対するコメントです。ところで、彼に+1。]

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
          fill="none" stroke="black" />
    <rect x="10" y="50" width="150" height="20" shape-rendering="auto" 
          fill="none" stroke="black" />
    <path d="M40,30l100,100" shape-rendering="crispEdges" 
          stroke="black" stroke-width="5" />
    <path d="M80,30l100,100" shape-rendering="auto" 
          stroke="black" stroke-width="5" />
</svg>

生産

enter image description here

これはFirefox 38.0.5によってレンダリングされました。
Internet Explorer 11では、両方shape-rendering設定は、鮮明ではなく、アンチエイリアスで同じ結果を生成します。

9
Nick Alexeev