SVGの縦線と横線の太さを同じにしたい

Question

SVGの縦線と横線の太さを同じにしたい

SVGで縦線と横線を同じ太さで描きたいのですが、微妙に横線が太く薄くなってしまいます。直すにはどこを修正すれば良いでしょうか。

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="891" height="630" version="1.1" viewBox="0 0 297 210"
	xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<style type="text/css">
		<![CDATA[
			.str0 {stroke:black;stroke-width:1;}
			.fil0 {fill:none}
		]]>
		</style>
	</defs>
	<g>
	<line class="str0" x1="148.5" y1="0" x2="148.5" y2= "210" />
	<line class="str0" x1="0" y1="105" x2="297" y2= "105" />
	<circle class="str0 fil0" cx="148.5" cy="105" r="40" fill="#ff0000" />
	</g>
</svg>

試したこと

viewboxの理解不足等から描画領域全体が縦に引き延ばされているのかと思い、中央に円を描いてみたのですが、
てっきり縦に引き延ばされた楕円になると思いきや真円が表示されてしまいました。

補足情報

chromeで。

Answer 1

width="891" height="630" version="1.1" viewBox="0 0 297 210"
・・・・
<line class="str0" x1="148.5" y1="0" x2="148.5" y2= "210" />
<line class="str0" x1="0" y1="105" x2="297" y2= "105" />
<circle class="str0 fil0" cx="148.5" cy="105" r="40" fill="#ff0000" />

小数点と、奇数を一切使わないようにすれば直るはずです。

モニターの最小は1px(1ドット)なので、
それ以下の端数が出るとアンチエイリアスのような処理がかかり、
色が変わったように見えたり、ボケたように見えることがあります。

Comments

[nekonekopun]

なるほど、そういうことなのですね。
ありがとうございました。