爲方便看,這裏的CSS是內嵌在svg中的。
defs標籤定義了一個元素,只是定義不會被解析顯示。
SVG中的use標籤是用來引用SVG中的可視化元素。
use標籤引用的元素不會繼承<use>元素本身和其父元素的屬性。
這裏就是用use標籤引用defs定義的元素。
use標籤用class屬性引用css的某個樣式。
如果被引用元素已經有class屬性值,它的樣式會保持原樣。
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg a3:scriptImplementation="Adobe" viewBox="0 0 770 495"
width="770" height="495"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/">
<style type="text/css">
<![CDATA[
.t1{
fill: red;
stroke: blue;
stroke-width: 3
}
.t2{
fill: yellow;
stroke: red;
stroke-width: 1
}
.t3{
fill: blue;
stroke: red;
stroke-width: 1
}
.g{
fill: green;
stroke: red;
stroke-width: 1
}
]]>
</style>
<defs>
<g id="a" class="g">
<rect width="60" height="10" />
</g>
<rect id="b" width="60" height="10" />
<rect id="c" width="60" height="10" />
</defs>
<use x="100" y="100" xlink:href="#a" class="tl" />
<use x="100" y="200" xlink:href="#b" class="t2" />
<use x="100" y="300" xlink:href="#c" class="t3" />
</svg>