circle=圓形 cx=X座標 cy=Y座標 r=圓形半徑 fill=物件颜色 stroke=邊框颜色 stroke-width=邊框寬度
<svg width="130%" height="100px">
<circle cx="60" cy="50" r="30" fill="blue" />
</svg>
<circle cx="60" cy="50" r="30" fill="blue" />
</svg>
<svg width="100px" height="100px">
<circle cx="60" cy="50" r="30" stroke="black" stroke-width="5" fill="red"/>
</svg>>
<circle cx="60" cy="50" r="30" stroke="black" stroke-width="5" fill="red"/>
</svg>>
<svg width="100px" height="120px">
<circle cx="60" cy="50" r="30" stroke="red" stroke-width="7" fill="none"/>
</svg>
<circle cx="60" cy="50" r="30" stroke="red" stroke-width="7" fill="none"/>
</svg>
<svg width="130px" height="120px">
<ellipse cx="60"cy="50" rx="50" ry="20" fill="yellow" />
</svg>
<ellipse cx="60"cy="50" rx="50" ry="20" fill="yellow" />
</svg>
rect=矩形 x=X座標 y=Y座標 rx=X圓角 ry=Y圓角 width=矩形寬度 height=矩形高度 fill=物件颜色 stroke=邊框颜色 stroke-width=邊框寬度
<svg width="100%" height="100%">
<rect x="20" y="35" width="50" height="50" stroke="black"
fill="yellow" />
</svg>
<rect x="20" y="35" width="50" height="50" stroke="black"
fill="yellow" />
</svg>
<svg width="100%" height="100%">
<rect x="20" y="35" width="50" height="50" stroke="red"
fill="blue" />
</svg>
<rect x="20" y="35" width="50" height="50" stroke="red"
fill="blue" />
</svg>
<svg width="100%" height="100%">
<rect x="20" y="35" width="80" height="50" stroke="red"
stroke-width="3" />
</svg>
<rect x="20" y="35" width="80" height="50" stroke="red"
stroke-width="3" />
</svg>
<svg width="100%" height="100%">
<rect x="20" y="35" rx="15" ry="15" width="100"
height="50"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<rect x="20" y="35" rx="15" ry="15" width="100"
height="50"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<svg width="100%" height="100%">
<rect x="20" y="35" rx="50" ry="50" width="100"
height="50"
style="fill:none;stroke:black;stroke-width:5;" />
</svg>
<rect x="20" y="35" rx="50" ry="50" width="100"
height="50"
style="fill:none;stroke:black;stroke-width:5;" />
</svg>
polyline=連接的直線 fill=物件颜色 stroke=邊框颜色 stroke-width=邊框寬度
points="x1 y1,x2,y2,x3 y3,....
points="x1 y1,x2,y2,x3 y3,....
<svg width="150px" height="150px">
<polyline fill="yellow" stroke="red" stroke-width="3"
points="5 30, 30 60,60 5,90 60,120 30,120 100,
5 100,5 30" />
</svg>
<polyline fill="yellow" stroke="red" stroke-width="3"
points="5 30, 30 60,60 5,90 60,120 30,120 100,
5 100,5 30" />
</svg>
<svg style="font-size: 20px ;">
<text x="5" y="50" fill="red" transform="rotate(30 20,40)">html.ug5g.com</text>
</svg>
<text x="5" y="50" fill="red" transform="rotate(30 20,40)">html.ug5g.com</text>
</svg>
<svg style="font-size: 20px ;">
<defs><path id="path1" d="M5,8 a1,1 0 0,0 100,0" /></defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">ug5g.com</textPath>
</text>
</svg>
<defs><path id="path1" d="M5,8 a1,1 0 0,0 100,0" /></defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">ug5g.com</textPath>
</text>
</svg>
<svg style="font-size: 20px ;">
<text x="10" y="20" style="fill:red;">https:
<tspan x="10" y="45">html.ug5g</tspan>
<tspan x="10" y="70">.com</tspan>
</text>
</svg>
<text x="10" y="20" style="fill:red;">https:
<tspan x="10" y="45">html.ug5g</tspan>
<tspan x="10" y="70">.com</tspan>
</text>
</svg>
00
沒有留言:
張貼留言