SVGタグで描画した画像の一部が切れてしまう場合の対処法

Web

起きた現象

以下のソースで角丸四角形を描画してみる。

<svg>
   <rect 
   stroke="#a6c024"
   stroke-width="10"
   fill="none"
   width="100"
   height="100"
   x="100"
   y="100"
   rx="8"
   ry="8" />
</svg>

ブラウザで確認してみると、SVG画像の一部が途切れて表示されてしまう。

原因と対処法

これはsvgタグで生成されるコンテナのサイズが、デフォルトでは300px*150pxになっているから。

対処法としては、svgタグに画像をすっぽり覆えるサイズでwidth、height属性を付けてあげる。

<svg width="300" height="300">
    <rect 
    stroke="#a6c024"
    stroke-width="10"
    fill="none"
    width="100"
    height="100"
    x="100"
    y="100"
    rx="8"
    ry="8" />
</svg>

そうするとSVG画像全体が表示できる。

複数の画像を扱う場合がほとんどだと思うのでその場合はCSSで。

タイトルとURLをコピーしました