SVG で線を作成しているのですが、Web ページで線がぼやけて表示されます。もっと明確に言うと、線幅 1 ピクセルよりも大きく表示されます。なぜこのようなことが起こるのでしょうか。また、SVG でこれを修正する方法はありますか。
これがコードです。このコードを単独で実行すると、ぼやけません。Web ページに表示されると、線の高さは 1 ピクセルではなく約 2 ピクセルになります。
#HorizontalLine1178 {
stroke:rgb(154,154,154);
stroke-width:1;
}<svg style="width:100%;">
<line id="HorizontalLine1178" y2="97" y1="97" x2="100%" x1="62" >
</svg>ベストアンサー1
Y座標がピクセル全体にある場合、1pxストロークはその周囲に配置され、「アンチエイリアス」されるからです（ポール・ルボーの素晴らしいイラスト）。この場合は半ピクセル座標を使用するか、shape-rendering="crispEdges"これにより、ピクセルの丸めが自動的に行われますが、丸いオブジェクトでもシャープなエッジが生成されます。
<svg style="width:100%; background-color: white" stroke="black" fill="white" stroke-width="1">
<line y2="10.0" y1="10.0" x2="90%" x1="10">
<title>.0</title>
</line>
<line y2="15.5" y1="15.5" x2="90%" x1="10">
<title>.5</title>
</line>
<line y2="20.0" y1="20.0" x2="90%" x1="10" shape-rendering="crispEdges">
<title>.0 + crispEdges</title>
</line>
<circle cy="50" cx="20" r="10">
<title>.0</title>
</circle>
<circle cy="49.5" cx="44.5" r="10">
<title>.5</title>
</circle>
<circle cy="50" cx="70" r="10" shape-rendering="crispEdges">
<title>.0 + crispEdges</title>
</circle>
<rect x="90" y="40" width="20" height="20">
<title>.0</title>
</rect>
<rect x="120" y="40" width="20" height="20" shape-rendering="crispEdges">
<title>.0 + crispEdges</title>
</rect>
<rect x="149.5" y="39.5" width="20" height="20">
<title>.5</title>
</rect>
<rect x="190" y="40" width="20" height="20" stroke="none" fill="black">
<title>.0 + fill, no stroke</title>
</rect>
<rect x="219.5" y="39.5" width="20" height="20" stroke="none" fill="black">
<title>.5 + fill, no stroke</title>
</rect>
</svg>上記の抜粋を大幅に拡大したスクリーンショット1:1 DPI比率で画面上に作成ズームなし（1 仮想 CSS ピクセル = 1 物理画面ピクセル）:
DPI 設定やズーム値が異なると、調整後に指定された座標が終了する場所に応じて、異なる結果が得られる場合があります。