A-Zero

# 常用

在线编辑器 (opens new window)
在线调试 (opens new window)

外部调用时需要添加

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

使用 < embed > 标签

<embed src="circle1.svg" type="image/svg+xml" />

使用 < object > 标签

<object data="circle1.svg" type="image/svg+xml"></object>

使用 < iframe > 标签

<iframe src="circle1.svg"></iframe>

在HTML嵌入SVG代码

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

链接到 SVG 文件

<a href="circle1.svg">查看 SVG 文件</a>

# 矩形

创建一个圆角矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  fill="red" stroke="black" stroke-width="5" opacity="0.5"/>
</svg>

# 圆形

创建一个圆

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

# 椭圆

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

# 直线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  stroke="purple" stroke-width="2" />
</svg>

# 多段线

<svg height="210" width="500">
  <polyline points="100,10 40,198 190,78 10,78 160,198"
  stroke="purple" stroke-width="5" fill="rgba(2,44,83,0.8)"/>
</svg>

# 多边形

fill-rule：图形填充规则（nonzero|evenodd）。

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  fill="lime" stroke="purple" stroke-width="5" fill-rule="nonzero" />
</svg>

# 路径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" fill="yellow" 
  stroke="purple" stroke-width="2" />
</svg>

M表示“Move to”(移动到)命令，A表示“Arc”(弧形)命令，L表示“Line”(直线)命令，Z表示闭合路径。

注意

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

# 文本

旋转的文字

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>

路径上的文字

<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" fill="red">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

作为链接文本

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="http://www.w3schools.com/svg/" target="_blank">
    <text x="0" y="15" fill="red">I love SVG</text>
  </a>
</svg>

# 滤镜

SVG滤镜定义在< defs >元素中。
< filter >标签用来定义SVG滤镜。< filter >标签使用必需的id属性来定义向图形应用哪个滤镜。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
	  //创建模糊滤镜
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

# 阴影

一个黑色的阴影

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

# 渐变

线性渐变

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="rgb(255,255,0)" stop-opacity="1" />
      <stop offset="100%" stop-color="rgb(255,255,0)" stop-opacity="1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

放射性渐变

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="rgb(255,255,0)" stop-opacity="0" />
      <stop offset="100%" stop-color="rgb(255,255,0)" stop-opacity="1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

# 动画

# set

在经过特定时间后，将属性设置为特定值。因此，不会连续进行动画处理，而只是更改属性值一次。

attributeType：XML表示SVG元素的属性。CSS表示设置形状的CSS属性的动画。
如果不提供attributeType属性，则浏览器将尝试猜测要制作动画的属性是XML属性还是CSS属性。

<svg width="500"  height="100">
	<circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
	    <set attributeName="r" attributeType="XML" to="100" begin="0s"  />
	</circle>
</svg>

# animate

用于为SVG形状的属性设置动画。您可以将animate元素嵌套在要应用的形状内。

fill：remove 动画完成后，动画属性将设置回其原始值。freeze 动画完成后，动画属性保持当前值。
repeatCount：表示动画执行次数，可以是合法数值或者“indefinite”（无限循环）。
repeatDur：定义重复动画的总时间。可以是普通时间值或者“indefinite”（无限循环）。

<svg width="500"  height="100">
	<circle cx="55" cy="15" r="5" fill="#07faf6" class="logo-svg-circle">
	   <animate attributeName="fill" begin="0.2s" dur="1.2s" 
				repeatCount="indefinite" keyTimes="0;0.5;1" 
				values="rgba(7,250,246,1);rgba(7,250,246,0);rgba(7,250,246,1)" 
				fill="freeze"></animate>
	   <animate attributeName="r" begin="0.2s" dur="1.2s" 
				repeatCount="indefinite" keyTimes="0;0.5;1" 
				values="5;2;5" fill="freeze"></animate>
	</circle>
</svg>

# animateTransform

为形状的Transform属性设置动画。

type属性设置为rotate（旋转变换功能），表示动画变换将是旋转。
在from和to属性设定的参数进行动画，并传递给rotate函数。

//绕点100,100从0度旋转到360度
<svg width="500"  height="100">
  <rect x="20" y="20" width="100" height="40" stroke="#ff00ff" fill="none" >
    <animateTransform attributeName="transform"
                    type="rotate"
                    from="0 100 100" to="360 100 100"
                    begin="0s" dur="10s"
                    repeatCount="indefinite"/>
  </rect>
</svg>

//使正方形的比例动画化的示例
<svg width="500" height="200">
    <rect x="20" y="20" width="40" height="40" stroke="#ff00ff" fill="none" >
        <animateTransform attributeName="transform"
                          type="scale"
                          from="1 1" to="2 3"
                          begin="0s" dur="10s"
                          repeatCount="indefinite"/>
    </rect>
</svg>

# animateMotion

可以沿路径动画的形状的运动。

为了旋转正方形以使其与路径的斜率对齐，请将 animateMotion 元素的 rotate属性设置为auto。

<svg width="500" height="150">
    <path d="M10,50 q60,50 100,0 q60,-50 100,0" stroke="#000000" fill="none"></path>
    <rect x="0" y="0" width="30" height="15" stroke="#ff0000" fill="none">
        <animateMotion
                path="M10,50 q60,50 100,0 q60,-50 100,0"
                begin="0s" dur="10s" repeatCount="indefinite" rotate="auto"
                ></animateMotion>
    </rect>
</svg>

# 蒙版

<svg width="500" height="120">
<defs>
  <mask id="mask1" x="0" y="0" width="100" height="100" >
    <rect x="0" y="0" width="100" height="50"
        stroke="none" fill="#ffffff"/>
  </mask>
</defs>


<rect x="1" y="1" width="100" height="100"
    stroke="none" fill="#0000ff" mask="url(#mask1)"/>
</svg>

# 标记

<svg width="500" height="100">
    <defs>
        <marker id="markerCircle" markerwidth="8" markerheight="8" refx="5" refy="5">
            <circle cx="5" cy="5" r="3" stroke="none" fill="#000000"></circle>
        </marker>
        <marker id="markerArrow" markerwidth="13" markerheight="13" refx="2" refy="6" orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" fill="#000000"></path>
        </marker>
    </defs>
    <path d="M100,10 L150,10 L150,60" style="stroke: #6666ff; stroke-width: 1px; fill: none;
                       marker-start: url(#markerCircle);
                       marker-end: url(#markerArrow);
                     "></path>
</svg>

# 图像

用于将位图图像嵌入SVG图像内。

<svg width="500" height="160"  xmlns:xlink="http://www.w3.org/1999/xlink">
	<rect x="10" y="10" height="130" width="500" fill="#000000"></rect>
	<image x="20" y="20" width="300" height="80" xlink:href="/static/images/logo.png"></image>
</svg>
<svg>
	<image x="20" y="20" xlink:href="/static/images/logo.png"></image>
	<line x1="25" y1="80" x2="350" y2="80"></line>
</svg>

# 填充图案

<svg width="500" height="150">
    <defs>
        <pattern id="pattern1" x="10" y="10" width="20" height="20" patternunits="userSpaceOnUse">
            <circle cx="10" cy="10" r="10" stroke="none" fill="#0000ff"></circle>
        </pattern>
    </defs>
    <rect x="10" y="10" width="100" height="100" stroke="#000000"  fill="url(#pattern1)"></rect>
</svg>

# 其他属性

strokedasharray：属性用于创建虚线。值是一组数组，没数量上限，每个数字交替表示划线与间隔的宽度。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

stroke-dashoffset：则是划线与间隔的偏移量。
stroke-opacity：用于定义SVG形状轮廓的不透明度。

# 通过JS创建

//创建SVG
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "800");
svg.setAttribute("height", "500");
svg.addEventListener("load", function() {
    alert("loaded");
});
document.body.appendChild(svg);

//创建形状
var r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
r.setAttribute("fill", "#120045");
r.setAttribute("x", "1");
r.setAttribute("y", "1");
r.setAttribute("width", "50%");
r.setAttribute("height", "50%");
r.addEventListener("click", function() {
    alert("clicked");
});
svg.appendChild(r);

//更改SVG矩形的尺寸
document.getElementById("rect1").setAttribute("width", "100");

# 水平翻转/垂直翻转/事件穿透

可以通过调整CSS样式的方式。

transform: rotateY(180deg);//水平镜像翻转。
transform: rotateX(180deg);//垂直镜像翻转。
pointer-events: none;//事件穿透

← Fabric →