SVG绘图知多少

SVG绘图知多少

引用

CSDN

1.

https://m.blog.csdn.net/weixin_41559503/article/details/145752928

带着几个疑问我们来了解这篇文章：

1. SVG是什么？有什么优点？
2. SVG可以为我们开发提供什么便利？
3. 我们用SVG做了什么？
4. SVG还有哪些厉害的实现？

1. SVG简介

（Scalable Vector Graphics，可伸缩矢量图形）是一种基于XML的矢量图形格式，它使用文本文件定义图形，并且可以被多种程序读取和写入。SVG广泛应用于网页设计、图标、数据可视化、地图制作等领域，它的优势在于可伸缩性、可编辑性和与Web技术的兼容性。

2. SVG基本用法

2.1 画一个圆

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50"/>
</svg>

2.2 绘制简单基本图形

<rect x="0" y="0" width="10" height="10"></rect>
<circle cx="50" cy="50" r="50"/>
<image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" />

2.3 绘制路线：d是path的专有属性：M、L、Z、H、V、m、l、z、h、v.......

<path d="M 100 100 L 300 100 L 200 300 z" fill="orange" stroke="black"
stroke-width="3" />

2.4 绘制动画

<animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" />

3. SVG在Web开发中的应用

优势特性

SVG可以像HTML标签一样应用到页面中，通过使用JavaScript代码控制图片的动画及交互效果。

开发业务功能

在开发快速设计时用到，实现户型图的绘制，并且根据前端操作让用户可以与页面进行交互。

实现效果

例如以下户型图：

• 将图中坐标识别出来生成户型数据
• 使用SVG绘制出以下户型空间
• 点击空间区域，可以实现对空间的名称和面积进行修改

实现代码

<svg
id="svg"
version="1.1"
baseProfile="full"
:viewBox="viewBoxSize"
xmlns="http://www.w3.org/2000/svg">
    <path
      v-for="(item, index) in pathMsg"
      id="MyStyle"
      :key="index"
      :d="item.pathStr"
      flag="true"
      @click="selectedRoom(item, 1)" />
    <text
      v-for="(item, index) in pathMsg"
      :key="index"
      text-anchor="middle"
      fill="black"
      @click="selectedRoom(item, 1)">
      <tspan
        :x="item.centerPos[0]"
        :y="item.centerPos[1]-2"
        class="room"
        font-size="10"
        font-weight="500"
        :fill="#666">{{item.name}}</tspan>
      <tspan
        v-if="item.selected"
        :x="item.centerPos[0]"
        :y="item.centerPos[1]+13"
        class="room-msg"
        font-size="12"
        font-weight="400"
        :fill="#666">{{item.area}}㎡</tspan>
    </text>
</svg>
// 选中空间的时候对数据修改并重新触发svg绘制
selectedRoom(){
    //…… 更新pathMsg数据
}

• path：绘制路径
• text：绘制文本
• tspan：绘制文本下的内容

4. 实现简单有趣的Demo

demo1

代码so easy：

<svg width="1000" height="1000">
    <!-- 下面是个区域的路径 -->
    <!-- [[307.65,249.35],[307.65,317.83],[481.93,317.83],[481.93,249.35],[307.65,249.35]] -->
</svg>

demo2

添加动画的行进中的小车

上代码：

<svg width="200px" height="100px" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 小车车身 -->
  <rect x="10" y="40" width="30" height="20" fill="blue">
    <!-- 动画：沿x轴滑动 -->
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="translate"
      from="0" to="150"
      dur="5s"
      repeatCount="indefinite"
    />
  </rect>
  
  <!-- 小车前轮 -->
  <circle cx="15" cy="60" r="5" fill="black">
     <!-- 动画：沿x轴滑动 -->
     <animateTransform
       attributeName="transform"
       attributeType="XML"
       type="translate"
       from="0" to="150"
       dur="5s"
       repeatCount="indefinite"
     /> 
  </circle>
  <!-- 小车后轮 -->
  <circle cx="35" cy="60" r="5" fill="black">
     <animateTransform
       attributeName="transform"
       attributeType="XML"
       type="translate"
       from="0" to="150"
       dur="5s"
       repeatCount="indefinite"
     />
   </circle>
  <!--地面-->
  <line x1="0" y1="65" x2="210" y2="65" style="stroke:black;stroke-width:2" />
</svg>

5. SVG的更多应用场景

• 物理中的一些力学小实验（可以使用JavaScript来做交互拖拽）
• 一些有趣的表情包

6. SVG的高级应用

• d3图表库
• echarts图表库

7. SVG绘制工具

可以使用Inkscape，这是一个类似Photoshop的工具，可以通过拖拽快速生成想要的SVG图片。