redd 發表於 2017-3-15 23:50:58

HTML5 : SVG

SVG 畫圓
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>

redd 發表於 2017-3-15 23:52:40

SVG 矩形
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="redrect" width="300" height="100" fill="red" />
</svg>

redd 發表於 2017-3-16 01:28:34

SVG 線條
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2" />
</svg>

redd 發表於 2017-3-16 01:39:45

SVG 橢圓形
<h2>HTML5 SVG Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>

redd 發表於 2017-3-16 01:46:01

SVG 多邊形
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="20,10,300,20,170,50" fill="red" />
</svg>
頁: [1]
查看完整版本: HTML5 : SVG