SVG 入门基础（2）形状元素

最新推荐文章于 2024-05-13 09:01:10 发布

coldriversnow

最新推荐文章于 2024-05-13 09:01:10 发布

阅读量381

点赞数

文章标签：计算机视觉人工智能

1. 图形元素
1.1 矩形
矩形使用 < rect > < /rect > 标签来进行绘制。

<svg width="200" height="200">
  <rect x="10" y="10" width="100" height="100" rx="5" ry="5" fill="yellow"></rect>
</svg>

参数说明：
x：左上角x的坐标，距离左边的距离，相当于margin-left；
y：左上角y的坐标，距离顶部的距离，相当于margin-top；
width：矩形的宽度（单位：像素）；
height：矩形的高度（单位：像素）；
rx：圆角矩形，x轴方向的半径；
ry：圆角矩形，y轴方向的半径
fill：填充颜色
效果：

1.2 圆形
圆形使用 < circle > < /circle > 标签来进行绘制。

<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="yellow"></circle>
</svg>

参数说明：
cx：圆形的x坐标；
cy：圆心的y做标；
r：半径
效果：

1.3 椭圆形
椭圆形使用标签 < ellipse > < /ellipse > 标签进行绘制，与圆形的绘制方法类似。

<svg width="200" height="200">
  <ellipse cx="50" cy="50" rx="40" ry="20" fill="yellow"></ellipse>
</svg>

参数说明：
cx：圆心的x坐标；
cy：圆心的y坐标；
rx：水平方向上的半径；
ry：垂直方向上的半径
效果：

1.4 线段
线段使用 < line > < /line > 标签进行绘制。

<svg width="200" height="200">
  <line x1="10" y1="10" x2="90" y2="90" stroke="yellow"></line>
</svg>

参数说明：

x1：起点的 x 坐标；
y1：起点的 y 坐标；
x2：终点的 x 坐标；
y2：终点的 y 坐标;

1.5 折线和多边形
折线和多边形的绘制方法类似，都是用 points 属性设置各个点的坐标。
折线使用标签 < polyline > < /polyline > 进行绘制，而多边形使用标签 < polygon >< /polygon > 进行绘制，且多边形会将起点和终点连接起来，折线不会。

/* 图一 折线，不会将起点与终点连接 */
<svg width="200" height="200">
  <polyline 
  	points="50,10 80,90 10,30 90,30 20,90" 
  	stroke="#fb3" 
  	stroke-width="3" 
  	fill="transparent">
  </polyline>
</svg>
 
/* 图二 多边形，将起点与终点连接 */
<svg width="200" height="200">
  <polygon 
  	points="50,10 80,90 10,30 90,30 20,90" 
  	stroke="#fb3" 
  	stroke-width="3" 
  	fill="transparent">
  </polygon>
</svg>

参数说明：
ponits：设置各个点的坐标，各组坐标之间使用空格分隔，x坐标和y坐标之间使用逗号分开。
效果：

1.6 路径
路径使用标签 < path > < /path > 进行绘制，使用 d 属性控制路径的类型和绘制。
路径的功能最多，前面的所有图形都可以使用路径进行绘制。
d 属性值的书写有两种:使用逗号分隔坐标，如：d=“M10, 10”，也可以使用空格的形式，如：d="M 10 10"
注意: 大写字母：表示坐标系中使用绝对坐标，小写字母：使用相对坐标（相对当前画笔所在的点)；

1.6.1 移动类参数
M：moveto，将画笔移动到指定坐标；
eg：d=“M10,10”，表示将画笔移动到坐标(10,10)的位置。

<svg width="200" height="200">
    <path d="M 10 10 L 180 180" stroke="#fb3" stroke-width="4" fill="transparent"></path>
</svg>

效果：

1.6.2 绘制直线类参数

L：lineto，绘制直线到指定坐标
eg：d=“M 10 10 L 80 80”，表示绘制一条起点坐标为(10,10)，终点坐标为(80,80)的直线。

H：horizontal lineto，绘制水平直线到指定坐标
eg：d=“M 10 10 H 100”，表示是绘制一条起点坐标为(10,10)，终点坐标为(100,10)的直线
注意： H只需要设置一个值，如果设置了多个值，则最后取最后一个值。

V：vertical，绘制垂直直线到指定坐标
eg：d=“M 10 10 V 100”，表示绘制一条起点坐标(10,10)，终点坐标为(10,100)的直线
注意： V只需要设置一个值，如果是多个值，则取最后一个值。

1.6.3 绘制曲线类参数

C：curveto，绘制三次方贝塞尔曲线到终点坐标，中间经过两个控制点控制曲线的弧度，所以需要制定三个坐标来实现绘制曲线；
eg：d=“M10,10 C40,5 40,140 100,100”

S：shorthand/smooth curveto，绘制平滑三次方贝塞尔曲线到终点坐标，与上一条三次方贝塞尔曲线相连，第一个控制点为上一条曲线第二个控制点的对称点，所以还需制定一个控制点坐标和终点坐标。
eg：d=“M10,10 C40,5 40,140 100,100 S140,180 160,160”，如果不与贝塞尔曲线相连，即：d=“M10,10 S140,180 160,160”，则绘制的图线接近于二次贝塞尔曲线。

Q：quadratic Bezier curveto，绘制二次贝塞尔曲线到终点坐标，中间经过一个控制点控制曲线的弧度。
eg：d=“M10,10 Q40,140 100,100”

T：shorthand/smooth quadratic Bezier curveto，绘制平湖二次贝塞尔曲线到终点坐标，与上一条二次贝塞尔曲线相连，控制点为上一条曲线控制点的对称点，所以还需指定一个终点坐标。
eg：d=“M10,10 Q40,140 100,100 T160,160”，如果不与贝塞尔曲线相连，即：d=“M10,10 T160,160”，则绘制的图线是一条直线。

/* 图一 三次方贝塞尔曲线 */
<svg width="200" height="200">
  <path d="M10,10 C40,5 40,140 100,100" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>
 
/* 图二 三次方贝塞尔曲线，与上一条曲线相连 */
<svg width="200" height="200">
  <path d="M10,10 C40,5 40,140 100,100 S140,180 160,160" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>
 
/* 图三 二次贝塞尔曲线 */
<svg width="200" height="200">
  <path d="M10,10 Q40,140 100,100" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>
 
/* 图四 二次方贝塞尔曲线，与上一条曲线相连 */
<svg width="200" height="200">
  <path d="M10,10 Q40,140 100,100 T160,160" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>

效果：

1.6.4 绘制弧线类参数
A：el liptical arc，绘制椭圆曲线到指定坐标，
参数说明：
rx，ry：x轴方向半径，y轴方向半径；
x-axis-rotation：x轴与水平顺时针方向夹角；
large-arc-flag：角度弧线大小(1：大，0：小)；
sweep-flag：绘制方向(1：顺时针，0：逆时针)；
x y：终点坐标；

<svg width="500" height="500">
    <path d="M50,50 A60 30 0 1,0 150,50 Z" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>

分析：起点坐标(50,50)，终点坐标(150,50)，角度为0，角度弧线大小 large-arc-flag 为 1，选择大弧度，根据分析，即选择红色的弧线，又绘制方向 sweep-flag 为 0，为逆时针，即从起点沿着逆时针方向绘制到终点，所以是红色先位于下方。
注意：当 (起点与终点之间的直线距离／2) > (椭圆的水平半径) 时，角度为 0 的情况下，此时椭圆会等比放大，到相等为止。

1.6.5 闭合类参数
Z：closepath，绘制直线将终点与起点连接；

再次提醒：大写字母：表示坐标系中使用绝对坐标，小写字母：使用相对坐标（相对当前画笔所在的点）

2. 文字元素
2.1 基础
在svg中使用 < text >< /text> 标签绘制文字。
参数说明：
x：文字的x坐标；
y：文字的y坐标；
dx：相对于当前位置x方向的距离；
dy：相对于当前位置的y方向的距离；
textLength：文字的显示长度；
rotate：旋转角度，也可以使用transform=“rotate(30)”；

<svg width="200" height="200">
  <text x="10" y="10" dx="10" dy="10" textLength="100" rotate="20">示例文字</text>
</svg>

效果：

2.2 文本路径
如果要实现文字沿着路径进行排列，可使用 < textPath >< /textPath > 标签来实现。需要提前定义好路径 path，并指定 id，textPath 使用 xlink:href 定义文字要匹配的路径。

<svg width="600" height="600">
    <path 
    	id = "textPath1" 
    	d = "M100,100 C140,50 140,240 200,200 S240,280 360,360" 
    	stroke = "#fb3" 
    	stroke-width = "4px" 
    	fill = "transparent">
    </path>
    <text x="10" y="10" dx="-10" dy="-10" rotate="20">
        <textPath xlink:href="#textPath1" textLength="300">
            很扭曲的测试示例文字
        </textPath>
    </text>
</svg>

效果：

3. 特殊元素
3.1 克隆元素 use
use 标签用来克隆其他元素，克隆后的元素不能修改样式

<svg>
  <rect 
  	id="rect1"
    x="10" y="10" width="100" height="100"
    stroke="#5588aa" stroke-width="5"
    fill="transparent"
  ></rect>
  <use x="20" y="20" xlink:href="#rect1"></use>
</svg>

参数说明：
x：相对被克隆元素 x 轴偏移量；
y：相对被克隆元素 y 轴偏移量；
xlink:href：指向被克隆元素的 ID；

效果：

3.2 模板元素

3.2.1 symbol
symbol标签用定义模版，需要结合use标签使用，模版在未被使用之前，不会展示在页面上，模版内部可包含多个元素。

<svg>
  <symbol id="template1">
    <rect 
    	x="10" y="10" width="100" height="100"
        stroke="#5588aa" stroke-width="5"
        fill="transparent"
    ></rect>
    <circle cx="60" cy="60" r="30" stroke="#5588aa" stroke-width="3" fill="transparent"></circle>
  </symbol>
  <use x="20" y="20" xlink:href="#template1"></use>
</svg>

效果：

3.2.2 defs
defs标签用于自定义形状，它内部的代码不会显示，仅供引用。

<svg width="300" height="100">
  <defs>
    <g id="myCircle">
      <text x="25" y="20">圆形</text>
      <circle cx="50" cy="50" r="20"/>
    </g>
  </defs>
  <use href="#myCircle" x="0" y="0" />
  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>

效果：

3.2.3 pattern
pattern标签用于自定义一个形状，该形状可以被引用来平铺一个区域。

<svg width="500" height="500">
  <defs>
    <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <circle fill="#bee9e8" cx="50" cy="50" r="35" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>

上面代码中，< pattern > 标签将一个圆形定义为 dots 模式。patternUnits=“userSpaceOnUse” 表示< pattern > 的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。
效果：

3.3 组元素g
group的简写，用来创建分组，组内所有的元素都会继承 g 的属性，可以嵌套使用，也可以和use标签结合使用。
另外可使用 transform 属性定义控制整个组的位置。

<svg width="500" height="500">
  <g stroke="red" stroke-width="3" fill="transparent">
    <rect x="10" y="10" width="100" height="100"></rect>
    <rect x="120" y="120" width="100" height="100"></rect>
  </g>
</svg>

g标签内部的两个矩形，都会继承g标签的样式。

3.4 clipPath 裁剪元素
lipPath 元素主要用来剪裁元素，clipPath 元素定义范围外的内容将不会被展示。
注意: 写在< clipPath >< /clipPath >标签内部的元素不会被显示，clipPath 标签需要放在 defs 标签内。其他元素在引用clipPath元素时，需要使用 clip-path=“url(#ID)”。

<svg height="200" width="200">
    <defs>
      <clipPath id="clip">
        <rect width="100" height="100"></rect>
      </clipPath>
    </defs>
    <circle cx="90" cy="90" r="90" clip-path="url(#clip)" stroke="none" fill="yellow" />
</svg>

分析图：

效果：

3.5 image 定义图像
< image >标签用于插入图片文件

<svg height="200" width="200">
    <defs>
      <clipPath id="clip">
        <rect width="100" height="100"></rect>
      </clipPath>
    </defs>
    <circle cx="90" cy="90" r="90" clip-path="url(#clip)" stroke="none" fill="yellow" />
</svg>

上面代码中，< image >的 xlink:href 属性表示图像的来源。
3.6 动画

3.6.1 animate
animate 标签用于产生动画效果

<svg width="500px" height="500px">
  <rect x="0" y="0" width="100" height="100" fill="#feac5e">
    <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
    <animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>

上面代码中，矩形会不断移动且宽度不断增加至500，产生动画效果。
参数说明：
attributeName：发生动画效果的属性名。
from：单次动画的初始值。
to：单次动画的结束值。
dur：单次动画的持续时间。
repeatCount：动画的循环模式。

3.6.2 animateTransform
< animate >标签对 CSS 的 transform 属性不起作用，如果需要变形，就要使用 < animateTransform > 标签。

<svg width="500px" height="500px">
  <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
    <animateTransform 
	    attributeName="transform" 
	    type="rotate" begin="0s" dur="10s" 
	    from="0 200 200" to="360 400 400" 
	    repeatCount="indefinite" />
  </rect>
</svg>

上面代码中，< animateTransform > 的效果为旋转（rotate），这时 from 和 to 属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400 400"表示结束时，角度为360，围绕(400, 400)旋转。

原文链接：SVG 入门基础（2）形状元素_51CTO博客_svg 绘制曲线

coldriversnow

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
SVG 入门基础（2）形状元素

分析：起点坐标(50,50)，终点坐标(150,50)，角度为0，角度弧线大小 large-arc-flag 为 1，选择大弧度，根据分析，即选择红色的弧线，又绘制方向 sweep-flag 为 0，为逆时针，即从起点沿着逆时针方向绘制到终点，所以是红色先位于下方。eg：d=“M10,10 C40,5 40,140 100,100 S140,180 160,160”，如果不与贝塞尔曲线相连，即：d=“M10,10 S140,180 160,160”，则绘制的图线接近于二次贝塞尔曲线。
复制链接

扫一扫