7.SVG svg元素

• SVG元素视频

• 嵌套SVG元素

所有SVG图片的根元素都是<svg>，就像下面这样：

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

记住两个命名空间的声明，否则Firefox将不会以图片的形式渲染SVG文件,而是将其当做XML文件。

SVG元素视频

下面是SVG元素教程的视频版：

嵌套SVG元素

SVG元素可以相互嵌套，就像下面这样：

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <svg >
    </svg >
</svg>

嵌套SVG元素可用于将SVG图形分组在一起，并将它们作为集合进行定位。嵌套在svg元素内的所有形状的(x,y)坐标将相对于其外层svg元素的(x,y)坐标进行定位。通过移动外层的svg元素，你也可以移动所有嵌套的形状。

下面是一个将两个矩形嵌套在两个svg元素的例子。两个矩形除了颜色不同之外，x,y坐标、高度和宽度都一样。外层的svg元素有不同的x值。由于矩形的x位置相对于其外层的svg元素的x位置，所以两个矩形在不同的x坐标。

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <svg x="10">
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#ff0000; fill: #0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#009900; fill: #00cc00"/>
  </svg>

</svg>

可以发现，命名空间属性只需要在根svg元素声明。如果嵌套的元素没有设置命名空间，将假定它们都在默认的命名空间（根svg元素命名空间）中。

上面代码的结果如下：

</svg>