首页 前端知识 【CSS】SVG实战入门,svg画曲线,svg简单动画上手入门

【CSS】SVG实战入门,svg画曲线,svg简单动画上手入门

2024-01-26 00:01:06 前端知识 前端哥 671 290 我要收藏

之前我写过一篇【canvas绘画折线段】,其实实际使用中,svg绘画简单的曲线是最方便的。
比如大屏中使用,或者其他小特效使用

点赞 + 关注 + 收藏 = 学会了

一、什么是svg?

在学习 SVG 之前,首先要了解 位图矢量图 的区别。
简单来说:

  • 位图:放大会失真图像边缘有锯齿;是由像素点组成;前端的 Canvas 就是位图效果,png、jpg等图片也是位图。
  • 矢量图:放大不会失真;使用 XML 描述图形。

svg

那么 SVG 是什么呢?SVG 意为可缩放矢量图形(Scalable Vector Graphics)。它是矢量图的其中一种格式。它是用 XML 来描述图形的。

对于初学 SVG 的前端来说,可以简单的理解为 “SVG 是一套新标签”。

所以可以使用 CSS 来设置样式,也可以使用 JSSVG 进行操作。

二、SVG标签基本结构

如下所示,是一个 SVG 文档结构:

<svg version="1.1" xmlns='http://wwww.w3.org/2000/svg' width='300' height='200' >
  <title>测试</title>
  <desc>这是一个描述</desc>
  <!-- 在这里绘制图像 -->
  <rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="115" font-size="16" text-anchor="middle" fill="white">svg测试文本</text>
</svg>
  • <svg> 根元素以像素为单位定义了整个图像的 width 和 height,还通过 xmlns 属性定义了 SVG 的命名空间,
  • version 属性可定义所使用的 SVG 版本,
  • <title> 元素的内容可以被阅读器显示在标题栏上或者是作为鼠标指针指向图像时的提示,
  • <desc> 元素允许咱们为图像定义完整的描述信息,
  • <rect>标签 用来创建一个矩形,通过 fill 属性 把背景颜色设为黄色。
  • <circle>标签 用来创建一个圆。cxcy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性,那么圆点会被设置为 (0, 0),r 属性定义圆的半径。 一个半径 80px 的绿色圆圈 <circle> 绘制在红色矩形的正中央 (向右偏移 150px,向下偏移115px)。
  • strokestroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 4px 宽,红色边框。
  • fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

注意:所有的开启标签必须有关闭标签!

运行效果:
在这里插入图片描述

三、svg坐标系

SVG 网格坐标系统的特点如下所示:

  • 以左上角为坐标系的原点,即 (0,0)。
  • (向右)横向延伸为 X 轴正方向, x 坐标逐渐增大。
  • (向下)纵向为 Y 轴正方向,y 坐标逐渐增大。
  • 坐标以像素 px 为单位。

svg坐标系

四、常见标签使用

1. 矩形 rect

<rect>标签可用来创建矩形,以及矩形的变种:

矩形:

<svg>
  <rect 
  	width="300" height="100"
  	stroke="red" stroke-width="4" 
  	fill="yellow" />
</svg>

圆角矩形:

<svg>
  <rect 
	x="50" y="20" 
	rx="20" ry="20" 
	width="150" height="150" 
	style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

2. 圆形 circle

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

3. 椭圆形 ellipse

<svg>
  <ellipse 
  	cx="300" cy="80" 
  	rx="100" ry="50"
  	style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

4. 直线 line

<svg>
  <line 
  	x1="0" y1="0"
  	x2="200" y2="200"
  	style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

5. 多边形 polygon

<polygon> 标签用来创建含有不少于三个边的图形。

多边形是由直线组成,其形状是"封闭"的(所有的线条 连接起来)。

polygon来自希腊。 “Poly” 意味 “many” , “gon” 意味 “angle”.

如下代码可以生成一个三角形:

<svg  height="400" width="400">
  <polygon 
  	points="0,0 200,200 0,400"
  	style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

6. 折线 polyline

注意需把fill设成none

<svg>
  <polyline 
  	points="20,20 40,25 60,40 80,120 120,140 200,180"
  	style="fill:none;stroke:black;stroke-width:3" />
</svg>

7. 路径 path

<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 关闭路径

注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

如下例子定义了一条路径,它开始于位置150 0,到达位置75 200,然后从那里开始到225 200,最后在150 0关闭路径。(黑色三角形)

<svg>
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>

8. 文本 text

<svg>
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>

9. Stroke 属性

所有stroke属性,可应用于任何种类的线条

  • stroke 定义文本或元素轮廓颜色
  • stroke-width 定义文本或元素轮廓厚度
  • stroke-linecap 定义不同类型的开放路径的终结(线段终点的样式)
  • stroke-dasharray 用于创建虚线

四、实践入门

弧线运动

如下代码定义了一个弧线运动:点击后触发小方块沿着曲线无限循环运动

<svg width="800" height="800">
   <path d="M0 0 c0 300 300 300 300 0" stroke="red" stroke-width="2" fill="none"></path>
    <rect x="0" y="0" width="40" height="40" fill="lightgreen">
       <animateMotion 
         path="M0 0 c0 300 300 300 300 0" 
         dur="3" 
         begin="click" 
         retate="auto" 
         dur="3" 
         repeatCount="indefinite" 
         restart="auto">
       <animateMotion/>
    </rect>
</svg>

效果如下
在这里插入图片描述

未完待续…下次研究详细的动画,这次稍微入个门

https://www.jc2182.com/svg/svg-examples.html
https://blog.csdn.net/sunxiaobai1/article/details/122862625

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/392.html
标签
svg
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!