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>

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章