use 应用css样式(一)

为方便看，这里的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>