网站地图    收藏   

主页 > 专题教程 > svg >

SVG基础 | SVG switch 元素

来源:自学PHP网    时间:2018-02-07 18:24 作者: 阅读:

[导读] SVG switch元素是用来做什么的呢?switch元素也是用来绘制文字的,那么它和text元素有何不同呢?switch在很多编程语言中都有这个关键字,它是分支的意思,在SVG中,可以使用switch元素来匹...

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

<switch>典型的用法是用于显示不同的文字,但是你不可以用它来显示不同的图形。看下面的简单例子:

<svg xmlns="http://www.w3.org/2000/svg">
  <switch>
      <g systemLanguage="en-UK">
          <text x="10" y="20">UK English</text>
      </g>
      <g systemLanguage="en">
          <text x="10" y="20">English</text>
      </g>
      <g systemLanguage="es">
          <text x="10" y="20">Spanish</text>
      </g>
      <g systemLanguage="zh">
          <text x="10" y="20">中文</text>
      </g>
  </switch> 
</svg>

如果你的浏览器是中文环境的,那么上面的代码会显示“中文”两个字,如果是英文环境的,就会看到“English”。看看下面的返回结果,你看到了什么:

UK EnglishEnglishSpanish中文

这个属性的浏览器兼容性如下:

  • 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 不支持

返回SVG教程目录


    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论