HTML / 要素 / svg

HTML / 要素 / svg

まとめ、ここは svg タグを使うやり方メイン

各ブラウザの対応はこんな感じ Can I use... Support tables for HTML5, CSS3, etc

2019年末、現在、この機能を縦横無尽に駆使してなにかすることはできないと思ったほうがよい。 できるにはできるが使い勝手が悪く、クロスブラウザ対応に問題がある。

基本

このように svg タグを使い、その中に描画したいタグを入れる

<svg width="100" height="100" viewBox="-100 -100 200 200">
    <circle cx="50" cy="50" r="50" fill="red"></circle> 
</svg>

width, height は実際画面上でこの要素がどのぐらいの大きさの画像として扱われるかを設定する。 これをあえて指定しないで後からCSSでつけることもできる。これを指定しない場合は100%として扱われる

viewBox はその width, height の中でどのような座標系でマッピングするかとなる。 それが画面↓方向、画面右方向をプラスとして、始点の x, y 座標、そこからの幅、高さで指定される。

この例では、100px x 100px の画像の一番左上に -100, -100 という座標が割り当てられていて、 そこから 200 なので丁度 100,100 の座標が画像の右下に割り当てられることになる。

つまり画像の中心が 0,0 になるようにパラメータを設定しているということである。

fill は塗りを表していて、この場合は赤に塗られる。 何もしなければデフォルトで黒に塗られる。

html/elements/svg/start.txt · 最終更新: 2021-11-24 11:48 by ore