前言
图形
SVG
1 | <svg id="test_1" |
SVG中
- width/height 是图形的宽/高
viewBox="0 0 300 200"
是画布的属性
如上面的示例 画布尺寸比图形小,那么我们看到的画布中的图形就会同比例放大。
圆形
1 | <circle id="_x31_" |
矩形
1 | <rect id="_x31_" |
菱形
1 | <polygon points="0,50 50,0 100,50 50,100" |
文字
1 | <text x="0" y="15" font-size="18" |
不带边框
1 | <text x="0" y="15" font-size="18" |
圆角矩形
1 | <rect x="10" y="10" width="100" height="40" rx="4" |
两侧为圆形的矩形
1 | <rect x="10" y="10" width="100" height="40" rx="20" |
Path
这里是画了个心形
1 | <g style="fill:#d2fae3;stroke:#82eeb5;stroke-width:1" |
组
相同样式的图形或者需要一起添加事件可以用g
来分组
g
不能设置宽高等位置属性,只能设置内部元素的样式及添加响应事件。
内部元素的定位也是相对于svg的。
1 | <g style="fill:#d2fae3;stroke:#82eeb5;stroke-width:1"> |
比如
1 | <g stroke="#82eeb5" fill="#d2fae3" stroke-width="1"> |
transform
1 | <svg xmlns="http://www.w3.org/2000/svg" |
事件
1 |
|