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 - 最終更新日: 09/29/2016 16:11:00 - リビジョン: 3.0

Internet Explorer 11

  • KB3168414
フィードバック