zoukankan html css js c++ java

从零开始的HTML5之旅（五）——Re SVG

HTML5 SVG

SVG是什么？

SVG是一种图像文件格式，其英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML，由W3C联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

SVG是一种用XML定义的语言，用来描述二维矢量/栅格图形。SVG提供了3种类型的图形对象：矢量图形、图像、文本。图形对象还可以分组、添加样式、变换、组合等操作。特征集包括嵌套变换、剪切路径、alpha蒙板、滤镜效果、模板对象和其他扩展。

SVG图形可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。

SVG具备PNG和JPEG格式无法具备的优势：可任意放大图片而不会牺牲图像质量；可在SVG图像中保留可编辑和可搜寻的状态；SVG比较小，下载速度快。

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

优势

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 JavaScript 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

浏览器支持

IE9、Firefox、Opera、Chrome、Safari都支持SVG。

可缩放矢量图形（SVG）2

摘要：

这个规范定义了SVG2版的功能和语法，SVG是一种基于XML的语言，用于描述二维矢量/栅格图形。SVG内容是可样式化的，可以缩放到不同的显示分辨率，并且可以独立查看，与HTML内容混合或使用其他XML语言中的XML命名空间嵌入。SVG支持动态更改。脚本可以用于创建交互式文档，并且可以使用声明性动画功能或脚本执行动画。

嵌入HTML文档的方法

有三种标签可以将SVG嵌入到HTML文档中，分别是< embed>标签、< object>标签和< iframe>标签。

< embed>标签

< embed>标签被所有主流的浏览器支持，并允许使用脚本。

<div>
<embed src="https://www.w3school.com.cn/svg/circle1.svg" height="200" width="200"  type="image/svg+xml">
</div>

< object>标签

< object>标签是HTML4的标准标签，被所有较新的浏览器支持。其缺点是不允许使用脚本。

<div>
<object data="https://www.w3school.com.cn/svg/circle1.svg" height="200" width="200" type="image/svg+xml"></object>
</div>

< iframe>标签

< iframe>标签可工作在大部分浏览器中。

<div>
<iframe src="https://www.w3school.com.cn/svg/circle1.svg" height="200" width="200" frameborder="0"></iframe>
</div>

SVG形状

开发者可以使用一些SVG中的预定义的元素。

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

矩形

< rect>标签可用来创建矩形和矩形的变种。

属性

属性	描述
width	矩形的宽度
height	矩形的高度
fill	定义矩形的填充颜色（rgb值、颜色名或十六进制）
stroke-width	矩形边框的宽度
stroke	矩形边框的颜色
x	矩形向右偏移的量
y	矩形向下偏移的量
fill-opacity	定义填充颜色透明度（合法范围0-1）
stroke-opacity	定义笔触颜色的透明度（合法范围0-1）
opacity	定义整个元素的透明值（合法范围0-1）

代码

<?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 rx="10" ry="20" x="20" y="40" fill-opacity="0.3" stroke-opacity="0.6" opacity="0.5" width="300" height="100" style="fill:rgb(0,0,255);stroke-1; stroke:rgb(0,0,0)"/>
</svg>

圆形

< circle>标签可用来创建一个圆。

属性

属性	描述
cx	定义圆点的x坐标
cy	定义圆点的y坐标
r	圆的半径

如果不定义cx与cy，则圆点坐标为(0,0)。

代码

<?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="30" cy="220" r="20" stroke="black" stroke-width="2"  fill="red" ></circle>
</svg>

椭圆

< ellipse>标签可用来创建椭圆。椭圆与圆相似。不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的。

属性

属性	描述
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="50" cy="300" rx="20" ry="40" fill="red" stroke="black" stroke-width="2"></ellipse>
</svg>

直线

< line>标签可以用来创建一条直线。

属性

属性	描述
x1	x1 属性在 x 轴定义线条的开始
y1	y1 属性在 y 轴定义线条的开始
x2	x2 属性在 x 轴定义线条的结束
y2	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="320" x2="100" y2="500" stroke-width="3" stroke="red"></line>
</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="200,410 140,598 290,478 110,478 260,598" style="fill:red;stroke-2;stroke:purple;" ></polygon>
</svg>

fill-rule属性

fill-rule是一个外观属性，它定义了用来确定一个多边形内部区域的算法。

作为一个外观属性，它可以被应用于任何元素，但只会在这八个元素中有效：< altGlyph>、< path>、< polygon>、< polyline>、< text>、< textPath>、< tref>和< tspan>。

用法

值	描述
nonzero	这个值确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。
evenodd	这个值用确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。

值

描述

nonzero

这个值确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。

evenodd

这个值用确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。

<?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 fill-rule="nonzero" stroke="red" points="450,0 421,90 498,35 402,35 479,90"/>
<polygon fill-rule="evenodd" stroke="red" points="550,0 521,90 598,35 502,35 579,90"/> 
</svg>

折线

< polyline>标签是用于创建任何只有直线的形状。

属性

属性	描述
polyline	定义折线每个点的坐标。

<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-3" />
</svg>

路径

< path>标签用于定义一个路径。

命令	命令描述	中文含义
m，M	moveto	将画笔移动到指定的坐标位置
l，L	lineto	画直线到指定的坐标位置
h，H	horizontal lineto	画水平线到指定的X坐标位置
v，V	vertical lineto	画垂直线到指定的Y坐标位置
c，C	curveto	三次贝赛曲线
s，S	smooth curveto	与前一条三次贝塞尔曲线相连
q，Q	quadratic Belzier curve	二次贝赛曲线
t，T	smooth quadratic Belzier curveto	与前一条二次贝塞尔曲线相连
a，A	elliptical Arc	弧线
z，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="M200 200 L300 300 L350 400 Z" style="stroke-2;stroke:red;" ></path>
</svg>

滤镜

SVG滤镜用来向形状和文本添加特殊的效果。

滤镜	描述
feBlend	把两个对象组合在一起，使它们受特定的混合模式控制。
feColorMatrix	基于转换矩阵对颜色进行变换。每一像素的颜色值(一个表示为[红，绿，蓝，透明度] 的矢量) 都经过矩阵乘法计算出的新颜色。
feComponentTransfer	基于对每个像素执行颜色分量的数据重映射。它允许进行像亮度调整，对比度调整，色彩平衡或阈值的操作。计算是使用非预乘色值进行执行的。
feComposite	该滤镜执行两个输入图像的智能像素组合。
feConvolveMatrix	这个元素应用了一个矩阵卷积滤镜效果。一个卷积在输入图像中把像素与邻近像素组合起来制作出结果图像。通过卷积可以实现各种成像操作，包括模糊、边缘检测、锐化、压花和斜角。
feDiffuseLighting	滤镜光照一个图像，使用alpha通道作为隆起映射。结果图像，是一个RGBA不透明图像，取决于光的颜色、光的位置以及输入隆起映射的表面几何形状。
feDisplacementMap	映射置换滤镜，该滤镜用来自图像中从`in2`到空间的像素值置换图像从`in`到空间的像素值。
feFlood	该滤镜用`flood-color`元素定义的颜色和`flood-opacity`元素定义的不透明度填充了滤镜子区域。
feGaussianBlur	该滤镜对输入图像进行高斯模糊，属性`stdDeviation`中指定的数量定义了钟形。
feImage	feImage滤镜从外部来源取得图像数据，并提供像素数据作为输出（意味着如果外部来源是一个SVG图像，这个图像将被栅格化。）
feMerge	`feMerge`滤镜允许同时应用滤镜效果而不是按顺序应用滤镜效果。利用`result`存储别的滤镜的输出可以实现这一点，然后在一个`<feMergeNode>`子元素中访问它。
feMorphology	该滤镜用来侵蚀或扩张输入的图像。它在增肥或瘦身效果方面特别有用。
feOffset	该输入图像作为一个整体，在属性`dx`和属性`dy`的值指定了它的偏移量。
feSpecularLighting	该滤镜照亮一个源图形，使用alpha通道作为隆起映射。该结果图像是一个基于光色的RGBA图象。
feTile	输入图像是平铺的，结果用来填充目标。它的效果近似于一个`<pattern>`图案对象。
feTurbulence	该滤镜利用Perlin噪声函数创建了一个图像。它实现了人造纹理比如说云纹、大理石纹的合成。
feDistantLight	该滤镜定义了一个距离光源，可以用在灯光滤镜`<feDiffuseLighting>`元素或`<feSpecularLighting>`元素的内部。用于照明过滤。
fePointLight	用于照明过滤。
feSpotLight	用于照明过滤。

高斯模糊

所有互联网的SVG滤镜定义在<defs>元素中。

`defs`元素

SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。在defs元素中定义的图形元素不会直接呈现。你可以在你的视口的任意地方利用 use元素呈现这些元素。

用法

defs元素是容器元素、结构元素。

defs元素可以包含的元素有很多，有动画元素、描述性元素、形状元素、结构化元素、渐变元素，也有<a>、<altGlyphDef>、<clipPath>、<color-profile>、<cursor>、<filter>、<font>、<font-fact>、<foreignObject>、<image>、<marker>、<mask>、<pattern>、<script>、<style>、<switch>、<text>、<view>。

示例

<svg width="80px" height="30px" viewBox="0 0 80 30"
     xmlns="http://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="60" height="10" 
        fill="url(#Gradient01)"  />
</svg>

`filter`元素

filter元素作用是作为原子滤镜操作的容器。它不能直接呈现。可以利用目标SVG元素上的filter属性引用一个滤镜。

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

<filter>标签必须嵌套在<defs>标签内。

用法

filter元素可以包含描述性元素、滤镜元素、<animate>、<set>。

<filter>标签的id属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）。url属性用来把元素链接到滤镜。当链接滤镜id时，必须用#字符。

`<feGaussianBlur>`标签

该滤镜对输入图像进行高斯模糊，属性stdDeviation中指定的数量定义了钟形。

属性

属性描述

in 标识输入原语。

stdDeviation stdDeviation 属性定义了模糊操作的标准差。如果列出两个 <number>，第一个数字表示沿着 x 轴的标准差值，第二个值表示沿着 y 轴的标准差值。如果只出现一个数字，那个值就表示在 x 轴和 y 轴上有着相同的标准差。负值是不允许的。设为零即禁用了已有滤镜的原本效果（比如，结果是滤镜输入图像）。如果 stdDeviation 在 x 轴和 y 轴上只有一个为 0，那么模糊效果就只会应用于非 0 的那个方向。如果此属性没被定义，就与标准差值被定义为 0 的效果一样。

属性	描述
in	标识输入原语。
stdDeviation	`stdDeviation` 属性定义了模糊操作的标准差。如果列出两个 `<number>`，第一个数字表示沿着 x 轴的标准差值，第二个值表示沿着 y 轴的标准差值。如果只出现一个数字，那个值就表示在 x 轴和 y 轴上有着相同的标准差。负值是不允许的。设为零即禁用了已有滤镜的原本效果（比如，结果是滤镜输入图像）。如果 `stdDeviation` 在 x 轴和 y 轴上只有一个为 0，那么模糊效果就只会应用于非 0 的那个方向。如果此属性没被定义，就与标准差值被定义为 0 的效果一样。

in属性

值	描述
SourceGraphic	该关键词表示图形元素自身将作为`<filter>`原语的原始输入。
SourceAlpha	该关键词表示图形元素自身将作为`<filter>`原语的原始输入.。SourceAlpha与SourceGraphic具有相同的规则除了SourceAlpha只使用元素的透明度。
BackgroundImage	该关键词表示filter元素当前底下的区域的图形快照将被调用。
BackgroundAlpha	跟BackgroundImage相同除了只使用透明度。
FillPaint	该关键词表示滤镜效果的目标元素上`fill`的属性值。在许多情况下，`FillPaint`都是不透明的，但如果形状是带有渐变或图案的涂料（其本身包含透明或半透明的部分），那么`FillPaint`就是透明的。
StrokePaint	此关键字表示滤镜效果在目标元素上的`stroke`属性值。在许多情况下，`StrokePaint`每个地方都是不透明的，但是如果形状是带有渐变或图案的涂料（其本身包含透明或半透明的部分），那么`StrokePaint`是透明的。

stdDeviation属性

stdDeviation 属性可以定义模糊程度。

案例

<?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">

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-2;filter:url(#Gaussian_Blur)"/>

渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。

在SVG中，渐变类型主要有两种：线性渐变以及放射性渐变。

线性渐变

<linearGradient>可用来定义SVG的线性渐变。

<linearGradient>标签必须嵌套在<defs>标签的内部。

线性渐变可被定义为水平、垂直或角形的渐变：

当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

`<stop>`元素

此元素可以对整个渐变进行分段。

例如我要弄一个从0%开始到60%的颜色渐变。

<stop offset="0%" stop-color="black">
<stop offset="60%" stop-color="red">

代码规定了从0%到60%的颜色渐变，由黑色到红色。

`offset`属性

该属性规定渐变在引用元素渐变区域偏移量。其属性值既可以是百分数也可以是小数。

`stop-color`属性

此属性用于规定渐变的颜色。

`<linearGradient>`元素

`id`属性

这个属性是必须的。

`gradientUnits`属性

此属性有objectBoundingBox和userSpaceOnUse值。objectBoundingBox为默认值。

当属性值为objectBoundingBox时，表示将以应用渐变的元素形成的坐标系统为参考，x1、y1、x2与y2属性值都是0-1之间的数字，当然也可以是百分比数字（0-100%），那么渐变的尺寸是一个相对值，随元素尺寸变化而发生改变。

当属性值为userSpaceOnUse时，以当前用户坐标系统参考，x1、y1、x2、y2都是绝对值。（x1、y1）与（x2、y2）形成两个点，两个点连成一条轴线，这条轴线确定了元素的渐变区域与渐变方向。

代码

<?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">

<defs>
 <linearGradient id="demo_linear1"
 gradientUnits="objectBoundingBox"
 x1="0" y1="0"
 x2="1" y2="1">
 <stop offset="0" stop-color="red" />
 <stop offset="1" stop-color="blue" />
 </linearGradient>
</defs>

<rect x="400" y="200" width="400" height="100" fill="url(#demo_linear1)" />

`spreadMethod`属性

此属性用于规定处理渐变区域之外的区域的方式。这个属性有三个属性值，分别是：pad、relfect、repeat。

pad属性值表示渐变区域之外的区域使用stop-color规定的颜色填充。

reflect属性表示渐变区域之外的区域会进行渐变。渐变的方向是反向的，按照从最后一个颜色到第一个颜色顺序渐变。

repeat属性表示渐变区域之外的区域同样会进行渐变，不过和reflect不同的是没有反序。

`gradientTransform`属性

此属性实现rotate和translate等变换。

代码

<?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">

<defs>
<linearGradient id="demo_linear2"
        x1="0.3" y1="0"
        x2="0.7" y2="0"
        gradientTransform="rotate(90)">
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
      
</defs>

<rect x="400" y="300" width="400" height="100" fill="url(#demo_linear2)" />

效果

放射性渐变

<radialGradient>用来定义放射性渐变。<radialGradient>标签必须嵌套在<defs>标签中。放射性渐变就是指以某一点为圆心，颜色值沿着半径方向渐变。

<radialGradient>标签与<linearGradient>标签的功能原理基本一致。

不同的属性与功能

属性	描述
cx	圆心的横坐标，正值向右偏移。
cy	圆心的纵坐标，正值向下偏移
r	半径
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">
<defs>
<radialGradient id="demo_radial1" gradientUnits="objectBoundingBox" cx="30%" cy="60%" 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>

<rect x="400" y="500" width="400" height="200" fill="url(#demo_radial1)" />
</svg>

效果

由代码和效果对比我们可以看到cx，cy规定了圆点的位置，r规定了圆的半径尺寸，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 rx="10" ry="20" x="20" y="40" fill-opacity="0.3" stroke-opacity="0.6" opacity="0.5" width="300" height="100" style="fill:rgb(0,0,255);stroke-1; stroke:rgb(0,0,0)"/>
<circle cx="30" cy="220" r="20" stroke="black" stroke-width="2"  fill="red" ></circle>
<ellipse cx="50" cy="300" rx="20" ry="40" fill="red" stroke="black" stroke-width="2"></ellipse>
<line x1="0" y1="320" x2="100" y2="500" stroke-width="3" stroke="red"></line>
<polygon points="200,410 140,598 290,478 110,478 260,598" style="fill:red;stroke-2;stroke:purple;" ></polygon>
<polygon fill-rule="nonzero" stroke="red" points="450,0 421,90 498,35 402,35 479,90"/>
<polygon fill-rule="evenodd" stroke="red" points="550,0 521,90 598,35 502,35 579,90"/>
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-3" />
<path d="M200 200 L300 300 L350 400 Z" style="stroke-2;stroke:red;" ></path>

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>

 <linearGradient id="demo_linear1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
 <stop offset="0" stop-color="red" />
 <stop offset="1" stop-color="blue" />
 </linearGradient>

<linearGradient id="demo_linear2" x1="0.3" y1="0" x2="0.7" y2="0" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</linearGradient> 

<radialGradient id="demo_radial1" gradientUnits="objectBoundingBox" cx="30%" cy="60%" 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="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-2;filter:url(#Gaussian_Blur)"/>

<rect x="400" y="200" width="400" height="100" fill="url(#demo_linear1)" />
<rect x="400" y="300" width="400" height="100" fill="url(#demo_linear2)" />
<rect x="400" y="500" width="400" height="200" fill="url(#demo_radial1)" />
</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

查看全文

相关阅读:
hmac模块
 hashlib模块
 内存监控
 在全局对象(不是指针)的构造函数里不要对std集合做太多操作
 Lucene 4.X 倒排索引原理与实现
 Git工作流指南
 Spring cloud 框架 --- Eureka 心得
 分布式的理解
 集群的理解
 Thrift框架-安装

原文地址：https://www.cnblogs.com/ODevil/p/12527136.html

从零开始的HTML5之旅（五）——Re SVG

HTML5 SVG

SVG是什么？

优势

浏览器支持

可缩放矢量图形（SVG）2

这个版本：

最新版本：

先前版本：

编辑稿：

单页版：

GitHub：

摘要：

嵌入HTML文档的方法

< embed>标签

< object>标签

< iframe>标签

SVG形状

矩形

属性

代码

圆形

属性

代码

椭圆

属性

代码

直线

属性

代码

多边形

属性

fill-rule属性

用法

折线

属性

路径

滤镜

高斯模糊

defs元素

用法

示例

filter元素

用法

<feGaussianBlur>标签

属性

in属性

stdDeviation属性

案例

渐变

线性渐变

<stop>元素

offset属性

stop-color属性

<linearGradient>元素

id属性

gradientUnits属性

代码

spreadMethod属性

gradientTransform属性

代码

效果