SVG 入门笔记

一.SVG 简介

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

二.SVG应用

• 图表视图(echart)、地图视图(WEB-GIS)
• 形象(AI)的全网应用
• UI 产品的设计
• SVG 动画

三.创建 SVG 图像

• SVG 文档基本结构

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'>
  <title>Cattitle>
  <desc>Stick Figure of Catdesc>
  
svg>

•  基本形状和属性

　　基本图形：、、、、、 

　　基本属性：fill、stroke、stroke-width、transform

1.基本形状-圆形

点(0,0) 为图像左上角。水平向右移动时 x 坐标增大，垂直向下移动时 y 坐标增大。 

• • cx属性定义的圆心的x坐标
  • cy属性定义的圆心的y坐标
  • r属性定义的圆半径

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
  <title>...title>
  <desc>...desc>
  
  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'>circle>
svg>      

2.基本形状-椭圆

• • cx属性定义的椭圆中心的x坐标
  • cy属性定义的椭圆中心的y坐标
  • rx属性定义的水平半径
  • ry属性定义的垂直半径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
svg

3.基本形状-直线

• • x1 属性在 x 轴定义线条的开始
  • y1 属性在 y 轴定义线条的开始
  • x2 属性在 x 轴定义线条的结束
  • y2 属性在 y 轴定义线条的结束

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
svg>

4.基本形状-矩形

• • x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
  • y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
  • width定义矩形宽
  • height定义矩形高
  • rx定义x方向的圆角半径
  • ry定义y方向的圆角半径
  • CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
  • CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9"/>
svg>

5.基本形状-多边形

• • points 属性定义多边形每个角的 x 和 y 坐标

<svg  height="210" width="500">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
svg>

6.基本形状-多段线

• • points 属性定义多段线每个角的 x 和 y 坐标

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
svg>

7.其他基本图形-路径

所有的基本形状都是通用的  元素的快捷写法。

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

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 100 L50 250 L250 250 Z" />
svg>

定义了一条路径，它开始于位置150 100，到达位置50 250，然后从那里开始到250 250，最后在150 0关闭路径。

 四.其他SVG标签

1. 文本  

2.路径上的文字 

　　详情：https://www.runoob.com/svg/svg-text.html

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVGtextPath>
  text>
svg>

3.分组

• 元素会将所有子元素作为一个组合，通常还有一个唯一的id作为名称;
• 每个组合还可以拥有自己的