脚本与样式-script元素与style元素
实际上，基本上所有的属性(对于所有元素，不仅是文本)都可以用CSS与一个元素关联，并且所有CSS属性都在SVG图像中可用。可以直接用样式属性设计元素的样式，或者引用样式表设计元素的样式。对XML文件来说不应该解析样式表(因为它们偶尔包含会引起问题的字符)，因此需要将它们置于XMLCDATA节。脚本也是同样的道理，需要放到XMLCDATA节中。看下面的CSS例子：
<svgwidth=”400″height=”200″xmlns=”http://www.w3.org/2000/svg”>
<desc>Text</desc><defs>
<styletype=”text/css”>
<![CDATA[
.abbreviation{text-decoration:underline;}
]]>
</style>
</defs>
<g>
<textx=”20″y=”50″font-size=”30″>Colorscanbespecified</text>
<textx=”20″y=”100″font-size=”30″>bytheir
<tspanfill=”rgb(255,0,0)”class=”abbreviation”>R</tspan>
<tspanfill=”rgb(0,255,0)”class=”abbreviation”>G</tspan>
<tspanfill=”rgb(0,0,255)”class=”abbreviation”>B</tspan>values</text>
<textx=”20″y=”150″font-size=”30″>orbykeywordssuchas</text>
<textx=”20″y=”200″>
<tspanstyle=”fill:lightsteelblue;font-size:30″>lightsteelblue</tspan>,
</text>
</g>
</svg>
再看脚本的例子：
<svgwidth=”500″height=”300″xmlns=”http://www.w3.org/2000/svg”>
<desc>Scriptingtheonclickevent</desc>
<defs>
<scripttype=”text/ecmascript”>
<![CDATA[
functionhideReveal(evt){
varimageTarget=evt.target;
vartheFill=imageTarget.getAttribute(“fill”);
if(theFill==’white’)
imageTarget.setAttribute(“fill”,”url(#notes)”);
else
imageTarget.setAttribute(“fill”,”white”);
}
]]>
</script>
<patternid=”notes”x=”0″y=”0″width=”50″height=”75″
patternTransform=”rotate(15)”
patternUnits=”userSpaceOnUse”>
<ellipsecx=”10″cy=”30″rx=”10″ry=”5″/>
<linex1=”20″y1=”30″x2=”20″y2=”0″
stroke-width=”3″stroke=”black”/>
<linex1=”20″y1=”0″x2=”30″y2=”5″
stroke-width=”3″stroke=”black”/>
</pattern>
</defs>
