SVG | 小书童

SVG 简介

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 使用 XML 格式定义图形
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

HTML 页面中的 SVG

SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>

standalone该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用
standalone="no" 意味着 SVG 文档会引用一个外部文件
xmlns 属性可定义 SVG 命名空间

SVG 形状

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

图形属性-rect矩形

x 属性定义左侧位置
y 属性定义左侧位置
width 和 height 属性高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
rx 和 ry 属性可使矩形产生圆角

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

图形属性-circle圆形

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
r 属性定义圆的半径

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

图形属性-ellipse椭圆

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:yellow" />

  <ellipse cx="220" cy="100" rx="190" ry="20" style="fill:white" />
</svg>

图形属性-line线条

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

图形属性-polygon三个边的图形（多边形）

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <polygon
    points="220,100 300,210 170,250 123,234"
    style="fill:#cccccc;
	stroke:#000000;stroke-width:1"
  />
</svg>

图形属性-polyline折线

points 属性定义每个点的 x 和 y 坐标

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <polyline
    points="0,0 0,20 20,20 20,40 40,40 40,60"
    style="fill:white;stroke:red;stroke-width:2"
  />
</svg>

图形属性-path路径

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M250 150 L150 350 L350 350 Z" />
</svg>

SVG 滤镜

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

SVG 高斯模糊（必须在 <defs>-definitions 标签中定义 SVG 滤镜）

<filter> 标签用来定义 SVG 滤镜
<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜
<filter> 标签必须嵌套在 <defs> 标签内
stdDeviation 属性可定义模糊的程度
in="SourceGraphic" 这个部分定义了由整个图像创建效果

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="Gaussian_Blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
    </filter>
  </defs>

  <ellipse
    cx="200"
    cy="150"
    rx="70"
    ry="40"
    style="fill:#ff0000;stroke:#000000;
	stroke-width:2;filter:url(#Gaussian_Blur)"
  />
</svg>

SVG 线性渐变

<linearGradient> 可用来定义 SVG 的线性渐变
<linearGradient> 标签必须嵌套在 <defs> 标签内
每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop
        offset="0%"
        style="stop-color:rgb(255,255,0);
		stop-opacity:1"
      />
      <stop
        offset="100%"
        style="stop-color:rgb(255,0,0);
		stop-opacity:1"
      />
    </linearGradient>
  </defs>

  <ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)" />
</svg>

SVG 放射性渐变

<radialGradient> 可用来定义 SVG 的线性渐变
<radialGradient> 标签必须嵌套在 <defs> 标签内
每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop
        offset="0%"
        style="stop-color:rgb(200,200,200);
			stop-opacity:0"
      />
      <stop
        offset="100%"
        style="stop-color:rgb(0,0,255);
			stop-opacity:1"
      />
    </radialGradient>
  </defs>

  <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)" />
</svg>

SVG 元素

元素	描述
a	定义超链接
altGlyph	允许对象性文字进行控制，来呈现特殊的字符数据（例如，音乐符号或亚洲的文字）
altGlyphDef	定义一系列象性符号的替换（例如，音乐符号或者亚洲文字）
altGlyphItem	定义一系列候选的象性符号的替换
animate	随时间动态改变属性
animateColor	规定随时间进行的颜色转换
animateMotion	使元素沿着动作路径移动
animateTransform	对元素进行动态的属性转换
circle	定义圆
clipPath
color-profile	规定颜色配置描述
cursor	定义独立于平台的光标
definition-src	定义单独的字体定义源
defs	被引用元素的容器
desc	对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。
ellipse	定义椭圆
feBlend	SVG 滤镜。使用不同的混合模式把两个对象合成在一起。
feColorMatrix	SVG 滤镜。应用matrix转换。
feComponentTransfer	SVG 滤镜。执行数据的 component-wise 重映射。
feComposite	SVG 滤镜。
feConvolveMatrix	SVG 滤镜。
feDiffuseLighting	SVG 滤镜。
feDisplacementMap	SVG 滤镜。
feDistantLight	SVG 滤镜。 Defines a light source
feFlood	SVG 滤镜。
feFuncA	SVG 滤镜。feComponentTransfer 的子元素。
feFuncB	SVG 滤镜。feComponentTransfer 的子元素。
feFuncG	SVG 滤镜。feComponentTransfer 的子元素。
feFuncR	SVG 滤镜。feComponentTransfer 的子元素。
feGaussianBlur	SVG 滤镜。对图像执行高斯模糊。
feImage	SVG 滤镜。
feMerge	SVG 滤镜。创建累积而上的图像。
feMergeNode	SVG 滤镜。feMerge的子元素。
feMorphology	SVG 滤镜。对源图形执行"fattening" 或者 "thinning"。
feOffset	SVG 滤镜。相对与图形的当前位置来移动图像。
fePointLight	SVG 滤镜。
feSpecularLighting	SVG 滤镜。
feSpotLight	SVG 滤镜。
feTile	SVG 滤镜。
feTurbulence	SVG 滤镜。
filter	滤镜效果的容器。
font	定义字体。
font-face	描述某字体的特点。
font-face-format
font-face-name
font-face-src
font-face-uri
foreignObject
g	用于把相关元素进行组合的容器元素。
glyph	为给定的象形符号定义图形。
glyphRef	定义要使用的可能的象形符号。
hkern
image
line	定义线条。
linearGradient	定义线性渐变。
marker
mask
metadata	规定元数据。
missing-glyph
mpath
path	定义路径。
pattern
polygon	定义由一系列连接的直线组成的封闭形状。
polyline	定义一系列连接的直线。
radialGradient	定义放射形的渐变。
rect	定义矩形。
script	脚本容器。（例如ECMAScript）
set	为指定持续时间的属性设置值
stop
style	可使样式表直接嵌入SVG内容内部。
svg	定义SVG文档片断。
switch
symbol
text
textPath
title	对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。
tref
tspan
use
view
vkern

demo

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">
    <animate
      attributeName="x"
      attributeType="XML"
      begin="0s"
      dur="6s"
      fill="freeze"
      from="300"
      to="0"
    />
    <animate
      attributeName="y"
      attributeType="XML"
      begin="0s"
      dur="6s"
      fill="freeze"
      from="100"
      to="0"
    />
    <animate
      attributeName="width"
      attributeType="XML"
      begin="0s"
      dur="6s"
      fill="freeze"
      from="300"
      to="800"
    />
    <animate
      attributeName="height"
      attributeType="XML"
      begin="0s"
      dur="6s"
      fill="freeze"
      from="100"
      to="300"
    />
    <animateColor
      attributeName="fill"
      attributeType="CSS"
      from="lime"
      to="red"
      begin="2s"
      dur="4s"
      fill="freeze"
    />
  </rect>

  <g transform="translate(100,100)">
    <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden">
      It's SVG!
      <set
        attributeName="visibility"
        attributeType="CSS"
        to="visible"
        begin="1s"
        dur="5s"
        fill="freeze"
      />
      <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" />
      <animateColor
        attributeName="fill"
        attributeType="CSS"
        from="red"
        to="blue"
        begin="1s"
        dur="5s"
        fill="freeze"
      />
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="rotate"
        from="-30"
        to="0"
        begin="1s"
        dur="5s"
        fill="freeze"
      />
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="scale"
        from="1"
        to="3"
        additive="sum"
        begin="1s"
        dur="5s"
        fill="freeze"
      />
    </text>
  </g>
</svg>

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <script>
    function create_a(evt) {
      var SVGDoc = evt.getTarget().getOwnerDocument()
      var txt = SVGDoc.getElementById('txt')
      var link = SVGDoc.createElement('a')
      var text_node = SVGDoc.createTextNode('LINK')

      link.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://www.w3schools.com')

      link.appendChild(text_node)
      txt.appendChild(link)
    }
  </script>

  <text id="txt" x="10" y="10">Click on the circle to create a ....</text>
  <circle cx="20" cy="40" r="1.5em" style="fill:blue" onclick="create_a(evt)" />
</svg>