0

次の形式の SVG ファイルがあります。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M0.0 0.0 L1.0 0.0 L1.0 1.0 L0.0 1.0 L0.0 0.0 Z" fill="none" transform="translate(276.53762663809374, 97.7838427947598) scale(177.52243125896803, -89.004366812227)" style="stroke: black; stroke-width: 0.5px;"></path>
</svg>

0.5px の境界線で表示したい場合、画像は巨大な黒い境界線で表示されます。変換後に適用するストローク幅を取得するにはどうすればよいですか? これが不可能な場合、正しく表示されるように要素をラップする最も簡単な方法は何ですか? 「d」属性の変更は避けたいと思います。

4

1 に答える 1

4

vector-effect="non-scaling-stroke" を使用できます

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path vector-effect="non-scaling-stroke" d="M0.0 0.0 L1.0 0.0 L1.0 1.0 L0.0 1.0 L0.0 0.0 Z" fill="none" transform="translate(276.53762663809374, 97.7838427947598) scale(177.52243125896803, -89.004366812227)" style="stroke: black; stroke-width: 0.5px;"></path>
</svg>

1 つの注意点は、IE9/10 はこれを実装していませんが、Webkit、Opera、および Firefox は実装していることです。

于 2013-05-22T06:51:54.617 に答える