svg绘图知多少

前言

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

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

1. SVG

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

2 SVG基本用法

2.1 画一个圆

ini 复制代码

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

2.2 绘制简单基本图形

arduino 复制代码

rect
<rect x="0" y="0" width="10" height="10"></rect>
circle
<circle cx="50" cy="50" r="50"/>
image
<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.......

arduino 复制代码

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

2.4 绘制动画

ini 复制代码

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

3. 鉴于SVG有与web技术对兼容性的优势来实现我们的功能

优势特性：svg可以以html标签一样应用到页面中，通过使用js代码控制图片的动画及交互效果
开发业务功能：在开发快设计时用到，实现户型图的绘制，并且根据前端操作跟让用户可以跟用户进行页面交互
实现效果：
- 例如：以下户型图

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

实现代码：

ini 复制代码

<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：

xml 复制代码

<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

添加动画的行进中的小车

上代码：

xml 复制代码

<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还可以做什么？

举例：

物理中的一些力学小实验【可以使用js来做交互拖拽】

一些有趣的表情包

6. SVG的niubility实现

d3图表库
echarts图表库

7. svg绘制工具

inkscape，我们可以使用这个工具通过拖拽快速的生成想要的svg图片【类似PS工具的使用】

8. 团队介绍

「三翼鸟数字化技术平台-场景设计交互平台」主要负责设计工具的研发，包括营销设计工具、家电VR设计和展示、水电暖通前置设计能力，研发并沉淀素材库，构建家居家装素材库，集成户型库、全品类产品库、设计方案库、生产工艺模型，打造基于户型和风格的AI设计能力，快速生成算量和报价；同时研发了门店设计师中心和项目中心，包括设计师管理能力和项目经理管理能力。实现了场景全生命周期管理，同时为水，空气，厨房等产业提供商机管理工具，从而实现了以场景贯穿的B端C端全流程系统。