SVGを効果的に使った面白いサイトを見つけました。
https://d3js.org/
ヘッダの大きなバナー内がsvgで記述されています。
マウスを画像の上にかぶせると、アニメーションされて面白い効果になっています。
こういう蜂の巣の模様を「ハニカム模様」っていうらしいですが、たくさんのメニューを一括で見せる時にとても良さそうです。
SVGの描画について
2日目のSVG勉強は、色々な形をタグを書いて表示してみましょう。
svgタグ
<!DOCTYPE html>
<html>
<head>
<title>svg</title>
<!-- <link rel="stylesheet" href="svg.css"> -->
<link rel="stylesheet" href="svg.css" />
</head>
<body>
<h1>SVG</h1>
<svg width="600" height="200" id="test_1" version="1.1" viewBox="0 0 1200 400">
<rect x="0" y="0" width="160" height="160" transform="translate(0 0)" stroke="blue" stroke-width="4" fill="skyblue"></rect>
<rect x="0" y="0" width="80" height="80" transform="translate(80 20) rotate(45)" fill="tomato" rx="8" ry="8"></rect>
<circle cx="0" cy="0" r="80" transform="translate(250 80)" fill="rgba(255,0,0,0.5)"></circle>
<ellipse cx="0" cy="0" rx="80" ry="40" transform="translate(400 80)" fill="rgba(0,0,255,0.5)"></ellipse>
<line x1="400" y1="0" x2="480" y2="100" stroke="lightgreen" stroke-width="8"></line>
<polyline points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" stroke="blue" stroke-width="8" fill="none"></polyline>
<polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" transform="rotate(5)" stroke="brown" stroke-width="4" fill="yellow"></polygon>
</svg>
<script src="svg.js"></script>
</body>
</html>
width , height : svg全体のサイズ
viewBox : 全体サイズ内の表示するサイズ（viewBoxの方が大きい値であれば、縮小表示されます）
version : 記載しなくても大丈夫
上記は今回の描画する全てのシェイプを一括で表示しています。
個別の表示は下記を参考にしてください。
rect（箱）
<!DOCTYPE html>
<html>
<head>
<title>svg</title>
</head>
<body>
<h1>SVG - rect</h1>
<svg width="200" height="200" id="test_1" version="1.1">
<rect x="4" y="4" width="160" height="160" stroke="blue" stroke-width="4" fill="skyblue"></rect>
<rect x="0" y="0" width="80" height="80" transform="translate(84 24) rotate(45)" fill="tomato" rx="8" ry="8"></rect>
</svg>
</body>
</html>
属性情報
x , y : 座標
width , height : 縦横サイズ
stroke , stroke-width : 枠線の色と枠線の幅
fill : 塗りつぶし色
transform : rotate（回転値）、translate（移動値）
circle(円)
<!DOCTYPE html>
<html>
<head>
<title>svg</title>
</head>
<body>
<h1>SVG</h1>
<svg width="200" height="200" id="test_1" version="1.1">
<circle cx="84" cy="84" r="80" fill="rgba(255,0,0,0.5)" stroke="blue" stroke-width="4"></circle>
</svg>
</body>
</html>
cx , cy : 座標
r : 半径
fill : 塗りつぶし色
stroke , stroke-width : 枠線の色と枠線の幅
transform : translate（移動値）
ellipse（楕円）
<!DOCTYPE html>
<html>
<head>
<title>svg</title>
</head>
<body>
<h1>SVG</h1>
<svg width="200" height="200" id="test_1" version="1.1">
<ellipse cx="84" cy="80" rx="80" ry="40" fill="rgba(0,0,255,0.5)" stroke="rgba(255,0,0,0.5)" stroke-width="4"></ellipse>
</svg>
</body>
</html>
cx , cy : 座標
rx , ry : 縦横サイズ
fill : 塗りつぶし色
stroke , stroke-width : 枠線の色と枠線の幅
transform : rotate（回転値）、translate（移動値）
line（線）
<!DOCTYPE html>
<html>
<head>
<title>svg</title>
<!-- <link rel="stylesheet" href="svg.css"> -->
<link rel="stylesheet" href="svg.css" />
</head>
<body>
<h1>SVG</h1>
<svg width="200" height="200" id="test_1" version="1.1">
<line x1="10" y1="10" x2="190" y2="190" stroke="lightgreen" stroke-width="8"></line>
</svg>
<script src="svg.js"></script>
</body>
</html>
x1 , y1 : 開始座標
x2 , y2 : 終点座標
stroke , stroke-width : 枠線の色と枠線の幅
polyline（折れ線）
<!DOCTYPE html>
<html>
<head>
<title>svg</title>
<!-- <link rel="stylesheet" href="svg.css"> -->
<link rel="stylesheet" href="svg.css" />
</head>
<body>
<h1>SVG</h1>
<svg width="600" height="200" id="test_1" version="1.1" viewBox="0 0 1200 400">
<polyline points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" stroke="blue" stroke-width="8" fill="none"></polyline>
</svg>
<script src="svg.js"></script>
</body>
</html>
points : 座標（x,y）を半角スペースで複数登録
fill : 塗りつぶし色（線を閉じていなくても自動的に塗りつぶされます）
stroke , stroke-width : 枠線の色と枠線の幅
ポリゴン（多角面）
<!DOCTYPE html>
<html>
<head>
<title>svg</title>
<!-- <link rel="stylesheet" href="svg.css"> -->
<link rel="stylesheet" href="svg.css" />
</head>
<body>
<h1>SVG</h1>
<svg width="600" height="200" id="test_1" version="1.1" viewBox="0 0 1200 400">
<polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" transform="rotate(5)" stroke="brown" stroke-width="4" fill="yellow"></polygon>
</svg>
<script src="svg.js"></script>
</body>
</html>
points : 座標（x,y）を半角スペースで複数登録（開始点と終了点が自動的に閉じられます）
fill : 塗りつぶし色
stroke , stroke-width : 枠線の色と枠線の幅
次回予告
今回は、一通りのシェイプと呼ばれるオブジェクトを描いてみましたが、次回はこれをまとめたjavascriptを書いてもっと簡単にsvg設置できるようにしてみます。
0 件のコメント:
コメントを投稿