如何SVG基础入门

wsl394049743

于 2024-04-12 12:00:00 发布

阅读量662

点赞数 16

文章标签：前端

本文链接：https://blog.csdn.net/wsl3465205046/article/details/137647141

版权

1. SVG基础知识点

SVG是什么？
- SVG（可缩放矢量图形）是一种用于描述二维图形的XML语言。
- 它可以用于创建图像、图表、动画等，而且可以在不失真的情况下进行放大缩小。
SVG基本语法
- SVG图形由<svg>元素开始和结束。
- 可以使用形状元素（如<rect>、<circle>、<ellipse>、<line>等）来创建各种形状。
- 也可以使用路径元素（如<path>）来创建复杂的形状。
SVG属性
- 常用的属性包括width、height、fill、stroke等，分别用于设置宽度、高度、填充颜色和边框颜色。

2. 相关知识点的说明及代码示例

a. 创建一个简单的SVG图形

<svg width="100" height="100">
  <rect width="100" height="100" fill="blue" />
</svg>

这段代码创建了一个宽高为100px的蓝色正方形。

b. 使用路径元素创建复杂形状

<svg width="200" height="200">
  <path d="M50 50 L150 50 L100 150 Z" fill="red" />
</svg>

这段代码创建了一个红色的三角形。

3. 相关学习路径

掌握SVG基础语法和常用形状的绘制方法
学习如何使用<rect>、<circle>、<ellipse>等元素创建基本形状。
熟悉SVG的基本属性如width、height、fill等的使用方法。
- 创建矩形（）
  矩形可以使用 <rect>元素来创建，你可以指定矩形的位置、大小、填充颜色等属性。
```
<svg width="200" height="150">
  <rect x="50" y="20" width="100" height="80" fill="blue" />
</svg>
```
  解释：
  - x="50"和y="20"指定了矩形左上角的位置坐标。
  - width="100"和height="80"指定了矩形的宽度和高度。
  - fill="blue"设置了矩形的填充颜色为蓝色。
- 创建圆形（）
  
  圆形可以使用<circle>元素来创建，你需要指定圆心的位置和半径。
```
<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>
```
  解释：
  - cx="100"和cy="100"指定了圆心的位置坐标。
  - r="50"指定了圆的半径。
  - fill="red"设置了圆的填充颜色为红色。
- 创建椭圆（）
  
  椭圆可以使用<ellipse>元素来创建，你需要指定椭圆的中心位置、水平半径和垂直半径。
```
<svg width="200" height="150">
  <ellipse cx="100" cy="75" rx="80" ry="50" fill="green" />
</svg>
```
  解释：
  - cx="100"和cy="75"指定了椭圆的中心位置坐标。
  - rx="80"和ry="50"分别指定了椭圆的水平半径和垂直半径。
  - fill="green"设置了椭圆的填充颜色为绿色。
  以上是创建矩形、圆形和椭圆的基本示例，你可以根据需要调整坐标、大小和颜色等属性来实现不同的效果。

学习路径元素<path>的使用

掌握路径命令（M、L、Z等）的含义和用法。
学习如何使用路径命令创建复杂的图形。
使用路径命令（如M、L、Z等）可以创建复杂的图形，下面是具体的使用方式进行示例说明：
- 移动到（M）
  
  路径命令M用于移动到指定的坐标点，它不画线，只是移动到目标位置。
```
<svg width="200" height="200">
  <path d="M50 50 L100 50 L100 100 Z" fill="yellow" />
</svg>
```
  解释：
  - M50 50指定了起始点的坐标。
  - L100 50和L100 100指定了从起始点到第一个和第二个终点的直线路径。
  - Z表示闭合路径，连接最后一个点和起始点，形成闭合的图形。
  - fill="yellow"设置了路径的填充颜色为黄色。
- 画线（L）
  
  路径命令L用于从当前点画一条直线到指定的坐标点。
```
<svg width="200" height="200">
  <path d="M50 50 L100 50 L100 100 L50 100 Z" fill="purple" />
</svg>
```
  解释：
  - M50 50指定了起始点的坐标。
  - L100 50、L100 100、L50 100分别指定了从起始点到各个终点的直线路径。
  - Z表示闭合路径，连接最后一个点和起始点，形成闭合的图形。
  - fill="purple"设置了路径的填充颜色为紫色。
- 闭合路径（Z）
  
  路径命令Z用于闭合路径，将当前点与起始点连接起来，形成封闭的图形。
```
<svg width="200" height="200">
  <path d="M50 50 L100 50 L100 100 Z" fill="orange" />
</svg>
```
  解释：
  - M50 50指定了起始点的坐标。
  - L100 50和L100 100指定了从起始点到各个终点的直线路径。
  - Z表示闭合路径，连接最后一个点和起始点，形成闭合的图形。
  - fill="orange"设置了路径的填充颜色为橙色。
  通过组合使用M、L和Z等路径命令，你可以创建各种复杂的图形，如多边形、曲线等。在实践中，可以通过调整坐标和路径命令的顺序来实现不同的效果。

了解SVG动画

学习如何使用SVG和CSS/JavaScript创建动画效果。
探索SVG动画的各种可能性，如路径动画、缩放动画等。
要使用SVG和CSS/JavaScript创建动画效果，可以探索多种可能性，包括路径动画、缩放动画等。下面是具体的示例说明：

路径动画

使用CSS动画

<svg width="200" height="200">
  <path id="myPath" d="M50 50 L100 50 L100 100 Z" fill="none" stroke="blue" />
  <circle cx="50" cy="50" r="5" fill="red">
    <animateMotion dur="3s" repeatCount="indefinite">
      <mpath href="#myPath" />
    </animateMotion>
  </circle>
</svg>

解释：

<path>定义了一个路径，用于演示动画效果。
<circle>表示一个圆形，其中包含<animateMotion>元素，用于对圆形进行路径动画。
dur="3s"指定了动画持续时间为3秒。
repeatCount="indefinite"表示动画无限循环。

使用JavaScript控制动画

<svg width="200" height="200">
  <path id="myPath" d="M50 50 L100 50 L100 100 Z" fill="none" stroke="blue" />
  <circle id="myCircle" cx="50" cy="50" r="5" fill="red" />
</svg>

<script>
  const circle = document.getElementById('myCircle');
  const path = document.getElementById('myPath');
  
  const length = path.getTotalLength();
  circle.style.transition = 'none';
  path.style.strokeDasharray = length;
  path.style.strokeDashoffset = length;
  
  function startAnimation() {
    path.style.transition = 'stroke-dashoffset 3s ease-in-out';
    path.style.strokeDashoffset = '0';
  }
  
  startAnimation();
</script>

解释：

通过JavaScript获取路径的总长度，并设置路径动画的起始状态。
使用CSS过渡效果实现路径动画的播放效果。

缩放动画

使用CSS动画
```
<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue">
    <animate attributeName="r" dur="2s" values="50; 100; 50" repeatCount="indefinite" />
  </circle>
</svg>
```
解释：
- <circle>表示一个圆形，其中包含<animate>元素，用于对圆形进行缩放动画。
- attributeName="r"指定了动画作用于半径属性。
- dur="2s"指定了动画持续时间为2秒。
- values="50; 100; 50"表示动画从50到100再到50的缩放效果。
- repeatCount="indefinite"表示动画无限循环。

使用JavaScript控制动画

<svg width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" fill="blue" />
</svg>

<script>
  const circle = document.getElementById('myCircle');
  let scale = 1;
  let direction = 1;
  
  function scaleAnimation() {
    scale += 0.1 * direction;
    circle.setAttribute('r', 50 * scale);
    if (scale >= 1.5 || scale <= 0.5) {
      direction *= -1;
    }
    requestAnimationFrame(scaleAnimation);
  }
  
  scaleAnimation();
</script>

解释：

使用JavaScript控制圆形的半径属性，实现缩放动画效果。
requestAnimationFrame方法用于控制动画的流畅性和性能。

以上是使用SVG和CSS/JavaScript创建路径动画和缩放动画的示例，你可以根据需要调整动画的参数和效果来实现更多的动画效果。

参考资料和资源
- MDN Web 文档中关于SVG的介绍和教程。
- 在线SVG编辑器（如https://editor.method.ac/）进行实践和尝试。
- 参考SVG相关的书籍和教程，如《SVG精髓》等。

通过以上学习路径，你可以逐步掌握SVG的基础知识和技能，并且可以通过实践和项目应用来加深理解和提升能力。祝你学习顺利！

wsl394049743

关注

16
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
如何SVG基础入门

以上是使用SVG和CSS/JavaScript创建路径动画和缩放动画的示例，你可以根据需要调整动画的参数和效果来实现更多的动画效果。要使用SVG和CSS/JavaScript创建动画效果，可以探索多种可能性，包括路径动画、缩放动画等。通过以上学习路径，你可以逐步掌握SVG的基础知识和技能，并且可以通过实践和项目应用来加深理解和提升能力。等路径命令，你可以创建各种复杂的图形，如多边形、曲线等。以上是创建矩形、圆形和椭圆的基本示例，你可以根据需要调整坐标、大小和颜色等属性来实现不同的效果。
复制链接

扫一扫