SVG 样式 CSS

SVG（可缩放矢量图形）是基于XML的矢量图形格式，可以用来创建动画、图标、图表等各种图形。在SVG中，可以使用CSS样式来控制元素的外观和行为。本文将详细介绍SVG样式CSS的使用方法。

1. 在SVG中使用样式

SVG中的样式可以使用样式标签（<style>）或样式属性（style）来定义。

1.1 样式标签

使用样式标签可以将CSS代码嵌入SVG文件中，如下所示：

<svg>
  <style type="text/css">
    <![CDATA[
      // CSS代码
    ]]>
  </style>
  // 元素
</svg>

需要注意的是，样式标签必须包含type属性，并将其值设置为text/css。CSS代码要使用<![CDATA[...]]>包裹起来，确保浏览器正确解析。

1.2 样式属性

使用样式属性可以直接在元素内部定义CSS属性，如下所示：

<rect width="100" height="100" fill="red" style="fill-opacity: 0.5; stroke: black; stroke-width: 2px;" />

与HTML中的样式属性相同，SVG中的样式属性也可以使用!important来覆盖其他样式。

2. 常见的SVG样式属性

以下是一些常用的SVG样式属性：

2.1 fill

fill属性可以设置元素的填充颜色，可以使用颜色名称、RGB值、HEX值等方式定义。

<rect width="100" height="100" fill="red" />

2.2 stroke

stroke属性可以设置元素的边框颜色，同样可以使用多种方式定义。

<rect width="100" height="100" stroke="black" stroke-width="2px" />

2.3 stroke-width

stroke-width属性可以设置元素的边框宽度，单位可以使用px、em等方式。

2.4 fill-opacity 和 stroke-opacity

fill-opacity和stroke-opacity属性可以分别设置填充颜色和边框颜色的透明度，取值范围为0到1之间。

<rect width="100" height="100" fill="red" fill-opacity="0.5" />
<rect width="100" height="100" stroke="black" stroke-opacity="0.5" />

2.5 gradient

SVG支持线性渐变和径向渐变两种方式，可以通过<linearGradient>和<radialGradient>元素来实现。

<defs>
  <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </linearGradient>
</defs>
<rect width="100" height="100" fill="url(#grad)" />

<defs>标签用于定义渐变，<stop>标签用于定义渐变的颜色和位置，url(#grad)用于引用渐变。

3. 其他SVG样式属性

除了上述介绍的属性外，SVG还支持许多其他样式属性，如font-family、font-size、font-style、font-weight等用于设置文本样式的属性，以及opacity、filter、clip-path等用于设置其他样式的属性。

4. 总结

SVG样式CSS可以控制SVG元素的外观和行为，使用起来非常方便。本文介绍了SVG样式CSS的使用方法和常用属性，希望对程序员们有所帮助。