svg は、要素の周囲に非常に小さなピクセルでグラデーションの境界線を追加していることに気付きました。そのためのjsfiddleは次のとおりです。
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="10" />
<g stroke="green" >
<line x1="100" y1="300" x2="300" y2="300"
stroke-width="20" fill="none" />
</g>
単色の線と四角形を描くにはどうすればよいですか。通常のズームでは見にくいです。スクリーンショットを撮り、pixlr.com でズームします。画像は次のとおりです。