SVG的几个标签元素

 

defs

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

　　用法：

　　　　类别： 容器元素，结构元素　　　　

　　　　允许的内容物： 任意数量、任意排序的下列元素：动画元素、描述性元素、形状元素、结构化元素、渐变元素、　　　　　　             <a>, <altGlyphDef>, <clipPath>, <colorprofile>, <cursor>, <filter>, <font>, <fontface>, <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>

 

pattern

　　使用预定义的图形对一个对象进行填充或描边，就要用到pattern元素。pattern元素让预定义图形能够以固定间隔在x轴和y轴上重复(或平铺)从而覆盖要涂色的区域。先使用pattern元素定义图案，然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。

　　用法：

　　　　类别： 容器元素　

　　　　允许的内容物： 任意数量、任意排序的下列元素：动画元素、描述性元素、形状元素、结构化元素、渐变元素、<a>, <altGlyphDef>, <clipPath>, <colorprofile>, <cursor>, <filter>, <font>,  <fontface>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

marker

　　marker元素定义了在特定的<path>元素、<line>元素、<polyline>元素或者<polygon>元素上绘制的箭头或者多边标记图形。

　　用法：

　　　　类别： 容器元素

　　　　允许的内容物：任意数量、任意排序的下列元素：动画元素、描述性元素、形状元素、结构化元素、渐变元素、　<a>, <altGlyphDef>, <clipPath>, <colorprofile>, <cursor>, <filter>, <font>, <fontface>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

filter

　  属性filter定义了由<filter>元素定义滤镜效果，该滤镜效果将应用到该元素上。

　　作为一个外观属性，它可以直接用作CSS样式表内部的属性。请阅读css filter以了解更多信息。

　　用法： 

　　　　类别： 外观属性

　　　　值： <funciri> | none | inherit

　　　　可变性： YES

　　　　规范文档： SVG 1.1 (2nd Edition)

　　　　<funciri>元素的引用，它定义了将要应用到该元素的滤镜效果。none不对该元素应用任何滤镜效果。

　　　　下列元素可以使用filter属性：图形元素 »、<a>、<defs>、<glyph>、<g>、<marker>、<missing-glyph>、<pattern>、<svg>、<switch>、<symbol>

feColorMatrix

　　　该滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值(一个表示为[红,绿,蓝,透明度] 的矢量) 都经过矩阵乘法 (matrix multiplated) 计算出的新颜色。

　　　用法：

　　　　类别： 滤镜元素

　　　　允许的内容物： 任意数量、任意排序的下列元素：<animate>, <set>　

 

<svg width="100%" height="100%" viewBox="0 0 150 360"
 preserveAspectRatio="xMidYMid meet"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <text x="70" y="50">Reference</text>
  <g>
    <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
    <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
  </g>


  <text x="70" y="120">matrix</text>

  <filter id="colorMeMatrix">
    <feColorMatrix in="SourceGraphic"
      type="matrix"
      values="0 0 0 0 0
              1 1 1 1 0
              0 0 0 0 0
              0 0 0 1 0" />
  </filter>

  <g filter="url(#colorMeMatrix)">
    <circle cx="30" cy="100" r="20" fill="blue"  fill-opacity="0.5" />
    <circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="120" r="20" fill="red"   fill-opacity="0.5" />
  </g>


  <text x="70" y="190">saturate</text>

  <filter id="colorMeSaturate">
    <feColorMatrix in="SourceGraphic"
      type="saturate"
      values="0.2" />
  </filter>

  <g filter="url(#colorMeSaturate)">
    <circle cx="30" cy="170" r="20" fill="blue" fill-opacity="0.5" />
    <circle cx="20" cy="190" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" />
  </g>


  <text x="70" y="260">hueRotate</text>

  <filter id="colorMeHueRotate">
    <feColorMatrix in="SourceGraphic"
      type="hueRotate"
      values="180" />
  </filter>

  <g filter="url(#colorMeHueRotate)">
    <circle cx="30" cy="240" r="20" fill="blue"  fill-opacity="0.5" />
    <circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="260" r="20" fill="red"   fill-opacity="0.5" />
  </g>


  <text x="70" y="320">luminanceToAlpha</text>

  <filter id="colorMeLTA">
    <feColorMatrix in="SourceGraphic"
      type="luminanceToAlpha" />
  </filter>

  <g filter="url(#colorMeLTA)">
    <circle cx="30" cy="310" r="20" fill="blue"  fill-opacity="0.5" />
    <circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="330" r="20" fill="red"   fill-opacity="0.5" />
  </g>
</svg>

 

foOffset

　　该输入图像作为一个整体，在属性dx和属性dy的值指定了它的偏移量。

　　 用法：

　　　　类别： 滤镜元素

　　　　允许的内容物： 任意数量、任意排序的下列元素：<animate>, <set>

feMerge

　　feMerge滤镜允许同时应用滤镜效果而不是按顺序应用滤镜效果。利用result存储别的滤镜的输出可以实现这一点，然后在一个 <feMergeNode>子元素中访问它。

　　 用法：

　　　　类别： 滤镜元素

　　　　允许的内容物： 任意数量、任意排序的下列元素：<feMergeNode>

feMergeNode

　　feMergeNode元素拿另一个滤镜的结果，让它的父<feMerge>元素处理。

　　 用法： 

　　　　类别： 无

　　　　允许的内容物： 任意数量、任意排序的下列元素：<animate>, <set>

 

SVG相关资料网站：https://developer.mozilla.org/en-US/docs/Web/SVG