从零开始的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

这个版本：

https://www.w3.org/TR/2018/CR-SVG2-20181004/

最新版本：

https://www.w3.org/TR/SVG2/

先前版本：

https://www.w3.org/TR/2018/CR-SVG2-20180807/

编辑稿：

https://svgwg.org/svg2-draft/

单页版：

https://svgwg.org/svg2-draft/single-page.html

GitHub：

https://github.com/w3c/svgwg/

摘要：

  这个规范定义了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-width: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-width:2;stroke:purple;" ></polygon>
</svg>

fill-rule属性

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

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

用法
值 描述
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-width: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-width: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属性
值 描述
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-width: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-width: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-width: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-width:3" />
<path d="M200 200 L300 300 L350 400 Z" style="stroke-width: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-width: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




posted @ 2020-03-19 21:00  枕风  阅读(381)  评论(0)  编辑  收藏  举报