SVG学習 2日目「基本描画」

2018年8月13日

SVG テクノロジー プログラミング 特集

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設置できるようにしてみます。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。