简述SVG样式？

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，用于描述二维矢量图形。SVG样式可以通过多种方式设置：

内联样式：在SVG元素内部使用style属性直接设置样式。

<rect x="10" y="10" width="100" height="100" style="fill:blue;stroke:black;stroke-width:5"/>

内部样式表：在SVG文件的<defs>元素内部定义样式规则，类似HTML中的<style>元素。

<defs>
  <style type="text/css">
    .myRect {
      fill: blue;
      stroke: black;
      stroke-width: 5;
    }
  </style>
</defs>
<rect class="myRect" x="10" y="10" width="100" height="100"/>

外部样式表：将样式规则放在一个外部的CSS文件中，使用<link>元素引入。

<link href="styles.css" type="text/css" rel="stylesheet"/>
<rect class="myRect" x="10" y="10" width="100" height="100"/>

presentation attributes：在SVG元素本身上直接设置样式属性，类似于HTML中的元素属性。

<rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="5"/>

SVG支持大部分CSS属性，包括：

• 颜色：fill、stroke、stop-color等
• 大小和位置：width、height、x、y等
• 变换：transform、rotate、scale、skewX、skewY等
• 渐变：gradient、linearGradient、radialGradient等
• 图案：pattern
• 过滤器：filter
• 阴影：shadow
• 动画：animate、animateMotion、animateTransform等

在设置SVG样式时，需要注意以下几点：

• 使用CSS单位（如pt、px、em等）来设置SVG元素的大小和位置。
• 使用CSS颜色值（如#rrggbb、rgb()、hsl()等）来设置颜色。
• 使用正确的CSS命名空间（xmlns:xlink）来引用SVG元素的链接和图案。
• 使用!important可以覆盖元素本身的presentation attributes。

总的来说，SVG样式与CSS样式非常相似，只有一些语法和属性上的区别。