サンプルと言っても、下記ページを読んで、そのまま書いて見ただけです。
ASCII.jp
サンプルHTML
<html>
<head>
<meta charset="UTF-8" />
<title>SVGサンプル</title>
</head>
<body>
<table border="1">
<tr>
<th><div><p>四角</p></div></th>
<th><div><p>角丸四角</p></div></th>
<th><div><p>正円</p></div></th>
<th><div><p>楕円</p></div></th>
<th><div><p>直線</p></div></th>
<th><div><p>連続直線</p></div></th>
<th><div><p>多角形</p></div></th>
<th><div><p>ベジエ曲線</p></div></th>
<th><div><p>JSで記述</p></div></th>
</tr>
<tr>
<td width="100" height="100">
<svg>
<rect x="1" y="1" fill="blue" stroke="red" width="100" height="100">
</svg>
</td>
<td width="100" height="100">
<svg>
<rect x="1" y="1" fill="blue" stroke="red" width="100" height="100" ry="20">
</svg>
</td>
<td width="100" height="100">
<svg>
<circle cx="50" cy="50" r="50" fill="blue" stroke="red">
</svg>
</td>
<td width="100" height="100">
<svg>
<ellipse cx="50" cy="50" rx="50" ry="30" fill="blue" stroke="red">
</svg>
</td>
<td width="100" height="100">
<svg>
<line x1="1" y1="1" x2="100" y2="100" stroke="blue">
</svg>
</td>
<td width="100" height="100">
<svg>
<polyline points="1,1 50,100 100,1" fill="none" stroke="blue">
</svg>
</td>
<td width="100" height="100">
<svg>
<polygon points="1,1 50,100 100,1" fill="none" stroke="blue">
</svg>
</td>
<td width="100" height="100">
<svg>
<path d="M 1,1 C 33,100,66,20,100,30" fill="none" stroke="blue">
</svg>
</td>
<td width="100" height="100">
<form>
<input type="button" value="直線を描く" onclick="drawLine()" />
</form>
<script><!--
function drawLine() {
document.getElementById('mySVG').innerHTML = '<svg><line x1="1" y1="100" x2="100" y2="1" stroke="blue">';
}
--></script>
<div id="mySVG"></div>
</td>
</tr>
</table>
</body>
</html>
連続曲線の時に、fill属性をnoneにしないと、黒で内部が塗りつぶされます。
ブラウザは特定以上のバージョンじゃないと、上手く表示されないようです。
これを使えば、僕の用にあまりhtmlとか詳しくなくてもちょっとした図形を書くことができそうです。
以前と比べて導入しやすくなったようです。このような物もあるんだなと思いました。
0 件のコメント:
コメントを投稿