|
<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>
<ellipseonclick="hideReveal(evt)"cx="175"cy="100"rx="125"ry="60"
fill="url(#notes)"stroke="black"stroke-width="5"/>
</svg>
条件处理-switch元素
条件处理属性是能控制所在元素渲染与否的属性。基本上大多数的元素(特别是图形元素)都可以指定条件处理属性。条件处理属性有3个：requiredFeatures,requiredExtensions和systemLanguage。这些属性就是一组测试，都允许指定一个值列表(前面两个属性是空格隔开的，语言这个属性是使用逗号隔开的)，默认值都为true。
SVG的switch元素提供了按指定条件渲染的能力。switch元素是一个容器元素，可以包含图形元素，解释性元素，动画元素，a,foreignObject,g,image,svg,switch,text,use等元素。switch元素会按顺序检查直接子元素的条件处理属性，然后渲染满足自身条件的的第一个子元素，其他的子元素都会被忽略。这些属性与display属性一样，只会影响直接使用这些属性的元素的渲染，不会影响引用的元素(比如use引用的元素)。简单的说，这3个属性会影响a,altGlyph,foreignObject,textPath,tref,tspan,animate,animateColor,animateMotion,animateTransform,set等元素，不会影响defs,cursor,mask,clipPath,pattern等元素(这些元素那么不是可渲染的，要么就是引用别的元素)。
注意：子元素的display和visibility属性值并不影响switch元素条件判断的结果。
条件处理属性的取值列表参看官方文档，这里就看一个小例子：
复制代码 代码如下:
<switch>
<rectrequiredFeatures="http://www.w3.org/TR/SVG11/feature#Filter"
x="10"y="10"width="322"height="502"opacity="0.6"
fill="black"stroke="none"filter="url(#gblurshadow)"/>
<rectx="10"y="10"width="322"height="502"opacity="0.6"
fill="black"stroke="none"/>
</switch>
这个例子的意思简单的说就是：使用的浏览器支持filter特性，那么就绘制上面的矩形(带filter属性)，如果不支持filter特性，就绘制下面的矩形。
其实更多的时候，用的比较多的属性是systemLanguage，就是文本的多语言处理能力。例如：
复制代码 代码如下:
<svgxmlns="http://www.w3.org/2000/svg" version="1.1"width="5cm"height="5cm">
<switch>
<textx='10'y='20'systemLanguage="de">de-HAHA</text>
<textx='10'y='20'systemLanguage="en">en-haha</text>
</switch>
</svg>
实用参考：
脚本索引：(v=vs.85).aspx
开发中心：https://developer.mozilla.org/en/SVG
热门参考：
官方文档：
（编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
