目录SVG属性

SVG（Scalable Vector Graphics）元素拥有众多属性，这些属性用于定义图形的外观、位置、变换、交互等特性。

基本图形属填充与描边变换与定位滤镜与效果文本相关属性动画与交互其他SVG图像绘制SVG路径路径的基本结构

SVG路径（SVG Path）是SVG（Scalable Vector Graphics）中用于描述复杂形状或线条的一种基本图形元素。一个路径由一系列指令（commands）组成，这些指令定义了路径的构成线条、曲线、弧线、折线等，并确定了它们在SVG坐标空间中的位置、方向和形状。路径指令可以非常精确地描述几何形状，使其成为绘制任意矢量图形的强大工具。

<path d="M 100 100 L 200 200 Q 300 150 400 200 Z" />

路径指令

路径指令由一个或两个字母（大写或小写）表示，后面跟着参数列表。指令分为两大类：绝对坐标指令和相对坐标指令。大写字母表示绝对坐标，小写字母表示相对于前一个点的相对坐标。

基本指令：

曲线指令：

弧线指令：A/a (elliptical arc): 画一段椭圆弧线。后面跟七个参数（rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y），分别表示椭圆的半径（rx, ry）、旋转角度、是否画大弧、弧线方向（顺时针或逆时针）以及终点坐标。

路径示例

一个简单的SVG路径示例，描述了一个三角形：

<path d="M 100 100 L 200 100 L 200 200 Z" fill="blue" />

解释：

路径动画

SVG路径可以配合CSS动画或SMIL动画进行动态展示。通过动画属性如 stroke-dasharray 和 stroke-dashoffset，可以模拟路径被逐段绘制的效果，实现“绘制动画”。

例如，以下CSS代码实现了路径动画：

path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-path 5s linear forwards;
}
@keyframes draw-path {
  to {
    stroke-dashoffset: 0;
  }
}

这段代码设置了初始时路径为虚线（stroke-dasharray），并完全偏移（stroke-dashoffset）。通过draw-path动画，逐渐减少偏移量，使得路径看似从头至尾被“绘制”出来。

SVG矩形基本结构

在SVG文档中，矩形元素的基本结构如下：

<rect x="x坐标" y="y坐标" width="宽度" height="高度" [其他属性] />

其中，x 和 y 属性定义矩形左上角的坐标，width 和 height 分别指定矩形的宽度和高度。例如：

<rect x="50" y="50" width="200" height="100" />

矩形属性

除了基本的定位和尺寸属性外，SVG矩形还支持以下属性：

  <rect x="50" y="50" width="200" height="100" rx="20" />

fill: 定义矩形内部的填充颜色或渐变。可以是颜色名、十六进制、RGB/RGBA、HSL/HSLA值，也可以是 none 表示无填充或引用 或 。

示例

<svg width="300" height="200">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FF0000" />
      <stop offset="100%" stop-color="#00FF00" />
    linearGradient>
  defs>
  <rect x="50" y="50" width="200" height="100"
        rx="20" ry="20"
        fill="url(#gradient)"
        stroke="#000"
        stroke-width="2"
        stroke-dasharray="5, 5"
        stroke-opacity="0.8" />
svg>

这个示例绘制了一个左上角位于（50, 50），宽高为200×100像素，具有20像素圆角的矩形。矩形内部填充了一个从红色渐变到绿色的线性渐变，描边为黑色，宽度为2像素，采用虚线样式，且描边具有一定的透明度。

动画

SVG矩形可以通过CSS动画或SMIL动画进行动态展示。例如，可以动画化地改变矩形的尺寸、位置、颜色、透明度等属性，或者应用变换（如旋转、缩放）来实现动画效果。

SVG圆形

SVG（Scalable Vector Graphics）中的圆形是通过 元素来定义和绘制的。 元素提供了几个关键属性来控制圆形的大小、位置、填充、描边等特性。

基本结构

<circle cx="圆心x坐标" cy="圆心y坐标" r="半径" [其他属性] />

其中，cx 和 cy 属性定义圆形的圆心坐标，r 属性指定圆形的半径。例如：

<circle cx="100" cy="75" r="50" />

这将绘制一个圆心位于（100, 75），半径为50像素的圆形。

圆形属性

除了基本的圆心坐标和半径属性外，SVG圆形还支持以下属性：

示例

<svg width="300" height="200">
  <defs>
    <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#FF0000" />
      <stop offset="100%" stop-color="#00FF00" />
    radialGradient>
  defs>
  <circle cx="150" cy="100" r="50"
          fill="url(#gradient)"
          stroke="#000"
          stroke-width="2"
          stroke-dasharray="5, 5"
          stroke-opacity="0.8" />
svg>

这个示例绘制了一个圆心位于（150, 100），半径为50像素的圆形。圆形内部填充了一个从红色渐变到绿色的径向渐变，描边为黑色，宽度为2像素，采用虚线样式，且描边具有一定的透明度。

动画

SVG圆形可以通过CSS动画或SMIL动画进行动态展示。例如，可以动画化地改变圆形的尺寸、位置、颜色、透明度等属性，或者应用变换（如旋转、缩放）来实现动画效果。

SVG椭圆

SVG（Scalable Vector Graphics）中的椭圆是通过 元素来定义和绘制的。 元素提供了几个关键属性来控制椭圆的大小、位置、填充、描边等特性。

基本结构

在SVG文档中，椭圆元素的基本结构如下：

<ellipse cx="圆心x坐标" cy="圆心y坐标" rx="水平半径" ry="垂直半径" [其他属性] />

其中，cx 和 cy 属性定义椭圆的圆心坐标，rx 和 ry 分别指定椭圆的水平半径和垂直半径。例如：

<ellipse cx="150" cy="100" rx="100" ry="50" />

这将绘制一个圆心位于（150, 100），水平半径为100像素，垂直半径为50像素的椭圆。

椭圆属性

除了基本的圆心坐标和半径属性外，SVG椭圆还支持以下属性：

示例

<svg width="300" height="200">
  <defs>
    <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#FF0000" />
      <stop offset="100%" stop-color="#00FF00" />
    radialGradient>
  defs>
  <ellipse cx="150" cy="100" rx="100" ry="50"
           fill="url(#gradient)"
           stroke="#000"
           stroke-width="2"
           stroke-dasharray="5, 5"
           stroke-opacity="0.8" />
svg>

这个示例绘制了一个圆心位于（150, 100），水平半径为100像素，垂直半径为50像素的椭圆。椭圆内部填充了一个从红色渐变到绿色的径向渐变，描边为黑色，宽度为2像素，采用虚线样式，且描边具有一定的透明度。

动画

SVG椭圆可以通过CSS动画或SMIL动画进行动态展示。例如，可以动画化地改变椭圆的尺寸、位置、颜色、透明度等属性，或者应用变换（如旋转、缩放）来实现动画效果

SVG多边形

SVG（Scalable Vector Graphics）中的多边形是通过

元素来定义和绘制的。

元素通过一个点集（points）属性来指定多边形各顶点的坐标，从而构建出所需的多边形形状。

基本结构

在SVG文档中，多边形元素的基本结构如下：

<polygon points="顶点1x,顶点1y 顶点2x,顶点2y ... 顶点nx,顶点ny" [其他属性] />

points 属性值是一个由空格分隔的一系列坐标对，每个坐标对代表一个多边形顶点的x轴和y轴坐标。例如：

<polygon points="20,10 .jpg" alt="多边形示例" style="width: .png" />

这将绘制一个由（20, 10）、（30, ½）、（40, 10）和（30, 20）四个顶点构成的四边形。

多边形属性

除了基本的顶点坐标集合属性外，SVG多边形还支持以下属性：

示例

<svg width="300" height="200">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FF0000" />
      <stop offset="100%" stop-color="#00FF00" />
    linearGradient>
  defs>
  <polygon points="50,50 150,50 100,150"
           fill="url(#gradient)"
           stroke="#000"
           stroke-width="2"
           stroke-dasharray="5, 5"
           stroke-opacity="0.8" />
svg>

这个示例绘制了一个由（50, 50）、（150, 50）和（100, 150）三个顶点构成的三角形多边形。多边形内部填充了一个从红色渐变到绿色的线性渐变，描边为黑色，宽度为2像素，采用虚线样式，且描边具有一定的透明度。

动画

SVG多边形可以通过CSS动画或SMIL动画进行动态展示。例如，可以动画化地改变多边形的顶点坐标、尺寸、位置、颜色、透明度等属性，或者应用变换（如旋转、缩放）来实现动画效果。

SVG曲线

SVG（Scalable Vector Graphics）中的曲线包括二阶贝塞尔曲线（Quadratic Bezier Curves）、三阶贝塞尔曲线（Cubic Bezier Curves）以及弧线（Elliptical Arcs）。这些曲线类型丰富了SVG路径的表现力，允许创建平滑过渡、复杂形状以及精确控制曲线形态。

二阶贝塞尔曲线 (Q / q)

二阶贝塞尔曲线由一个起点、一个终点以及一个控制点（Control Point）定义。控制点影响曲线的弯曲程度和方向。

绝对坐标形式 (Q):

<path d="M x1, y1 Q x2, y2 x3, y3" />

相对坐标形式 (q):

<path d="M x1, y1 q dx2, dy2 dx3, dy3" />

-(dx2, dy2) 和 (dx3, dy3)分别是相对于当前点的控制点和终点坐标差值。

三阶贝塞尔曲线 (C / c)

三阶贝塞尔曲线比二阶贝塞尔曲线更复杂，由一个起点、一个终点以及两个控制点（Control Points）定义。这两个控制点分别影响曲线的起点到中间部分以及中间到终点的形态。

绝对坐标形式 (C):

<path d="M x1, y1 C x2, y2 x3, y3 x4, y4" />

相对坐标形式 (c):

<path d="M x1, y1 c dx2, dy2 dx3, dy3 dx4, dy4" />

(dx2, dy2)、(dx3, dy3) 和 (dx4, dy4) 分别是相对于当前点的两个控制点和终点坐标差值。

弧线 (A / a)

弧线是沿着椭圆或圆的一部分绘制的曲线。它需要更多的参数来定义：

绝对坐标形式 (A):

<path d="M x1, y1 A rx, ry x-axis-rotation large-arc-flag, sweep-flag x2, y2" />

相对坐标形式 (a):

<path d="M x1, y1 a rx, ry x-axis-rotation large-arc-flag, sweep-flag dx, dy" />

(dx, dy) 是相对于当前点的终点坐标差值。

示例

绘制一个包含二阶贝塞尔曲线、三阶贝塞尔曲线和弧线的SVG路径：

<svg width="300" height="200">
  <path d="
    M 50,50   
    Q 100,.png 150,100   
    C 200,50 250,150 300,100   
    A .jpg 20 0 0 1 350,150   
  " fill="none" stroke="black" />
svg>

动画

SVG曲线可以通过CSS动画或SMIL动画进行动态展示。例如，可以动画化地改变曲线的控制点、终点、半径、旋转角度等属性，或者应用变换（如旋转、缩放）来实现动画效果。