IE11/Edge:SVG で stroke-width="1" で Path の描画が 2 ピクセルとなる

現象

IE11/Microsoft Edge において、SVG 内で stroke-width="1" で path を描画した場合に、2 ピクセルにわたって描画される場合があります。
本現象は、CENTER タグやスクリプトでの SVG タグの位置制御を行っている場合などに、ウインドウの大きさを変更した結果 SVG タグの位置がウインドウ幅に対して奇数ピクセル位置から始まる状態となった時に発生します。

以下の HTML ファイルを IE11 や Edge で開き、ウインドウをリサイズした場合に、縦の線が 2 ピクセルとなる場合があります。 

<!DOCTYPE html>
<HTML>
<HEAD></HEAD>
<BODY>
<CENTER>
<DIV id="TestDIV" name="TestDIV" style='width: 300px; height: 200px; position: relative; border: 1px solid #000000;'>
<SVG id="TestSVG">
<g>
<path fill="white" d="M 1 90 L 1 45 L 3 45 L 3 90 Z M 2 45 L 2 31 M 2 90 L 2 92" stroke="#fe0000" stroke-width="1"></path>
</g>
</SVG>
</DIV>
</CENTER>
</BODY>
</HTML>



状況

IE11/Microsoft Edge の問題として調査中です。



プロパティ

文書番号:3168414 - 最終更新日: 2016/09/29 - リビジョン: 1

フィードバック