矩形
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
- CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
- CSS 的 stroke-width 属性定义矩形边框的宽度
- CSS 的 stroke 属性定义矩形边框的颜色
- rx 和 ry 属性可使矩形产生圆角
- opacity定义整个元素的透明度
* 矩形*
复制代码
1
2
3
<svg>
<rect width="150px" height="100px" x="10" y="10" rx="10px" ry="10px" style="fill:red;stroke-width:2; stroke:gray;opacity:0.5;"/>
</svg>
圆形
circle 标签可用来创建一个圆
- cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
- r属性定义圆的半径
复制代码
1
2
3
<svg>
<circle r="50px" cx="90" cy="60" style="fill:red;stroke:gray;stroke-width:3"/>
</svg> 
椭圆
ellipse元素是用来创建一个椭圆
- CX属性定义的椭圆中心的x坐标
- CY属性定义的椭圆中心的y坐标
- RX属性定义的水平半径
- RY属性定义的垂直半径
复制代码
1
2
3
<svg>
<ellipse CX="80px" CY="50px" RX="70" RY="30" style="fill:red;stroke:gray;stroke-width:2;"/>
</svg>
直线
line元素是用来创建一个直线
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
复制代码
1
2
3
<svg>
<line x1="0" y1="0" x2="100" y2="100" style="stroke:red;stroke-width:2;"/>
</svg>
多边形
polygon 标签用来创建含有不少于三个边的图形
- points 属性定义多边形每个角的 x 和 y 坐标
三角形
复制代码
1
2
3
<svg>
<polygon points="10,10 130,10 10,130" CX="200" CY="300" style="fill:red;stroke:gray;stroke-width:2"/>
</svg>
星形
复制代码
1
2
3
<svg>
<polygon points="100,10 40,180 190,60 10,60 160,180" CX="500" CY="350" style="fill:red;stroke:gray;stroke-width:2"/>
</svg>
空心星形
复制代码
1
2
3
<svg>
<polygon points="100,10 40,180 190,60 10,60 160,180" CX="500" CY="350" style="fill-rule:evenoddfill:red;stroke:gray;stroke-width:2"/>
</svg>
填充规则通过fill-rule属性来指定
fill-rule属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形”内部” （内部区域将被填充）
- nonzero:字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。
- evenodd:字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。
曲线
- polyline元素是用于创建任何只有直线的形状
复制代码
1
2
3
<svg>
<polyline points="0,50 50,50 50,100 100,100 100,150 150,150 150,200" CX="300" style="fill:none;stroke:red;stroke-width:4; "/>
</svg>
路径
- path元素用于定义一个路径
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
注：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
复制代码
1
2
3
<svg>
<polyline points="0,50 50,50 50,100 100,100 100,150 150,150 150,200" CX="300" style="fill:none;stroke:red;stroke-width:4; "/>
</svg>
最后
以上就是多情牛排最近收集整理的关于SVG 基本图形的全部内容，更多相关SVG内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复