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

2018年8月13日

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

t f B! P L
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設置できるようにしてみます。

過去のSVG記事

SVG学習 1日目「SVGの利点を再確認」  

このブログを検索

プロフィール

自分の写真
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出で、出来高は無限大です。

ブログ アーカイブ

QooQ