SVG:要素をグループ化するための要素

ウオトミズ(UOTOMIZU)の中の人

SVGの要素をグループ化するための要素について。

<svg>要素について

<svg>要素はHTMLファイルの中にSVGを埋め込むためのもの。この要素の中にSVG関連の要素を記述していく。

<a>要素について

HTMLの<a>要素と同じ役割。リンクを埋め込むために使う。ただ、SVGの<a>要素はHMTLと少しだけ書き方が違う。下記のような感じで書く必要がある。CSSでホバー時のデザインも指定できる。

index.html


<svg>
 <a xlink:href="https://a.uotomizu.com" target="_blank">
  <rect height="100" width="200" y="0" x="0" rx="15" fill="skyblue"/>
  <text fill="white" text-anchor="middle" y="55" x="100">トップページ</text>
 </a>
</svg>

 

<defs>要素について

SVGグラデーションの時にとかによく使われてるコンテナ。コードを再利用したい時に使う。

 

<g>要素について

SVGの要素をグループ化するために使う。<g>要素内に記述したデザインは<g>内の子要素全てに適応される。

 

.