<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>SVG</title> </head> <body> <svg width="600" height="300" onload=" var c = document.getElementsByTagName('circle'); for (var i=0; i<c.length; i++){ c[i].setAttribute('cx', r(600)); c[i].setAttribute('cy', r(400)); c[i].setAttribute('r', r(100)); c[i].setAttribute('fill', 'rgb('+r(255)+','+r(255)+','+r(255)+')'); } function r(n){ return Math.floor(Math.random() * (n + 1)); } "> <rect width="300" height="300" fill="red" /> <circle cx="100" cy="100" r="20" fill="white" /> <circle cx="100" cy="100" r="20" fill="white"/> <circle cx="100" cy="100" r="20" fill="white"/> <circle cx="100" cy="100" r="20" fill="white"/> <circle cx="100" cy="100" r="20" fill="white"/> <circle cx="100" cy="100" r="20" fill="white"/> <circle cx="100" cy="100" r="20" fill="white"/> <circle cx="100" cy="100" r="20" fill="white"/> <circle cx="100" cy="100" r="20" fill="white"/> <circle cx="100" cy="100" r="20" fill="white"/> <circle cx="100" cy="100" r="20" fill="white"/> <circle cx="100" cy="100" r="20" fill="white"/> <circle cx="100" cy="100" r="20" fill="white"/> </svg> </body> </html>
Category: svg
svgで遊ぼう

<svg width="600" height="300"> <rect width="300" height="300" fill="red" /> <text x="100" y="100" font-size="32" fill="white" stroke="black" stroke-width="2" rotate="20"> Google <text> </svg>
transform
<svg width="600" height="300"> <rect width="300" height="300" fill="red" /> <rect width="100" height="100" fill="green" transform="translate(50,50)" /> <rect width="100" height="100" fill="green" transform="skewX(30)" /> <rect width="100" height="100" fill="white" opacity="0.2" /> </svg>
アニメーション
<svg width="600" height="300"> <rect width="300" height="300" fill="red" /> <circle cx="100" cy="100" r="20" fill="white"> <animate attributeName="r" from="20" to="80" dur="2s" repeatCount="indefinite"> </circle> <circle cx="200" cy="200" r="20" fill="blue"> <animate attributeName="r" from="40" to="120" dur="2s" begin="1s" repeatCount="indefinite"> </circle> </svg>
SVG
<svg width="600" height="300"> <rect width="100%" height="100%" fill="red"/> </svg>
SVGでは後ろに書いたものが前に表示されます。
<svg width="600" height="300"> <rect width="100%" height="100%" fill="red"/> <rect width="100" height="50" fill="blue"/> </svg>
viewBox:デバイスに合わせて反映
<svg width="600" height="300" viewBox="0 0 400 200"> <rect width="400" height="200" fill="red"/> <rect width="100" height="50" fill="blue"/> </svg>
色の設定
<svg width="600" height="300"> <rect width="600" height="300" fill="red"/> <rect width="500" height="250" fill="#00ff00"/> <rect width="400" height="200" fill="rgb(0, 0, 255)"/> <rect width="300" height="150" fill="rgba(255,255,255,0.4)"/> </svg>
枠線
<svg width="600" height="300"> <rect width="600" height="300" fill="red" stroke="black" stroke-width="10"/> </svg>
sytle属性による記述
<svg width="600" height="300"> <rect width="600" height="300" style="fill:red; stroke:black; stroke-dasharray:20,5"/> </svg>
cssのような書き方
<svg width="600" height="300"> <style type="text/css"><![CDATA[ #myBox{ fill:red; stroke:black; } ]]></style> <rect width="600" height="300" id="myBox"> </svg>
gタグ
<svg width="600" height="300"> <g stroke="black"> <rect width="600" height="300" fill="red" /> <rect width="500" height="200" fill="green" /> <rect width="400" height="100" fill="white"/> </g> </svg>
グラデーション
<svg width="600" height="300"> <defs> <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"> <stop offset="0" stop-color="skyblue" /> <stop offset="0.5" stop-color="pink" /> <stop offset="1" stop-color="yellow" stop-opacity="0.5"/> </linearGradient> </defs> <rect width="600" height="300" fill="url(#g1)" /> </svg>
円形グラデーション
<svg width="600" height="300"> <defs> <radialGradient id="g1" cx="0.5" cy="0.5" r="0.5"> <stop offset="0" stop-color="skyblue" /> <stop offset="0.5" stop-color="pink" /> <stop offset="1" stop-color="yellow" stop-opacity="0.5"/> </linearGradient> </defs> <rect width="600" height="300" fill="url(#g1)" /> </svg>
stroke
<line x="100" y1="100" x2="200" y2="200" stroke-width="20" stroke="black" stroke-linecap="raound" />
circle, ellipse
<circle cx="200" cy="100" r="40" fill="white" /> <ellipse cx="400" cy="100" rx="40" ry="80" fill="green" />
polygon, polyline, path
<polyline points="100 50 150 100 50 100" stroke="black" fill="none"/> <polygon points="100 50 150 100 50 100" stroke="black" fill="none"/> <path d="M100 50 l50 50 h100 v100 h100" stroke="black" fill="none"/>