SVG元素和代码解释
SVG中图形元素(graphics element)是可以用来在目标画布上画出图形的元素，包括定义的标准形状，特别是矩形、圆形、椭圆形、直线、折线和多边形等。文章介绍了SVG元素的代码及其含意。SVG元素分为图形元素、容器元素、图形引用元素、文本、SVG文档片断内容。
来源：SVG中国(ChinaSVG.COM)
1 图形元素
  SVG中图形元素(graphics element)是可以用来在目标画布上画出图形的元素，包括定义的标准形状，特别是矩形、圆形、椭圆形、直线、折线和多边形等。
  (1) 矩形
  矩形用元素rect来表达
  代码：<rect width="200" height="100" fill="green"/>
  含意：绘制宽200像素，高100像素，填充为绿的矩形
  (2) 圆形
  圆形用元素circle来表达
  代码：<circler="50" fill="blue"/>
  含意：绘制半径为50像素，填充为蓝的圆形
  (3) 线段
  线段用元素line来表达
  代 码：<line xl="50" yl="50" x2="200" y2="200" stroke="blue" stroke-width="10"/>
  含意：从点(50,50)到点(200,200)绘制一条蓝10像素宽的线段
  (4) 椭圆
  椭圆用元素ellipse来表达
  代码：<ellipse rx="100" ry="50" stroke="green"/>
  含意：绘制x轴半径为100像素，y轴半径为50像素，边线为绿的椭圆
  (5) 折线
  折线用元素polyline来表达
  代码：<polyline points="100,0 93,16 72,26 43,25 13,11 -11,-13 -25,-43 -26,-72 -16,-93 0,-100 16,-93 26,-72 25,-43 11,-13 -13,11 -43,25 -72,26 -93,16 -100,0" stroke="green" stroke-width="1" fill=" none"/>
  含意：从点(100,0)开始，经过点(93,16), (72,26), (43,25), (13,11),(-11,-13),(-16,-93),(0,-100), (16,-93),(26,72),(25,-43),(11,43),(-13,11), (-43,25),( -72,26),( -93,16)，最后到点(-100,0)绘制一条线宽为1像素的绿折线
  (6) 多边形
  多边形用元素polygon来表达
  代码：<polygon points="100,100 150,100 300,200 50,200" fill="blue"/>
  含意：以(100,100) (150,100) (300,200) (50,200)四个点为顶点绘制填充为蓝的多边形，该多边形是一个梯形
  (7) 路径
  路径用元素path来表达
  代码：<path d="m200,200 10,100 l200,0 10,-100 l-200,0" fill="green"/>
  含意：按 动作定义一条填充为绿的路径“移动原点到(200,200)，向Y方向直线运动100，向X方向直线运动200，向Y的反方向直线运动100,向X的反方向直线运动200"，该路径表达了一个矩形
2 容器元素
  容器元素用于将不同的元素组合起来使用。
  <defs>元素作为一个容器元素使用，可以将稍后要使用的元素集合起来。它通常和<use>元素结合使用。
  <g>元素作为一个容器对象使用，将相关的图形对象组合起来。在一个大型或复杂的图形中使用<g>元素非常有用。
3 图形引用元素
  图形引用元素(graphics referencing element)用对不同文档或元素的引用作为其图形内
容的图形元素。
  <image>元素用于将其它图像文件包括在一个已定义的矩形中。
  <use>元素可以与<defs>这样的元素配合使用，来实例化前面定义但还没有表现的图形对象。
4 文本内容
  元素文本内容元素(text content element)是一个可以定义文本串的画在画布上的SVG元素，SVG文本内容元素有：<text>,<tspan>,<tref>,<textPath>和<altGlyph>等。
5 SVG文档片断
  SVG文档片断(SVG document fragment)是以<svg>元素开头的XML文档子树。SVG文档片断可以包含独立的SVG文档，或是另一个SVG文档片断。当一个<svg>元素是另一个<svg>元素的子元素，就会有两个SVG文档片断，每个<svg>元素拥有一个片断。以下用<svg>元素来代表SVG文档片断。
  与<g>元素相比较，<svg>元素有一些特别有用的属性：
  (1) 可以 拥有自己的位置属性
  即x和y属性，所有<svg>元素的子元素的位置完全相对于<svg>元素的位置。这样只要改变<svg>元素的x或y就可以让所有子元素同时发生偏移。
  (2) 可以拥有自己的高宽属性
  即width和height属性，所有超出<svg>元素高宽的子元素是不会显示出来的。这样一些拉幕动画就可以实现了。
  (3) 可以拥有显现属性
  即display属性，修改该属性可以让所有<svg>元素的子元素一起出现或隐藏。这样整体一起的出现和消失就方便很多。
SVG鼠标事件响应的四种写法
SVG有四种常用的鼠标响应的脚本写法(SMIL方式、Attributes方式、JavaScript+SMIL方式、EventListener方式)，根据不同的需要让大家有更多的选择。本文介绍了四种实现SVG
鼠标事件的例子。 来源：SVG中国(ChinaSVG.COM)
  SVG鼠标事件实现方式的例子效果是：单击一个红的矩形后，它的填充颜会变成蓝
1 SMIL方式
  例程1  鼠标事件之SMIL方式
<svg>
<rect x="15" y="15" width="40" height="40" fill="red">
<set attributeName="fill" to="blue" begin="click"/>
</rect>
</svg>
  在前面有关“动画”效果的章节中我们使用过类似的方法，也就是在单击后触发一个动画效果，此例中被改变的是“fill”属性，由红变蓝，中间没有渐变的过程，一次到位。
2 Attributes方式
  例程2  鼠标事件之Attributes方式
<svg xmlns="/2000/svg"
      xmlns:xlink=/1999/xlink
      xmlns:a3="ns.adobe/AdobeSVGViewerExtensions/3.0/"
      a3:scriptImplementation="Adobe">
      <script type="text/ecmascript" a3:scriptImplementation="Adobe">
      <![CDATA[
      function changeColor(evt)
      {svg图形
          var rect = evt.target;
          rect.setAttributeNS(null, "fill", "blue")
      }
      ]]></script>
      <rect x="5" y="5" width="40" height="40"
      fill="red"
      onclick= "changeColor(evt)"/> u
</svg>
  这种事件触发方式想必大家已经很熟悉了，在上一节中，满眼尽是这种事件触发方式，即把事件触发作为元素的属性与其它其他属性写在一起。事件属性在u处，“onclick”事件调用的是“changeColor”函数，参数是“evt”，这样使得函数内部脚本可以从“evt”获得事件相关信息。这种方式比较常用。
3 JavaScript+SMIL方式
  例程3  鼠标事件之JavaScript+SMIL方式
<svg onload="makeShape(evt)">
<script><![CDATA[
var svgns = "/2000/svg";u
function makeShape(evt) {
svgDoc = evt.target.ownerDocument;
var rect = ateElementNS(svgns, "rect");v
rect.setAttributeNS(null, "x", "5");
rect.setAttributeNS(null, "y", "5");
rect.setAttributeNS(null, "width", "40");
rect.setAttributeNS(null, "height", "40");
rect.setAttributeNS(null, "fill", "red");
var set = ateElementNS(svgns, "set");
set.setAttributeNS(null, "attributeName", "fill");
set.setAttributeNS(null, "to", "blue");
set.setAttributeNS(null, "begin", "click");
rect.appendChild(set);
Element.appendChild(rect);
}
]]></script>
</svg>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。