svg

1. svg 概述

SVG 是对图像的描述、体积小、放大不失真

SVG 文件可以用 JavaScript 和 CSS 进行操作。

2. svg 使用

2.1 直接插入网页，成为 DOM 的一部分

<!DOCTYPE html>
<html>
<head></head>
<body>
<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
<svg>
</body>
</html>

View Code

2.2 写在一个独立文件中，然后用<img>、<object>、<embed>、<iframe>等标签插入网页

<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>

View Code

2.3 CSS bg

.logo {
  background: url(icon.svg);
}

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="256px" height="256px" viewBox="0 0 128 128" xml:space="preserve"><script type="text/ecmascript" xlink:href="//preloaders.net/jscripts/smil.user.js"/><g><path fill="#199348" fill-opacity="1" d="M116.7 66.28a52.86 52.86 0 0 1-1 8.18l9.8 7.57-1.78 4.67-1.77 4.67-12.36-.82a52.87 52.87 0 0 1-4.7 6.7L110 108.5l-3.75 3.3-3.75 3.32L92 108.67a52.6 52.6 0 0 1-7.45 3.9l-.66 12.3-4.87 1.2-4.86 1.2-6.38-10.66q-1.9.2-3.88.2-2.15 0-4.25-.14l-6.3 10.64-4.84-1.2-4.85-1.2-.7-12.43a52.6 52.6 0 0 1-6.7-3.5l-10.6 6.64-3.75-3.3-3.76-3.3 5.05-11.4a52.88 52.88 0 0 1-4.73-6.73l-12.34.9-1.8-4.66-1.8-4.67 9.7-7.67a52.8 52.8 0 0 1-1-8.05l-11.4-5 .56-4.95.54-4.97 12.26-2.3a52.37 52.37 0 0 1 2.94-7.83L8.4 32l2.8-4.14 2.8-4.14 12 3.68a53.06 53.06 0 0 1 6-5.33L29.57 9.8l4.4-2.37 4.43-2.35 8.95 8.86a52.4 52.4 0 0 1 8-1.98L59 0h10l3.66 11.96a52.4 52.4 0 0 1 7.8 1.9L89.26 5l4.42 2.3 4.43 2.34-2.3 12.27a52.98 52.98 0 0 1 6.2 5.5l11.9-3.7 2.9 4.1 2.84 4.1-7.8 9.8a52.34 52.34 0 0 1 2.86 7.5l12.3 2.17.6 4.96.57 4.95zM41 64a23 23 0 1 0 23-23 23 23 0 0 0-23 23z"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="27.69 64 64" dur="900ms" repeatCount="indefinite"></animateTransform></g></svg>

View Code



2.4 转为 BASE64 编码，然后作为 Data URI 写入网页
<img src="data:image/svg+xml;base64,[data]">

3. svg 基础

3.1 基本使用

<svg width="100%" height="100%">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

3.2 使用描述图像的一部分指定viewBox属性

<viewBox>属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度（视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍）

3.3 常用标签

3.3.1 圆 <circle>

<svg width="300" height="180">
  <circle cx="30"  cy="50" r="25" />
  <circle cx="90"  cy="50" r="25" class="red" />
  <circle cx="150" cy="50" r="25" class="fancy" />
</svg>

<circle>标签的cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。
坐标都是相对于<svg>画布的左上角原点。

3.3.2 直线 <line>

3.3.3 折线 <polyline>

<svg width="300" height="180">
  <polyline points="3,3 30,28 3,53" fill="none" stroke="black" />
</svg>

 <polyline>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

3.3.4 <rect> 矩形

3.3.5 <ellipse> 椭圆

<ellipse>的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）
；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。

3.3.6 <polygon> 多边形

<polygon>的points属性指定了每个端点的坐标，
横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

3.3.7 <path> 路径

<path>的d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。
M：移动到（moveto）
L：画直线到（lineto）
Z：闭合路径

3.3.8 <text> 文本

3.3.9 <use> 复制一个形状

<use>的href属性指定所要复制的节点，x属性和y属性是<use>左上角的坐标。
另外，还可以指定width和height坐标

3.3.10 <g> 将多个形状组成一个组（group），方便复用。

3.3.11 <defs>标签用于自定义形状，它内部的代码不会显示，仅供引用

3.3.12 <pattern>标签用于自定义一个形状，该形状可以被引用来平铺一个区域

上面代码中，<pattern>标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示<pattern>的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。

3.3.13 <image>标签用于插入图片文件

3.3.14 <animate>标签用于产生动画效果。

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

可以在多个属性上面定义动画。

3.3.15 变形 <animateTransform>

<animateTransform>的效果为旋转（rotate），
这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。
from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；
to="360 400 400"表示结束时，角度为360，围绕(400, 400)旋转。

4. js 操作

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    circle {
      stroke-width: 5;
      stroke: #f00;
      fill: #ff0;
    }

    circle:hover {
      stroke: #090;
      fill: #fff;
    }
    svg{
      border:1px solid red;
    }
  </style>
</head>

<body>

  <svg id="mysvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet">
    <circle id="mycircle" cx="100" cy="100" r="50" />
  </svg>

  <script>
    var mycircle = document.getElementById('mycircle');

    mycircle.addEventListener('click', function (e) {
      console.log(this,e);
      var r=this.getAttribute('r')=='60'?'50':'60';
      mycircle.setAttribute('r', r);
    }, false);
  </script>

</body>

</html>

View Code

4.1 路径文本

  <svg width="800" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path id="p1" d="M100,200 Q200 100 300 200 T 500 200" stroke="green" fill="none" />
    <text style="font-size:20px;">
      <textPath xlink:href="#p1">落红不是无情物，一枝红杏出墙来，恰似一江清水向东流。</textPath>
    </text>
  </svg>

View Code

5.参考网址

SVG 图像入门教程

6.好玩的应用

https://www.svgbackgrounds.com/

https://editor.method.ac/#cut

超级强大的SVG SMIL animation动画详解

SVG+JS path等值变化实现CSS3兴叹的图形动画