SVG 元素

SVG 中的 元素是一个非常有用的元素，它可以根据不同的条件来显示不同的 SVG 元素，有点像编程语言中的“if-else”语句。

语法

属性

• switchRequiredFeatures：指定必需的功能的名称或名称列表，它们必须在SVG实现中可用。如果未提供任何功能，则不会考虑此属性。
• switchRequiredExtensions：指定必需的扩展名或扩展名列表，它们必须在SVG实现中可用。如果未提供任何扩展，则不会考虑此属性。
• switchSystemLanguage：指定必需的语言的名称或名称列表，其中一个必须是用户设备上设置的当前系统语言。此属性不会影响用户设备上的用户界面语言。

示例

下面是一个示例，根据不同的设备，显示不同的图像：

<svg height="200" width="200">
  <switch>
    <g switchSystemLanguage="en">
      <image href="img/en.jpg"/>
    </g>
    <g switchSystemLanguage="zh">
      <image href="img/zh.jpg"/>
    </g>
    <g>
      <image href="img/default.jpg"/>
    </g>
  </switch>
</svg>

在这个示例中，如果用户设备的语言是英文，则显示英文图片；如果是中文，则显示中文图片；否则，显示默认图片。

结论

元素的使用可以根据不同的条件显示不同的 SVG 元素，非常实用，可以让 SVG 动态化，增加互动性。