svg入门

<svg>标签

width：指定了svg图像在HTML元素中所占据的宽度
height ：知道了svg图像在HTML元素中所占据的高度
viewBox ： 展示svg图像的一部分，该属性有四个值，分别代表左上角的横坐标和纵坐标、视口的宽度和高度。如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。

<svg width="100" height="120" xmlns="http://www.w3.org/200/svg" version="1.1" viewBox="50,50,50,50">
    <circle cx="50" cy="50" r="50" fill="rgba(234,45,2,0.8)" ></circle>
</svg>

效果：

---

圆形：<circle>标签

• cx ： 横坐标
• cy ： 纵坐标
• r ： 半径

<svg width="100" height="120" xmlns="http://www.w3.org/200/svg" version="1.1" >
    <circle cx="50" cy="50" r="50" fill="rgba(234,3,23,0.8)" ></circle>
</svg>

效果：

---

直线：<line>标签

• x1, y1：表示线段起点的横坐标和纵坐标
• x2, y2：表示线段终点的横坐标和纵坐标

<svg width="130" height="100" xmlns="http://www.w3.org/200/svg" version="1.1" >
  <line x1="0" y1="23" x2="124" y2="60" stroke="#000" stroke-width="3"></line>
</svg>

效果：

---

折线：<polyline>标签

points：指定每个端点的坐标，横坐标和纵坐标之间用逗号分隔开来，点与点之间用空格分隔开来

<svg width="100" height="100" xmlns="http://www.w3.org/200/svg" version="1.1" >
     <polyline points="3,2 78,24 23,45 24,6" fill="none" stroke="#345"></polyline>
</svg>

效果：

---

矩形：<rect>标签

• x：矩形左上角端点的横坐标
• y：矩形左上角端点的纵坐标
• width：矩形宽度
• height：矩形高度

<svg width="100" height="120" xmlns="http://www.w3.org/200/svg" version="1.1" >
    <rect x="23" y="14" width="98" height="74" fill="#983212" stroke="#355"></rect>
</svg>

效果：

---

椭圆：<ellipse>标签

• cx：椭圆中心横坐标
• cy ：椭圆中心纵坐标
• rx ：椭圆横向轴的半径
• ry：椭圆纵向轴的半径

<svg width="180" height="100" xmlns="http://www.w3.org/200/svg" version="1.1" >
    <ellipse cx="80" cy="50" rx="80" ry="40" fill="#4ff563"></ellipse>
</svg>

效果：

---

多边形：<polygon>标签

points：指定每个端点的坐标，横坐标和纵坐标之间用逗号分隔开来，点与点之间用空格分隔开来

<svg width="120" height="120" xmlns="http://www.w3.org/200/svg" version="1.1" >
	    <polygon points="0,0 50,30 45,96 98,12" fill="#45557f"></polygon>
</svg>

效果：

---

路径：<path>标签

d：绘制顺序，它的值是一个字符串，每个字母表示一个绘制动作，后面跟着坐标

命令	意义
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 width="100" height="100" xmlns="http://www.w3.org/200/svg" version="1.1" >
   <path d="M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z"></path>
</svg>

效果：

---

文本：<text>标签

x,y：表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。

<svg width="300" height="160" xmlns="http://www.w3.org/200/svg" version="1.1" >
   <text x="34" y="90">Hello World</text>
</svg>

效果：

---

复制一个形状： <use>标签

href：指定所要复制的节点

• x,y：左上角的坐标
• width
• height

<svg width="300" height="160" xmlns="http://www.w3.org/200/svg" version="1.1" >
  <circle id="myCircle" cx="80" cy="80" r="40" ></circle>
  <use href="#myCircle" x="100" y="0" width="40" height="40" fill="#3e2999"></use>
</svg>

效果：

---

将多个形状组成一个组：<g>标签

<svg width="300" height="160" xmlns="http://www.w3.org/200/svg" version="1.1" >
  <g id="myCircle1">
    <text x="18" y="18">圆形</text>
    <circle cx="40" cy="40" r="20" ></circle>
  </g>
		
  <use href="#myCircle1" x="60" y="0" width="40" height="40" fill="#999"></use>
</svg>

效果：

---

自定义图形：<defs>标签

它内部的代码不会显示，仅供引用。

<svg width="300" height="100">
  <defs>
    <g id="myCircle2">
      <text x="25" y="20">圆形</text>
      <circle cx="50" cy="50" r="20"/>
    </g>
  </defs>
    
  <use href="#myCircle2" x="0" y="0" />
  <use href="#myCircle2" x="100" y="0" fill="blue" />
</svg>

效果：

---

自定义图形：<pattern>标签

<svg width="500" height="500">
  <defs>
    <pattern id="dots"  x="0"  y="0"  width="100"  height="100" patternUnits="userSpaceOnUse">
      <circle fill="#bee9e8" cx="50" cy="50" r="35" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>

---

<image>标签

xlink:href：表示图像来源

<svg viewBox="0 0 100 100" width="100" height="100">
  <image xlink:href="https://www.wangbase.com/blogimg/asset/201808/bg2018080601.jpg"
	    width="50%" height="50%"/>
	</svg>

效果：

---

动画：<animate>标签

• attributeName：发生动画效果的属性名。
• from：单次动画的初始值。
• to：单次动画的结束值。
• dur：单次动画的持续时间。
• repeatCount：动画的循环模式。

<svg width="500px" height="500px">
  <circle cx="20" cy="20" r="10" fill="#feac5e">
    <animate attributeName="cx" from="0" to="500" dur="2s" repeatCount="indefinite" />
    <animate attributeName="cy" from="0" to="500" dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

---

变形：<animateTransform>标签

<animate>标签对 CSS 的transform属性不起作用，如果需要变形，就要使用 <animateTransform>标签。

<svg width="500px" height="500px">
  <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
  </rect>
</svg>