SVG 矢量效果属性

SVG（Scalable Vector Graphics）是一种基于 XML 的图形标记语言，用于描述二维图形、图形动画以及一些特殊效果等。

SVG 矢量效果属性是用于设置 SVG 图形的效果属性，比如填充颜色、描边颜色、阴影、模糊等等。

填充和描边

fill 属性用于设置 SVG 形状的填充颜色，stroke 属性用于设置描边颜色。

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="#00bfff" stroke="#333" stroke-width="2" />
</svg>

阴影

filter 属性用于设置阴影效果，可以通过设置滤镜来实现阴影效果。

<svg width="100" height="100">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="2" dy="2" stdDeviation="2" />
    </filter>
  </defs>
  <rect x="10" y="10" width="80" height="80" fill="#00bfff" filter="url(#shadow)" />
</svg>

模糊

filter 属性也可以用于设置模糊效果。

<svg width="100" height="100">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="2" />
    </filter>
  </defs>
  <rect x="10" y="10" width="80" height="80" fill="#00bfff" filter="url(#blur)" />
</svg>

变形

变形效果可以通过设置 transform 属性来实现。常见的变形效果有平移、缩放、旋转等。

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="#00bfff" transform="translate(20 20) rotate(45) scale(0.8)" />
</svg>

坐标系

在 SVG 中，有两种坐标系，一种是用户坐标系（user space），另一种是视口坐标系（viewport space）。viewBox 属性用于设置视口坐标系。

<svg width="100" height="100" viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="#00bfff" />
</svg>

以上就是 SVG 矢量效果属性的介绍。通过适当的设置，可以实现丰富多彩的 SVG 图形效果。