渲染顺序

当组合多种不同元素时，正象 SVG 图像一样，重要的是牢记各项在页面上的放置顺序，因为这关系到谁“在上面”出现。在一个 HTML 页面上，使用z-index属性来控制这一分层效果，而对于 SVG 图像，则严格按顺序放置各项。每个后继层放置在那些已放置层的上面。

如果指定一个元素没有填充色（使用fill=”none”"），那么在它下面的各项会显现出来，就象您在这里看到的：

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

<desc>Overlapping shapes</desc>

<g>

<ellipse cx="125" cy="50" rx="50" ry="25"

fill="none" stroke="black" />

<circle cx="125" cy="50" r="25" fill="dodgerblue" />

<circle cx="125" cy="50" r="10" fill="black" />

<ellipse cx="250" cy="50" rx="50" ry="25"

fill="none" stroke="black" />

<circle cx="250" cy="50" r="25" fill="dodgerblue" />

<circle cx="250" cy="50" r="10" fill="black" />

<polygon points="65,50 185,50 185,75, 150,100

100,100 65,75"

fill="none" stroke="purple" stroke-width="4"/>

<polygon points="190,50 310,50 310,75, 275,100

225,100 190,75"

fill="none" stroke="purple" stroke-width="4"/>

<line x1="65" y1="50" x2="310" y2="50"

stroke="plum" stroke-width="2"/>

</g>

</svg>

请注意每个元素会覆盖在它之前出现的元素。