SVG入門

Pocket

SVGを使うとエディタとブラウザがあれば、特に環境を準備することなく図形を描くことができます。

基本

次のようにすると図形(この場合、赤い丸)が描画されます。

<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="45" fill="red" />
</svg>
</body>
</html>

サンプル

「line」を使う。strokeで線の色、stroke-widthで線の太さを指定する。

<svg width="200" height="100">
<line x1="10" y1="10" x2="190" y2="70" stroke="red" stroke-width="1" />
<line x1="10" y1="20" x2="190" y2="80" stroke="green" stroke-width="2" />
<line x1="10" y1="30" x2="190" y2="90" stroke="blue" stroke-width="3" />
</svg>

長方形

「rect」を使う。fillで塗りつぶし、strokeで線の色、stroke-widthで線の太さを指定する。
fill-opacityで透過度を指定する。「1」だと不透明、「0」だと透明。

<svg width="400" height="100">
<rect x="10" y="10" width="380" height="80" fill="silver" stroke="blue" stroke-width="3" />
</svg>

「circle」を使う。cxとcyで中心、rで半径を指定する。

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="yellow" stroke="green" stroke-width="4" />
</svg>

テキスト

テキストの描画には「text」を使う。font-sizeでフォントサイズ、text-anchorで位置などを指定する。

<svg height="200" width="200">
<text x="100" y="50" fill="red" text-anchor="start" font-size="20">左揃え</text>
<text x="100" y="100" fill="red" text-anchor="middle" font-size="20">中央揃え</text>
<text x="100" y="150" fill="red" text-anchor="end" font-size="20">右揃え</text>
</svg>

左揃え 中央揃え 右揃え

[ 2021年2月15日 | カテゴリー: デジタル | タグ: , ]

« | »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報