SVG基础 | SVG SWITCH 元

时间:2016-03-08
1.jpg

  SVG <switch>元素是用来做什么的呢?<switch>元素也是用来绘制文字的,那么它和<text>元素有何不同呢?switch在很多编程语言中都有这个关键字,它是分支的意思,在SVG中,可以使用<switch>元素来匹配不同的语言,在不同的浏览器语言环境中显示不同的SVG文字。

  <switch>典型的用法是用于显示不同的文字,但是你不可以用它来显示不同的图形。看下面的简单例子:
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <switch>
  3.       <g systemLanguage="en-UK">
  4.           <text x="10" y="20">UK English</text>
  5.       </g>
  6.       <g systemLanguage="en">
  7.           <text x="10" y="20">English</text>
  8.       </g>
  9.       <g systemLanguage="es">
  10.           <text x="10" y="20">Spanish</text>
  11.       </g>
  12.       <g systemLanguage="zh">
  13.           <text x="10" y="20">中文</text>
  14.       </g>
  15.   </switch>
  16. </svg>     
复制代码

  如果你的浏览器是中文环境的,那么上面的代码会显示“中文”两个字,如果是英文环境的,就会看到“English”。看看下面的返回结果,你看到了什么:
2.jpg
  这个属性的浏览器兼容性如下:
  •   Chrome 1.0+
  •   Firefox (Gecko) 1.8+
  •   Internet Explorer 9.0+
  •   Opera 8.0+
  •   Safari 3.0.4+
  •   Android 3.0+
  •   Firefox Mobile (Gecko) 1.8+
  •   Safari Mobile 3.0.4+
  •   IE Mobile 不支持

  本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/ziliaoku/ ... g/201506112011.html

上一篇:SVG基础 | 绘制SVG文字 下一篇:SVG基础 | SVG TEXTPATH 元素

相关文章

最新文章