HTML文書をつくる16 ベクタ画像、イメージマップ、クリッカブルマップ（svg, map, area）
ベクタ画像やクリックできる複雑な形状の領域について。
要素一覧
| 要素 | 概要 |
|---|---|
<map> |
イメージマップ（クリック可能な幾何学模様）を作る。 |
<area> |
図形を作る。 |
<svg> |
ベクタ画像を作る。 |
イメージマップは、クリッカブルマップとも呼ばれる。
map, area
| 要素 | 概要 |
|---|---|
<img> |
表示領域を指定する |
<map> |
イメージマップ（クリック可能な幾何学模様）領域を指定する。 |
<area> |
図形を作る。 |
<img>要素と組み合わせるmap要素のname属性値と、img要素のusemap属性値を同一にすることusemap属性値の最初に#を付与すること
| shape属性値 | 図形 | coords属性値 |
|---|---|---|
rect |
四角形 | x1, y1, x2, y2（左上, 右下） |
circle |
円 | x, y, R（中心のX座標、Y座標、半径） |
poly |
多角形 | x1, y1, x2, y2, ...（X,Yのセットを好きな数だけ） |
<img src="shapes.png" usemap="#shapes" alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star."> <map name="shapes"> <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box --> <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box."> <area shape=circle coords="200,75,50" href="green.html" alt="Green circle."> <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle."> <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html" alt="Yellow star."> </map>
私の環境では表示されなかった。代わりにimgのalt属性値テキストが表示された。
svg
ベクタ画像を作る。
<svg xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="60" fill="#ddd" /> <polygon points="50 10, 70 30, 50 50, 30 30" fill="#99f" /> </svg>
もしsvgファイルにするなら先頭に以下を追記する。お察しのとおり、SVGはXMLファイルのサブセットである。
<?xml version="1.0"?>
gzip圧縮したら拡張子は.svgzになる。
外部ファイル化したら<img>タグで参照して表示する。
<img src="some.svg" width=100 height=60> <img src="some.svgz" width=100 height=60>
SVGの主な要素は次のとおり。
| 要素 | 概要 | 属性 |
|---|---|---|
<line> |
直線 | x1,y1,x2,y2 |
<polyline> |
折れ線 | points（x,y座標をカンマ区切りで） |
<rect> |
四角形 | x,y,width,height |
<polygon> |
多角形 | points（x,y座標をカンマ区切りで） |
<circle> |
正円 | cx,cy,r（中心座標、半径） |
<ellipse> |
楕円 | cx,cy,rx, ry（中心座標、半径） |
<path> |
ベジエ曲線 | d（独自コマンドで） |
<animate> |
アニメーション | 詳細はanimate | MDN参照。 |
<image> |
ラスタ画像（gif,png,jpg） | href |
<a> |
リンク | href |
<text> |
文字列 | ,,,, |
直線
<svg viewBox="0 0 480 320" xmlns="http://www.w3.org/2000/svg"> <line x1="20" y1="20" x2="460" y2="280" stroke="green" stroke-width="4" /> </svg>
折れ線
<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"> <polyline points="0,10 50,90 100,10" stroke="red" stroke-width="3" /> </svg>
四角形
<svg viewBox="0 0 480 320" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="450" height="280" stroke="blue" fill="#ff0" stroke-width="2" /> </svg>
多角形
<svg viewBox="0 0 480 320" fill="none" xmlns="http://www.w3.org/2000/svg"> <polygon points="220,10 10,300 460,300" stroke="#FF0000" stroke-width="8" fill="green" /> </svg>
正円
<svg viewBox="0 0 480 320" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx=240 cy=160 r=150 stroke=blue fill=#ff0 stroke-width=2 /> </svg>
楕円
<svg viewBox="0 0 480 320" fill="none" xmlns="http://www.w3.org/2000/svg"> <ellipse cx=240 cy=160 rx=230 ry=150 stroke=blue fill=#ff0 stroke-width=2 /> </svg>
ベジエ曲線
| コマンド | 引数 | 概要 |
|---|---|---|
M |
x, y |
移動（指定した座標へ） |
L |
x, y |
線を引く（指定した座標へ） |
H |
x |
水平線を引く（指定した座標へ） |
V |
y |
垂直線を引く（指定した座標へ） |
C |
x1, y1, x2, y2, x, y |
三次ベジエ曲線を引く（制御点1, 制御点2, 終点） |
S |
x1, y1, x, y |
三次ベジエ曲線の短縮形。前のコマンドで用いた制御点から点対称の位置を新たな制御点として利用することで始点に対する制御点を省略する |
Q |
x1, y1, x, y |
二次ベジエ曲線を引く（制御点、終点） |
T |
x1, y1, x, y |
二次ベジエ曲線の短縮形。前のコマンドが Q または T コマンドである場合、その制御点を参照することで省略する |
A |
rx, ry, ,, ,, ``, |
楕円形の弧を引く |
Z |
- | パスを閉じる |
コマンドは大文字だと絶対座標、小文字だと相対座標になる。
パスの移動
<svg viewBox="0 0 480 320" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M 10 10 460 300" stroke=blue fill=#ff0 stroke-width=4 /> </svg>
パスの直線
<svg viewBox="0 0 480 320" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0,0 L 10 10 460 300Z" stroke=blue fill=#0ff stroke-width=4 /> </svg>
パスの水平線
もうだめ。ギブアップ。
パスの垂直線
もうだめ。ギブアップ。
パスの三次ベジエ曲線
もうだめ。ギブアップ。
パスの二次ベジエ曲線
もうだめ。ギブアップ。
パスの円弧
もうだめ。ギブアップ。
アニメーション
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <rect width="10" height="10"> <animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" /> </rect> </svg>
詳細はanimate | MDN参照。
ラスタ画像
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> <image href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Kandachime_2011.JPG/1200px-Kandachime_2011.JPG"></image> </svg>
リンク
<svg viewBox="0 0 480 320" xmlns="http://www.w3.org/2000/svg"> <a href="https://ytyaru.hatenablog.com/entry/2023/12/29/000000"> <circle cx="240" cy="160" r="150" fill="red" /> </a> </svg>
文字列
もうだめ。ギブアップ。
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <text x=0 y=20 font-size=20px>こんにちは世界！</text> </svg>
所感
図形も算数や図形なので苦手。こんなの書けない。頭おかしくなる。座標とか角度とかのキーワードだけで爆発しそう。
SVGが「算数できないヴァカはゴミ」に見えてきた。もうやめて（泣）
SVGこわい。でも簡単な図形なら書けそう。頑張れば作図ライブラリとか作れそう。
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
$ uname -a Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux
