6

パス要素を使用して 2 つの svg 行をレンダリングしようとしています。最初の線は幅 1px でシャープ 2 番目の線は幅 2px でぼやけています 両方の線
の幅は同じです。これを修正する方法

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <path style="stroke-width:1;stroke:red;opacity:1;" d="M  300.5  250 L  300.5 300 "></path>
 <path style=" stroke-width:1;stroke:red;opacity:1;" d="M  350    250 L  350  300  "></path> 
</svg>
4

2 に答える 2

14

主に、ラインをシャープにするのは 0.5 オフセットです。デフォルトでは、整数座標はピクセル正方形の交点にマップされます。したがって、幅 1 の水平/垂直線は、ピクセル行間の境界の中央に配置され、両側のピクセルの途中まで伸びます。

したがって、2 行目を修正するには、座標に 0.5 を追加するか、スタイルを使用しますshape-rendering: crispEdges。CrispEdgesはアンチエイリアシングを防止するため、水平線/垂直線はくっきりとしていますが、斜めの線はブロック状に見えることに注意してください。

また、stroke-width=1 は有効な CSS 構文ではありません。最初の例の stroke-width: 1 は正しいです。

于 2013-10-24T09:44:57.280 に答える