当前位置: 首页 HTML/CSS SVG 教程

SVG <switch> 元素

由网友 大卫 发布 阅读 1

SVG <switch>元素用于在SVG图像中绘制文本。

switch元素对它的直接子元素上的属性requiredFeatures、属性requiredExtensions 和 属性systemLanguage按照顺序进行评估,然后处理和呈现第一个评估为true的子元素。 其他子元素会被绕过不会被呈现。如果某个子元素是容器元素比如说是一个<g>元素,那么整个子树会被处理呈现或者全部绕过不呈现。

注意:属性display和属性visibility的值对switch元素处理是不起作用的。特别是, 在switch元素的子元素上设置display为none,对switch 元素的true/false测试处理不起作用。

Switch 元素

该<switch>元素使您可以根据SVG查看器用户使用的语言显示不同的形状。通常,您将使用 <switch>元素来显示不同的文本,但是您也可以显示不同的形状。

这是一个SVG <switch>元素示例:

<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>
</switch>

根据用户选择的语言,将显示该<g>元素内部的<switch>元素之一。浏览器将使用第一语言匹配。仅将语言代码上的匹配项也视为匹配项,因此将方言(如en-UK)放在通用语言(如en)之前。