语言►SVG

SVG中的switch元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/30/SVG%E4%B8%AD%E7%9A%84switch%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

  1. 作用

正文

作用

按顺序匹配子元素的systemLanguage特性，渲染匹配成功的第一个子元素。

示例：以中文浏览器打开

输入：

1
2
3
4
5
6
7
8
9
10
11
12
13
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <switch>
        <text systemLanguage="zh-CN" x="100" y="50">
            测试
        </text>
        <text systemLanguage="zh-TW" x="100" y="50">
            測試
        </text>
        <text systemLanguage="en-US" x="100" y="50">
            test
        </text>
    </switch>
</svg>

输出：

1
2
3
4
5
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <text x="100" y="50">
        测试
    </text>
</svg>

若子元素没有systemLanguage特性，视作匹配成功

示例：以中文浏览器打开

输入：

1
2
3
4
5
6
7
8
9
10
11
12
13
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <switch>
        <text x="100" y="50">
            test
        </text>
        <text systemLanguage="zh-CN" x="100" y="50">
            测试
        </text>
        <text systemLanguage="zh-TW" x="100" y="50">
            測試
        </text>
    </switch>
</svg>

输出：

1
2
3
4
5
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <text x="100" y="50">
        test
    </text>
</svg>

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/30/SVG%E4%B8%AD%E7%9A%84switch%E5%85%83%E7%B4%A0/

本文对你有帮助？请支持我

支付宝
微信