样式标签 SVG - HTML

介绍

SVG（Scalable Vector Graphics）是一种可缩放的矢量图形格式，可以用于在 Web 页面上显示复杂的图形和动态效果。HTML 中的样式标签（<style>）可以用来定义 SVG 中的样式。

本篇文章将介绍 SVG 样式标签的用法、属性、示例以及注意事项。

用法

在 SVG 中使用样式标签的语法格式如下：

<svg>
  <style>
    // 在这里定义样式
  </style>
  
  // 在这里定义 SVG 图形
</svg>

属性

SVG 样式标签没有特殊的属性，但是可以使用 CSS 的大部分属性来定义样式。

常用的属性包括：

• fill：定义填充颜色。
• stroke：定义描边颜色。
• stroke-width：定义描边宽度。
• opacity：定义透明度。

示例

以下是一个简单的 SVG 样式标签示例：

<svg width="100" height="100">
  <style>
    circle {
      fill: yellow;
      stroke: black;
      stroke-width: 2;
    }
  </style>

  <circle cx="50" cy="50" r="40" />
</svg>

该示例定义了一个黄色的圆，描边为黑色，宽度为 2。

注意事项

• SVG 样式标签中定义的样式只适用于当前 SVG 元素及其子元素，不会对其他元素产生影响。
• 使用样式标签定义的样式可以重复使用，避免了重复定义样式的麻烦。
• 在 SVG 内使用 CSS 属性，需要注意浏览器的兼容性问题。建议使用较新版本的浏览器。