More than 5 years have passed since last update.

SVGの図形を拡大した際にストロークまで太くなってしまうのを防ぐ

Posted at 2019-01-22

概要

tranfrom属性のscaleを使って図表を拡大した際に、図形のストロークまで太くなってしまうのを防ぐ。

エレメントの「vector-effect」属性に「non-scaling-stroke」を指定する。

例

<svg>
  <g transform="scale(3)">
    <circle cx="60" cy="60" r="50" fill="#ffcccc"  stroke="black"></circle>
    <circle cx="180" cy="60" r="50" fill="#ccccff" stroke="black" vector-effect="non-scaling-stroke"></circle>
  </g>
</svg>

実行結果

Create a new fiddle - JSFiddle 2019-01-22 17-39-28.png

何に使うのか

D3でパン・ズーム実装していると必要になることが多い。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up