svg用法

91 阅读1分钟

www.w3schools.com/graphics/sv… www.runoob.com/svg/svg-pat…

1、svg 画一个实心圆

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

其中,cxcy属性指定了圆心的坐标,r属性指定了圆的半径,stroke属性指定了描边的样式和颜色,stroke-width属性指定了描边的宽度,fill属性指定了填充的颜色。

2、椭圆

<ellipse cx="179" cy="179" rx="10" ry="10" class=""></ellipse>

这是一个SVG元素,表示一个椭圆。它的中心坐标是(179, 179),外径是10,内径也是10。类名为"",可能用于设置椭圆的填充颜色和描边颜色。

3、path

<path d=" M155.01854727741454,179 L0 89.50000000000001 A179,179 0 0 1 310.0370945548291,89.50000000000001 z " fill="none" stroke="#000000" stroke-width="3" stroke-linejoin="round" stroke-dasharray="0"></path>

解释

  <path d="M150 0 L75 200 L225 200 Z" style="fill:none;stroke:green;stroke-width:3" />

解释

一条从位置 150,0 开始的路径,一条线到位置 75,200,然后从那里,一条线到 225,200,最后关闭返回到 150,0 的路径

d

M = moveto (move from one point to another point) 
L = lineto (create a line) 
H = horizontal lineto (create a horizontal line) 
V = vertical lineto (create a vertical line) 
C = curveto (create a curve) 
S = smooth curveto (create a smooth curve) 
Q = quadratic Bézier curve (create a quadratic Bézier curve) 
T = smooth quadratic Bézier curveto (create a smooth quadratic Bézier curve) 
A = elliptical Arc (create a elliptical arc) 
Z = closepath (close the path)
M = 移动到 (从一个点移动到另一个点)  
L = 直线连接 (创建一条直线)  
H = 水平直线连接 (创建一条水平线)  
V = 垂直直线连接 (创建一条垂直线)  
C = 曲线连接 (创建一条曲线)  
S = 平滑曲线连接 (创建一条平滑曲线)  
Q = 二次贝塞尔曲线 (创建一条二次贝塞尔曲线)  
T = 平滑二次贝塞尔曲线连接 (创建一条平滑二次贝塞尔曲线)  
A = 椭圆弧 (创建一个椭圆弧)  
Z = 关闭路径 (关闭路径)