基本图形和属性
- 基本图形
- <rect>
- <circle>
- <ellipse>
- <line>
- <polyline>
- <polygon>
- 基本属性
- fill
- stroke
- stroke-width
- transform
1、<rect>矩形
2、<circle>圆形
3、<ellipse>椭圆
4、<line>直线
5、<polyline>折线
6、<polygon>多边形
7、基本属性
- fill填充颜色
- stroke描边
- stroke-width描边颜色
- transform变形
示例
<svg xmlns="http://www.w3.org/2000/svg">
<rect
x="10"
y="10"
rx="5"
ry="5"
width="150"
height="100"
stroke="red"
fill="none">
</rect>
<circle
cx="250"
cy="60"
r="50"
stroke="red"
fill="none">
</circle>
<ellipse
cx="400"
cy="60"
rx="70"
ry="50"
stroke="red"
fill="none">
</ellipse>
<line
x1="10"
y1="120"
x2="160"
y2="220"
stroke="red">
</line>
<polyline
points="250 120
300 220
200 220"
stroke="red"
fill="none">
</polyline>
<polygon
points="250 120
300 220
200 220"
stroke="red"
stroke-width="5"
fill="yellow"
transform="translate(150 0)">
</polygon>
</svg>
基本操作
- 创建图形
- document.createElementNS(ns, tagName)
- 添加图形
- element.appendChild(childElement)
- 设置/获取属性
- element.setAttribute(name, value)
- element.getAttribute(name)
