d - SVG：可缩放矢量图形

d
=

**`d`** 属性定义了一个要绘制的路径。

路径定义是一个路径命令组成的列表，其中的每一个命令由命令字母和用于表示命令参数的数字组成。命令已在下方列出。

你可以将此属性与以下 SVG 元素一起使用：`<path>`、`<glyph>`、`<missing-glyph>`。

`d` 是一个表现属性 (en-US)，因此可以用于作为 CSS 属性。

示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 fill="none"
 stroke="red"
 d="M 10,30
 A 20,20 0,0,1 50,30
 A 20,20 0,0,1 90,30
 Q 90,60 50,90
 Q 10,60 10,30 z" />
</svg>
```

path
----

对于 `<path>`，`d` 是一个字符串，其中包含一组路径命令，用于定义要绘制的路径。

|  |  |
| --- | --- |
| 值 | **<string>** |
| 默认值 | *无* |
| 动画 | 是 |

glyph
-----

**警告：** 自 SVG2 起，`<glyph>` 已被弃用，不应该继续使用。

对于 `<glyph>`，`d` 是一个字符串，其中包一组路径命令，用于定义字形（glyph）的轮廓形状。

|  |  |
| --- | --- |
| 值 | **<string>** |
| 默认值 | *无* |
| 动画 | 是 |

**备注：** 原点（坐标 `0`,`0`）通常是上下文的*左上角*。但 `<glyph>` 元素的原点是其字形框的*左下角*。

missing-glyph
-------------

**警告：** 自 SVG2 起，`<missing-glyph>` 已被弃用，不应该继续使用。

对于 `<missing-glyph>`，`d` 是一个字符串，其中包一组路径命令，用于定义字形（glyph）的轮廓形状。

|  |  |
| --- | --- |
| 值 | **<string>** |
| 默认值 | *无* |
| 动画 | 是 |

将 d 作为 CSS 属性
-------------

`d` 是一个表现属性 (en-US)，因此也可以使用 CSS 进行修改。该属性采用 path() (en-US) 或 `none`。

下面的示例展示了如何在悬停在元素上时应用新的路径。新的路径与旧的路径现统，但额外增加了一条穿过心形图案的线。

```css
html,
body,
svg {
  height: 100%;
}

/\* This path is displayed on hover\*/
#svg\_css\_ex1:hover path {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
  );
}
```

```html
<svg id="svg\_css\_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 fill="none"
 stroke="red"
 d="M 10,30
 A 20,20 0,0,1 50,30
 A 20,20 0,0,1 90,30
 Q 90,60 50,90
 Q 10,60 10,30 z
 " />
</svg>
```

路径命令
----

路径命令是对要绘制的路径的说明。每一个命令由代表命令的字母和代表参数的数字组成。

SVG 定义了六种路径命令类型，一共 20 条命令：

* 移动到：`M`、`m`
* 画线至：`L`、`l`、`H`、`h`、`V`、`v`
* 三次方贝塞尔曲线：`C`、`c`、`S`、`s`
* 二次方贝塞尔曲线：`Q`、`q`、`T`、`t`
* 椭圆曲线：`A`、`a`
* 封闭路径：`Z`、`z`

**备注：** 命令是*大小写敏感*的。大写的命令指定绝对坐标，而小写命令指定相对（于当前位置的）坐标。

始终可以将负值作为命令的参数：

* 负的角度是逆时针的；
* *绝对*坐标中，负的 *x* 和 *y* 将被解释为负坐标；
* *相对*坐标中，负的 *x* 值为向左移动，负的 *y* 值为向上移动。
### MoveTo 路径命令

*Moveto* 指令可以被想象成拎起绘图笔，落脚到另一处。即，从*当前位置*（*Po*; {*xo*, *yo*}），移动到*新的位置*（*Pn*; {*xn*, *yn*}），且新的位置与 *Po* 之间不会绘制线段。

| 命令 | 参数 | 备注 |
| --- | --- | --- |
| M | (`x`, `y`)+ |
 将*当前位置*移动到坐标
 `x`,`y`。后续子坐标序列将被解释为隐式的绝对位置的
 LineTo（`L`）命令的参数（*见下方*）。

**公式：** Pn = {`x`, `y`} |
| m | (`dx`, `dy`)+ |
 将*当前位置*沿 x 轴移动
 `dx`，沿 y 轴移动
 `dy`。后续子坐标序列将被解释为隐式的相对位置的
 LineTo（`l`）命令的参数（*见下方*）。

**公式：** Pn = {xo
 + `dx`, yo + `dy`}
  |

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 fill="none"
 stroke="red"
 d="M 10,10 h 10
 m 0,10 h 10
 m 0,10 h 10
 M 40,20 h 10
 m 0,10 h 10
 m 0,10 h 10
 m 0,10 h 10
 M 50,50 h 10
 m-20,10 h 10
 m-20,10 h 10
 m-20,10 h 10" />
</svg>
```

* 位于绝对位置 x=50, y= 100：`<path d="M50,100..." />`
* 往右移 50，往下移 100：`<path d="m50,100..." />`
### Lineto 路径命令

*Lineto* 指令将绘制一条直线段。这个直线段从*当前位置*（*Po*; {*xo*, *yo*}）移到*指定位置*（*Pn*; {*xn*, *yn*}）。然后，*指定位置*（*Pn*）将变成下一个命令中的*当前位置*（*Po′*）。

| 命令 | 参数 | 备注 |
| --- | --- | --- |
| L | (`x`, `y`)+ |
 在*当前位置*和*指定位置*
`x`,`y` 之间绘制一条线段。后续子坐标序列将被解释为隐式的绝对位置的
 LineTo（`L`）命令的参数。

**公式：** Po′ =
 Pn = {`x`, `y`}
  |
| l | (`dx`, `dy`)+ |
 在*当前位置*和*指定位置*之间绘制一条线段，*指定位置*为*当前位置*沿
 x 轴偏移 `dx` 以及沿
 y 轴偏移 `dy`
 处。后续子坐标序列将被解释为隐式的相对位置的
 LineTo（`L`）命令的参数。

**公式：** Po′ =
 Pn = {xo +
 `dx`, yo + `dy`}
  |
| H | `x`+ |
 在*当前位置*与*指定位置*之间绘制一条水平线段。*指定位置*由
 `x` 参数和*当前位置*的
 `y` 坐标指定。后续子序列的值将被解释为隐式的绝对位置的
 LineTo（`H`）命令的参数。

**公式：** Po′ =
 Pn = {`x`, yo}
  |
| h | `dx`+ |
 在*当前位置*与*指定位置*之间绘制一条水平线段。*指定位置*由*当前位置*沿
 x 轴偏移 `dx`
 的 `x` 坐标和*当前位置*的
 `y` 坐标指定。后续子序列的值将被解释为隐式的相对位置的
 LineTo（`h`）命令的参数。

**公式：** Po′ =
 Pn = {xo +
 `dx`, yo}
  |
| V | `y`+ |
 在*当前位置*与*指定位置*之间绘制一条垂直线段。*指定位置*由
 `y` 参数和*当前位置*的
 `x` 坐标指定。后续子序列的值将被解释为隐式的绝对位置的
 LineTo（`V`）命令的参数。

**公式：** Po′ =
 Pn = {xo, `y`}
  |
| v | `dy`+ |
 在*当前位置*与*指定位置*之间绘制一条垂直线段。*指定位置*由*当前位置*沿
 y 轴偏移 `dy`
 的 `y` 坐标和*当前位置*的
 `x` 坐标指定。后续子序列的值将被解释为隐式的相对位置的
 LineTo（`v`）命令的参数。

**公式：** Po′ =
 Pn = {xo, yo + `dy`}
  |

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- LineTo commands with absolute coordinates -->
  <path
 fill="none"
 stroke="red"
 d="M 10,10
 L 90,90
 V 10
 H 50" />

  <!-- LineTo commands with relative coordinates -->
  <path
 fill="none"
 stroke="red"
 d="M 110,10
 l 80,80
 v -80
 h -40" />
</svg>
```

三次贝塞尔曲线
-------

*三次**贝塞尔曲线*是使用四个点定义的平滑曲线：

起始点（当前位置）

(*Po* = {*xo*, *yo*})

终点

(*Pn* = {*xn*, *yn*})

起始控制点

(*Pcs* = {*xcs*, *ycs*})（控制在起点附近的曲线的曲率）

终点控制点

(*Pce* = {*xce*, *yce*})（控制在终点附近的曲线的曲率）

绘制后，*终点*（*Pn*）将成为下一个命令中的*当前位置*（*Po′*）。

| 命令 | 参数 | 备注 |
| --- | --- | --- |
| C | (`x1`,`y1`, `x2`,`y2`, `x`,`y`)+ |
 在*当前位置*和*终点*
`x`,`y` 之间绘制一条三次贝塞尔曲线。*起始控制点*通过
 `x1`,`y1`
 指定，而*终点控制点*通过
 `x2`,`y2` 指定。后续的三元组坐标序列将被解释为隐式的绝对位置的三次贝塞尔曲线（`C`）命令的参数。

公式：
Po′ = Pn = {`x`, `y`} ;Pcs = {`x1`, `y1`} ;Pce = {`x2`, `y2`}
 |
| c | (`dx1`,`dy1`, `dx2`,`dy2`, `dx`,`dy`)+ |
 在*当前位置*和*终点*（*终点*为*当前位置*沿
 x 轴偏移 `dx`
 以及沿 y 轴偏移 `dy`
 处）之间绘制一条三次贝塞尔曲线。*起始控制点*为*当前位置*沿 x 轴偏移
 `dx1` 以及沿
 y 轴偏移 `dy1`
 处；而*终点控制点*为*当前位置*沿 x 轴偏移
 `dx2` 以及沿
 y 轴偏移 `dy2`
 处。后续的三元组坐标序列将被解释为隐式的相对位置的三次贝塞尔曲线（`c`）命令的参数。

公式：

Po′ = Pn = {xo
 + `dx`, yo + `dy`} ;Pcs = {xo +
 `dx1`, yo + `dy1`} ;Pce = {xo +
 `dx2`, yo + `dy2`}

 |
| S | (`x2`,`y2`, `x`,`y`)+ |
 在*当前位置*和*终点*
`x`,`y` 之间绘制一条平滑的三次贝塞尔曲线。*终点控制点*通过
 `x2`,`y2` 指定。*起始控制点*是上一条曲线命令的*终点控制点*在*当前位置*上的反射点；若上一条命令不是曲线命令，则其与曲线的起始点（*当前位置*）相同。后续成对的坐标序列将被解释为隐式的绝对位置的平滑三次贝塞尔曲线（`S`）命令的参数。
  |
| s | (`dx2`,`dy2`, `dx`,`dy`)+ |
 在*当前位置*和*终点*（*终点*为*当前位置*沿
 x 轴偏移 `dx`
 以及沿 y 轴偏移 `dy`
 处）之间绘制一条平滑的三次贝塞尔曲线。*终点控制点*为*当前位置*沿
 x 轴偏移 `dx2`
 以及沿 y 轴偏移 `dy2`
 处。*起始控制点*是上一条曲线命令的*终点控制点*在*当前位置*上的反射点；若上一条命令不是曲线命令，则其与曲线的起始点（*当前位置*）相同。后续成对的坐标序列将被解释为隐式的相对位置的平滑三次贝塞尔曲线（`s`）命令的参数。
  |

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg
 viewBox="0 0 200 100"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Cubic Bézier curve with absolute coordinates -->
  <path
 fill="none"
 stroke="red"
 d="M 10,90
 C 30,90 25,10 50,10
 S 70,90 90,90" />

  <!-- Cubic Bézier curve with relative coordinates -->
  <path
 fill="none"
 stroke="red"
 d="M 110,90
 c 20,0 15,-80 40,-80
 s 20,80 40,80" />

  <!-- Highlight the curve vertex and control points -->
  <g id="ControlPoints">
    <!-- First cubic command control points -->
    <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
    <circle cx="30" cy="90" r="1.5" />

    <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
    <circle cx="25" cy="10" r="1.5" />

    <!-- Second smooth command control points (the first one is implicit) -->
    <line
 x1="50"
 y1="10"
 x2="75"
 y2="10"
 stroke="lightgrey"
 stroke-dasharray="2" />
    <circle cx="75" cy="10" r="1.5" fill="lightgrey" />

    <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
    <circle cx="70" cy="90" r="1.5" />

    <!-- curve vertex points -->
    <circle cx="10" cy="90" r="1.5" />
    <circle cx="50" cy="10" r="1.5" />
    <circle cx="90" cy="90" r="1.5" />
  </g>
  <use xlink:href="#ControlPoints" x="100" />
</svg>
```

### 二次贝塞尔曲线

*二次**贝塞尔曲线*是使用三个点定义的平滑曲线：

起始点（当前位置）

*Po* = {*xo*, *yo*}

终点

*Pn* = {*xn*, *yn*}

控制点

*Pc* = {*xc*, *yc*}（控制曲率）

绘制后，*终点*（*Pn*）将成为下一个命令中的*当前位置*（*Po′*）。

| 命令 | 参数 | 备注 |
| --- | --- | --- |
| Q | (`x1`,`y1`, `x`,`y`)+ |
 在*当前位置*和*终点*
`x`,`y` 之间绘制一条二次贝塞尔曲线。*控制点*通过
 `x1`,`y1`
 指定。后续成对的坐标序列将被解释为隐式的绝对位置的二次贝塞尔曲线（`Q`）命令的参数。

**公式：**
Po′ = Pn = {`x`, `y`} ;Pc = {`x1`, `y1`}
 |
| q | (`dx1`,`dy1`, `dx`,`dy`)+ |
 在*当前位置*和*终点*（*终点*为*当前位置*沿
 x 轴偏移 `dx`
 以及沿 y 轴偏移 `dy`
 处）之间绘制一条二次贝塞尔曲线。*控制点*为*当前位置*（曲线的起始点）沿
 x 轴偏移 `dx1`
 以及沿 y 轴偏移 `dy1`
 处。后续成对的坐标序列将被解释为隐式的相对位置的二次贝塞尔曲线（`q`）命令的参数。

公式：

Po′ = Pn = {xo
 + `dx`, yo + `dy`} ;Pc = {xo +
 `dx1`, yo + `dy1`}

 |
| T | (`x`,`y`)+ |
 在*当前位置*和*终点*
`x`,`y` 之间绘制一条平滑的二次贝塞尔曲线。*控制点*是上一条曲线命令的*控制点*在*当前位置*上的反射点；若上一条命令不是曲线命令，则其与曲线的起始点（*当前位置*）相同。后续的坐标序列将被解释为隐式的绝对位置的平滑二次贝塞尔曲线（`T`）命令的参数。

公式：
Po′ = Pn = {`x`, `y`}
 |
| t | (`dx`,`dy`)+ |
 在*当前位置*和*终点*（*终点*为*当前位置*沿
 x 轴偏移 `dx`
 以及沿 y 轴偏移 `dy`
 处）之间绘制一条平滑的二次贝塞尔曲线。*控制点*是上一条曲线命令的*控制点*在*当前位置*上的反射点；若上一条命令不是曲线命令，则其与曲线的起始点（*当前位置*）相同。后续的坐标序列将被解释为隐式的相对位置的平滑二次贝塞尔曲线（`t`）命令的参数。

公式：

Po′ = Pn = {xo
 + `dx`, yo + `dy`}

 |

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg
 viewBox="0 0 200 100"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Quadratic Bézier curve with implicit repetition -->
  <path
 fill="none"
 stroke="red"
 d="M 10,50
 Q 25,25 40,50
 t 30,0 30,0 30,0 30,0 30,0" />

  <!-- Highlight the curve vertex and control points -->
  <g>
    <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" />
    <circle cx="25" cy="25" r="1.5" />

    <!-- Curve vertex points -->
    <circle cx="10" cy="50" r="1.5" />
    <circle cx="40" cy="50" r="1.5" />

    <g id="SmoothQuadraticDown">
      <polyline
 points="40,50 55,75 70,50"
 stroke="rgba(0,0,0,.2)"
 stroke-dasharray="2"
 fill="none" />
      <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
      <circle cx="70" cy="50" r="1.5" />
    </g>

    <g id="SmoothQuadraticUp">
      <polyline
 points="70,50 85,25 100,50"
 stroke="rgba(0,0,0,.2)"
 stroke-dasharray="2"
 fill="none" />
      <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
      <circle cx="100" cy="50" r="1.5" />
    </g>

    <use xlink:href="#SmoothQuadraticDown" x="60" />
    <use xlink:href="#SmoothQuadraticUp" x="60" />
    <use xlink:href="#SmoothQuadraticDown" x="120" />
  </g>
</svg>
```

### 椭圆曲线

*椭圆曲线*是定义为椭圆的一部分的曲线。有时，使用椭圆曲线绘制高度规则的曲线会比使用贝塞尔曲线更容易。

| 命令 | 参数 | 备注 |
| --- | --- | --- |
| A |
 (`rx` `ry`
`angle` `large-arc-flag`
`sweep-flag` `x`
`y`)+
  |
 在当前位置和坐标
 `x`,`y` 之间绘制一条椭圆曲线。用于绘制圆弧的椭圆中心根据命令的其他参数确定：
 * `rx` 和`ry` 是椭圆的两个半径；
* `angle` 表示椭圆相对于
 x 轴的旋转角度；
* `large-arc-flag` 和
 `sweep-flag` 允许选择必须绘制的弧线，因为其他参数可以绘制
 4 条可能的弧线。
    + `large-arc-flag`
     允许选择一个大弧线（`1`）或一个小弧线（`0`），
    + `sweep-flag`
     允许选择一条顺时针旋转的弧线（`1`）或一条逆时针旋转的弧线（`0`）

坐标 `x`,`y` 将成为下一个命令中的当前位置。后续参数集合的序列将被解释为隐式的绝对位置的椭圆曲线（`A`）命令的参数。
  |
| a |
 (`rx` `ry`
`angle` `large-arc-flag`
`sweep-flag` `dx`
`dy`)+
  |
 在当前位置和指定位置之间绘制一条椭圆曲线。指定位置为当前位置沿
 x 轴偏移 `dx`
 以及沿 y 轴偏移 `dy`
 处。用于绘制圆弧的椭圆中心根据命令的其他参数确定：
 * `rx` 和 `ry` 是椭圆的两个半径；
* `angle` 表示椭圆相对于
 x 轴的旋转角度；
* `large-arc-flag` 和
 `sweep-flag` 允许选择必须绘制的弧线，因为其他参数可以绘制
 4 条可能的弧线。
    + `large-arc-flag`
     允许选择一个大弧线（`1`）或一个小弧线（`0`），
    + `sweep-flag`
     允许选择一条顺时针旋转的弧线（`1`）或一条逆时针旋转的弧线（`0`）

当前位置沿 x 轴偏移 `dx`
 以及沿 y 轴偏移后的位置将成为下一个命令中的当前位置。后续参数集合的序列将被解释为隐式的相对位置的椭圆曲线（`a`）命令的参数。
  |

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <!-- The influence of the arc flags with which the arc is drawn -->
  <path
 fill="none"
 stroke="red"
 d="M 6,10
 A 6 4 10 1 0 14,10" />

  <path
 fill="none"
 stroke="lime"
 d="M 6,10
 A 6 4 10 1 1 14,10" />

  <path
 fill="none"
 stroke="purple"
 d="M 6,10
 A 6 4 10 0 1 14,10" />

  <path
 fill="none"
 stroke="pink"
 d="M 6,10
 A 6 4 10 0 0 14,10" />
</svg>
```

ClosePath
---------

*ClosePath* 命令将从*当前位置*绘制一条直线到路径中的第一个点。

| 命令 | 参数 | 备注 |
| --- | --- | --- |
| Z, z |  | 通过连接路径的最后一个点与路径的起始点来闭合当前的子路径。如果这两个点的坐标不同，则在两者之间绘制一条直线。 |

**备注：** 使用 *ClosePath* 命令闭合的形状的外观可能与使用其他命令向起始点绘制一条线而闭合的形状不同，因为前者是将线条的末端连接在一起（根据 `stroke-linejoin` 的设置），而不是仅仅绘制到坐标点上。

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
  <!--
 An open shape with the last point of
 the path different to the first one
 -->
  <path
 stroke="red"
 d="M 5,1
 l -4,8 8,0" />

  <!--
 An open shape with the last point of
 the path matching the first one
 -->
  <path
 stroke="red"
 d="M 15,1
 l -4,8 8,0 -4,-8" />

  <!--
 A closed shape with the last point of
 the path different to the first one
 -->
  <path
 stroke="red"
 d="M 25,1
 l -4,8 8,0
 z" />
</svg>
```

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # DProperty |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # GlyphElementDAttribute |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # DAttribute |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


pointer-events - SVG：可缩放矢量图形

pointer-events
==============

pointer-events 属性是一个展示属性，用于定义元素是否或何时可能是鼠标事件的目标元素。

**Note:** 作为一个展示属性， `pointer-events` 可以被当做 CSS 属性使用。

示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!--
 Circle 元素将始终拦截鼠标事件。
 为了改变较底部的的 rect 元素的颜色，
 你需要点击 rect 元素在圆外的部分
 -->
  <rect x="0" y="0" height="10" width="10" fill="black" />
  <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblePoint" />

  <!--
 下面的 circle 元素将永远不会获取到鼠标事件，
 当你点击 circle 元素或者点击 rect 元素时，
 rect 元素都会改变颜色
 -->
  <rect x="10" y="0" height="10" width="10" fill="black" />
  <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" />
</svg>
```

```js
window.addEventListener("mouseup", (e) => {
  // 在 #000000 和 #FFFFFF 之间随机选取一个颜色
  const color = Math.round(Math.random() \* 0xffffff);

  // 将 color 变量的值按照 CSS 的要求进行格式化
  const fill = "#" + color.toString(16).padStart(6, "0");

  // 将 color 变量设置的颜色应用到实际点击的元素上
  e.target.style.fill = fill;
});
```

作为一个展示属性，他可以被很多元素使用，但和它紧密相关的只有下面的 23 个元素：`<a>`, `<circle>`, `<clipPath>`, `<defs>`, `<ellipse>`, `<foreignObject>`, `<g>`, `<image>`, `<line>`, `<marker>`, `<mask>`, `<path>`, `<pattern>`, `<polygon>`, `<polyline>`, `<rect>`, `<svg>`, `<switch>`, `<symbol>`, `<text>`, `<textPath>`, `<tspan>`, `<use>`

用法
--

| 值 | `bounding-box` | `visiblePainted` | `visibleFill` | `visibleStroke` | `visible` | `painted` | `fill` | `stroke` | `all` | `none` |
| --- | --- |
| 默认值 | `visiblePainted` |
| 是否可动画 | Yes |

*为了详细了解每个可能的值，请参考 CSS 文档 `pointer-events`.*

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PointerEventsProp |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


cy - SVG：可缩放矢量图形

cy
==

**`cy`** 属性定义一个中心点的 y 轴坐标。

有三个元素在使用此属性：`<circle>`，`<ellipse>` 和 `<radialGradient>`

示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cy="25%" id="myGradient">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cy="50" cx="50" r="45" />
  <ellipse cy="150" cx="50" rx="45" ry="25" />
  <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
</svg>
```

圆
-

对于 `<circle>`，`cy` 用来定义图形中心的 y 轴坐标。

|  |  |
| --- | --- |
| 值 | `<length-percentage>` |
| 默认值 | `0` |
| 可变性 | Yes |

\*\*注：\*\*起始于 SVG2，`cy` 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。

椭圆
--

对于 `<ellipse>`，`cy` 用来定义图形中心的 y 轴坐标。

|  |  |
| --- | --- |
| 值 | `<length-percentage>` |
| 默认值 | `0` |
| 可变性 | Yes |

\*\*注：\*\*起始于 SVG2，`cy` 是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。

径向渐变
----

对于 `<radialGradient>`，`cy` 用来定义径向渐变终止圆的 y 轴坐标。

|  |  |
| --- | --- |
| 值 | `<length-percentage>` |
| 默认值 | `50%` |
| 可变性 | Yes |

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cy="0" id="myGradient000">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="50%" id="myGradient050">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="100%" id="myGradient100">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect
 x="1"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient000)"
 stroke="black" />
  <rect
 x="13"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient050)"
 stroke="black" />
  <rect
 x="25"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient100)"
 stroke="black" />
</svg>
```

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CY |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCYAttribute |

参见
--

* `cx`
* `r`


y - SVG：可缩放矢量图形

y
=

**`y`** 属性在用户坐标系统中标识了一个 y 轴坐标。

你可以在以下 SVG 元素中使用该属性：

* `<cursor>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDropShadow>`
* `<feFlood>`
* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMergeNode>`
* `<feMorphology>`
* `<feOffset>`
* `<fePointLight>`
* `<feSpecularLighting>`
* `<feSpotLight>`
* `<feTile>`
* `<feTurbulence>`
* `<filter>`
* `<foreignObject>`
* `<glyphRef>`
* `<image>`
* `<mask>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<symbol>`
* `<text>`
* `<tref>`
* `<tspan>`
* `<use>`
示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <rect y="20" x="20" width="60" height="60" />
  <rect y="120" x="20" width="60" height="60" />
  <rect y="220" x="20" width="60" height="60" />
</svg>
```

use
---

For `<use>`, `y` defines the y coordinate of the upper left corner of the referenced element.

|  |  |
| --- | --- |
| 值 | **<length>**
 |
 **<percentage>** |
| 默认值 | `0` |
| 可变性 | 是 |

**备注：** 从 SVG2 开始，`y` 变为*几何属性*，这意味着该元素也可以用作使用的元素的 CSS 属性。

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-y |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-y |
| Filter Effects Module Level 1 # element-attrdef-fepointlight-y |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-y |
| CSS Masking Module Level 1 # element-attrdef-mask-y |
| Scalable Vector Graphics (SVG) 2 # Y |
| Scalable Vector Graphics (SVG) 2 # PatternElementYAttribute |
| Scalable Vector Graphics (SVG) 2 # TextElementYAttribute |


vector-effect - SVG：可缩放矢量图形

vector-effect
=============

**`vector-effect`** 属性指明绘制对象时要使用的矢量效果。在任何其他合成操作（如滤镜，蒙版和剪辑等）之前，都要应用矢量效果。

**备注：** 作为显示性属性， `vector-effect` 也可以直接在 CSS 样式表中作为属性使用。

作为显示性属性，它能被应用到任何元素，但只对这 10 个元素有效果：`<circle>`, `<ellipse>`, `<foreignObject>`, `<image>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>`, `<textPath>` `<tspan>`, and `<use>`

用法说明
----

| 值 | `none` | `non-scaling-stroke` | `non-scaling-size` | `non-rotation` | `fixed-position` |
| --- | --- |
| 默认值 | `none` |
| 可动画性 | 是 |

`none`

该值指定不应用矢量效果，即，使用默认的渲染行为，即首先用指定的绘画填充形状的几何形状，然后使用指定的绘画描边轮廓。

`non-scaling-stroke`

该值修改了笔触的方式。通常，笔触涉及在当前用户坐标系中计算形状路径的笔触轮廓，并用笔触颜料（颜色或渐变）填充轮廓。该值的最终视觉效果是笔触宽度不依赖于元素的变换（包括非均匀缩放和剪切变换）和缩放级别。

`non-scaling-size`

该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，该用户坐标系的比例也不会更改。但是，它没有指定抑制旋转和偏斜。同样，它也不指定用户坐标系的原点。由于此值抑制了用户坐标系的缩放，因此它还具有`non-scaling-stroke`的特性。

`non-rotation`

该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间发生任何变换更改，该用户坐标系的旋转和倾斜仍被抑制。但是，它没有指定抑制缩放。同样，它也没有指定用户坐标系的原点。

`fixed-position`

该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，用户坐标系的位置都是固定的。但是，它没有指定抑制旋转，偏斜和缩放。当同时指定了该矢量效果和 `transform` 属性， `transform` 属性将因该矢量效果而被消耗。

示例
--

### Example: vector-effect="non-scaling-stroke"

```html
<svg viewBox="0 0 500 240">
  <!-- normal -->
  <path
 d="M10,20L40,100L39,200z"
 stroke="black"
 stroke-width="2px"
 fill="none"></path>

  <!-- scaled -->
  <path
 transform="translate(100,0)scale(4,1)"
 d="M10,20L40,100L39,200z"
 stroke="black"
 stroke-width="2px"
 fill="none"></path>

  <!-- fixed-->
  <path
 vector-effect="non-scaling-stroke"
 transform="translate(300,0)scale(4,1)"
 d="M10,20L40,100L39,200z"
 stroke="black"
 stroke-width="2px"
 fill="none"></path>
</svg>
```

#### 结果

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # VectorEffects |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


seed - SVG：可缩放矢量图形

seed
====

`seed`属性代表了 `<feTurbulence>` 元素生成的伪随机数的开始数字。

如果没有指定这个属性，它等效于指定了一个 `0` 值。

用法
--

| 类别 | *None* |
| --- | --- |
| 值 | <number> (en-US) |
| 可变性 | Yes |

示例
--

元素
--

以下元素可以使用`seed`属性：

* `<feTurbulence>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feturbulence-seed |


clip - SVG：可缩放矢量图形

clip
====

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

**`clip`** 属性是定义元素可见区域的属性。

`clip` 属性的参数值与 `CSS clip property` 的参数值定义相同。指示当前用户坐标的无单位的值，可以用在 `<shape>` 的坐标值上。`auto` 值定义了一个剪切路径，其边界沿着由给定元素创建的视口的边界。

As a presentation attribute, it can be applied to any element but it has effect only on the following six elements: `<svg>`, `<symbol>`, `<image>`, `<foreignObject>`, `<pattern>`, `<marker>`

示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Auto clipping -->
  <svg x="0" width="10" height="10" clip="auto">
    <circle cx="5" cy="5" r="4" stroke="green" />
  </svg>

  <!-- Rect(top, right, bottom, left) clipping -->
  <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)">
    <circle cx="5" cy="5" r="4" stroke="green" />
  </svg>
</svg>
```

用法
--

**Warning:** This property is deprecated. Use `clip-path` instead.

| 可用值 | **auto** | <shape> | inherit |
| --- | --- |
| 默认值 | Yes |
| Animatable | Yes |

The value `auto` defines a clipping path along the bounds of the viewport created by the given element.

The value `rect()` defines a clipping rectangle following the following syntax: `rect(<top>, <right>, <bottom>, <left>)`. The `<top>` and `<bottom>` values specify offsets from the *top border edge* of the element viewport, while `<right>` and `<left>` specify offsets from the *left border edge* of the element viewport.

规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # clip-property |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


image-rendering - SVG：可缩放矢量图形

image-rendering
===============

`image-rendering` 属性向浏览器提供了一个提示，即在图片处理时，如何进行速度 vs 质量之间的权衡。

作为一个显示属性，它也可以在 CSS 样式文件中作为属性而存在，请参考 `CSS image-rendering` 获取更多的信息

使用语境
----

| 类别 | Presentation attribute |
| --- | --- |
| 值 | **auto** | optimizeSpeed | optimizeQuality | inherit |
| 动画效果 | Yes |

auto

表示用户代理可以在速度和质量间做适当的权衡，但是质量将比速度更重要一些。

optimizeSpeed

表示用户代理应该更注重速度。

optimizeQuality

表示用户代理应该更注重质量

示例
--

元素
--

下面的元素可以能够使用 `image-rendering` 属性

* `<image>`
规范
--

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-rendering |
| Scalable Vector Graphics (SVG) 2 # ImageRendering |

参考
--

* `CSS image-rendering`


transform - SVG：可缩放矢量图形

transform
=========

**`transform`** 属性定义应用于元素及其子元素的变换规则列表。

**备注：** 从 SVG2 开始，`transform` 为表现属性，这意味着它可以用作 CSS 属性。但是，请注意 CSS 属性和该属性的语法存在一些差异。有关在这种情况下使用的特定语法，请参见 CSS `transform` 属性的文档。

你可以在任何 SVG 元素上使用此属性。

示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg
 viewBox="-40 0 150 100"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <g
 fill="grey"
 transform="rotate(-10 50 100)
 translate(-36 45.5)
 skewX(40)
 scale(1 0.5)">
    <path
 id="heart"
 d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
  </g>

  <use href="#heart" fill="none" stroke="red" />
</svg>
```

在 SVG 1.1 中，仅有 16 种元素可以使用它：`<a>`、`<circle>`、`<clipPath>`、`<defs>`、`<ellipse>`、`<foreignObject>`、`<g>`、`<image>`、`<line>`、`<path>`、`<polygon>`、`<polyline>`、`<rect>`、`<switch>`、`<text>` 和 `<use>`。

另外，作为 SVG 1.1 的遗留物，`<linearGradient>` 和 `<radialGradient>` 支持 `gradientTransform` 属性，而 `<pattern>` 支持 `patternTransform` 属性，两者的行为与 `transform` 属性完全相同。

|  |  |
| --- | --- |
| 值 | **`<transform-list>`** |
| 默认值 | *无* |
| 动画性 | 有 |

变换函数
----

`transform` 属性的 `<transform-list>` 可以使用以下所有的变换函数

**警告：** 根据规范，你还应该能够使用 CSS 变换函数。但是，这不能保证兼容性。

### 矩阵

`matrix(<a> <b> <c> <d> <e> <f>)` 变换函数以六个值的变换矩阵形式指定变换。`matrix(a,b,c,d,e,f)` 等同于应用变换矩阵：

(

a

c

e

b

d

f

0

0

1

)

\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}

它通过以下矩阵等式将坐标从先前的坐标系映射到新的坐标系：

(

x

newCoordSys

y

newCoordSys

1

)

=

(

a

c

e

b

d

f

0

0

1

)

(

x

prevCoordSys

y

prevCoordSys

1

)

=

(

a

x

prevCoordSys

+
c

y

prevCoordSys

+
e

b

x

prevCoordSys

+
d

y

prevCoordSys

+
f

1

)

 \begin{pmatrix} x\_{\mathrm{newCoordSys}} \\ y\_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x\_{\mathrm{prevCoordSys}} \\ y\_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x\_{\mathrm{prevCoordSys}} + c y\_{\mathrm{prevCoordSys}} + e \\ b x\_{\mathrm{prevCoordSys}} + d y\_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix}

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="20" fill="green" />

  <!--
 在下面的示例中，我们应用矩阵：
 [a c e] [3 -1 30]
 [b d f] => [1 3 40]
 [0 0 1] [0 0 1]

 矩形变换如下：

 左上角：oldX=10 oldY=10
 newX = a \* oldX + c \* oldY + e = 3 \* 10 - 1 \* 10 + 30 = 50
 newY = b \* oldX + d \* oldY + f = 1 \* 10 + 3 \* 10 + 40 = 80

 右上角：oldX=40 oldY=10
 newX = a \* oldX + c \* oldY + e = 3 \* 40 - 1 \* 10 + 30 = 140
 newY = b \* oldX + d \* oldY + f = 1 \* 40 + 3 \* 10 + 40 = 110

 左下角：oldX=10 oldY=30
 newX = a \* oldX + c \* oldY + e = 3 \* 10 - 1 \* 30 + 30 = 30
 newY = b \* oldX + d \* oldY + f = 1 \* 10 + 3 \* 30 + 40 = 140

 右下角：oldX=40 oldY=30
 newX = a \* oldX + c \* oldY + e = 3 \* 40 - 1 \* 30 + 30 = 120
 newY = b \* oldX + d \* oldY + f = 1 \* 40 + 3 \* 30 + 40 = 170
 -->
  <rect
 x="10"
 y="10"
 width="30"
 height="20"
 fill="red"
 transform="matrix(3 1 -1 3 30 40)" />
</svg>
```

### 平移

`translate(<x> [<y>])` 变换函数将对象移动 `x` 和 `y`。如果没有提供 `y`，那么其默认为 `0`。

换而言之：
```

xnew = xold + <x>
ynew = yold + <y>
```

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 未经平移 -->
  <rect x="5" y="5" width="40" height="40" fill="green" />

  <!-- 水平平移 -->
  <rect
 x="5"
 y="5"
 width="40"
 height="40"
 fill="blue"
 transform="translate(50)" />

  <!-- 垂直平移 -->
  <rect
 x="5"
 y="5"
 width="40"
 height="40"
 fill="red"
 transform="translate(0 50)" />

  <!-- 水平和垂直平移 -->
  <rect
 x="5"
 y="5"
 width="40"
 height="40"
 fill="yellow"
 transform="translate(50 50)" />
</svg>
```

### 缩放

`scale(<x> [<y>])` 变换函数指定一个按 `x` 和 `y` 进行缩放的操作。如果没有提供 `y`，那么假定其等同于 `x`。

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 等比缩放 -->
  <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />

  <!-- 垂直缩放 -->
  <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1, 4)" />

  <!-- 水平缩放 -->
  <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4, 1)" />

  <!-- 无缩放 -->
  <circle cx="0" cy="0" r="10" fill="black" />
</svg>
```

### 旋转

`rotate(<a> [<x> <y>])` 变换函数指定一个围绕给定点旋转 `a` 度的操作。如果没有提供可选参数 `x` 和 `y`，那么默认绕当前用户坐标系的原点旋转。否则，就以 `(x,y)` 为原点进行旋转。

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="10" height="10" />

  <!-- 绕 0,0 点旋转 -->
  <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />

  <!-- 绕 10,10 点旋转 -->
  <rect
 x="0"
 y="0"
 width="10"
 height="10"
 fill="green"
 transform="rotate(100, 10, 10)" />
</svg>
```

### 倾斜 X

`skewX(<a>)` 变换函数指定沿 `x` 轴倾斜 `a` 度的倾斜变换。

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="-3" y="-3" width="6" height="6" />

  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
</svg>
```

### 倾斜 Y

`skewY(<a>)` 变换函数指定了沿 `y` 轴倾斜 `a` 度的倾斜变换。

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="-3" y="-3" width="6" height="6" />

  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
</svg>
```

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # svg-transform |
| Scalable Vector Graphics (SVG) 2 # TransformProperty |


in - SVG：可缩放矢量图形

in
==

in 属性标识输入的原语。

其值可以是下面六种关键词中的一种，或者是一个字符串匹配在同一个`<filter>`元素中前面的原语的`result` 属性值。如果没有提供值并且这是 filter 中第一个原语，那么原语将相当于使用 SourceGraphic 作为输入值。如果没有提供值并且这不是第一个原语，那么原语将使用前面原语的 result 属性值作为输入。

如果`result`的值在同一个`<filter>`中出现多次，那么将使用前面的距离使用该`result`值的原语最近的该 result 值的原语作为输入。

除了 SourceGraphic 和\*\*<filter-primitive-reference> (引用原语)\*\* , 关键词都没有在现代浏览器中实现.(译者注:SourceAlpha 也被现代浏览器支持)

Usage context
-------------

| Categories | None |
| --- | --- |
| Value | `SourceGraphic` | `SourceAlpha` | `BackgroundImage` | `BackgroundAlpha` | `FillPaint` | `StrokePaint` | <filter-primitive-reference> |
| Animatable | Yes |

SourceGraphic

该关键词表示图形元素自身将作为`<filter>`原语的原始输入。

SourceAlpha

该关键词表示图形元素自身将作为`<filter>`原语的原始输入。SourceAlpha 与 SourceGraphic 具有相同的规则除了 SourceAlpha 只使用元素的透明度。

BackgroundImage

该关键词表示 filter 元素当前底下的区域的图形快照将被调用。

BackgroundAlpha

跟 BackgroundImage 相同除了只使用透明度。

FillPaint

This keyword represents the value of the `fill` property on the target element for the filter effect. In many cases, the `FillPaint` is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.

StrokePaint

This keyword represents the value of the `stroke` property on the target element for the filter effect. In many cases, the `StrokePaint` is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.

BackgroundImage 的解决方案
---------------------

我们需要使用 `<feimage>` 原语引入一个图像混合到过滤器本身内来替代使用"BackgroundImage".

### HTML

```html
<div style="width: 420px; height: 220px;">
  <svg
 style="width:200px; height:200px; display: inline;"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <filter id="backgroundMultiply">
        <!-- This will not work. -->
        <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply" />
      </filter>
    </defs>
    <image
 xlink:href="https://developer.mozilla.org/files/6457/mdn\_logo\_only\_color.png"
 x="10%"
 y="10%"
 width="80%"
 height="80%" />
    <circle
 cx="50%"
 cy="40%"
 r="40%"
 fill="#c00"
 style="filter:url(#backgroundMultiply);" />
  </svg>

  <svg
 style="width:200px; height:200px; display: inline;"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <filter id="imageMultiply">
        <!-- This is a workaround. -->
        <feImage
 xlink:href="https://developer.mozilla.org/files/6457/mdn\_logo\_only\_color.png"
 x="10%"
 y="10%"
 width="80%"
 height="80%" />
        <feBlend in2="SourceGraphic" mode="multiply" />
      </filter>
    </defs>
    <circle
 cx="50%"
 cy="40%"
 r="40%"
 fill="#c00"
 style="filter:url(#imageMultiply);" />
  </svg>
</div>
```

### 效果

元素
--

下列元素可以使用该属性

* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feGaussianBlur>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-in |


fr - SVG：可缩放矢量图形

fr
==

对于 `<radialGradient>` 元素，此属性用来定义径向渐变的焦点的半径。若该属性没有被定义，默认值为 0%。

用法
--

| 类别 | 无 |
| --- | --- |
| 值 | <length> |
| 可变性 | 非 |
| 规范文档 | SVG 1.1 (2nd Edition): The radialGradient element |

示例
--

```html
<?xml version="1.0" standalone="no"?>

<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient
 id="Gradient"
 cx="0.5"
 cy="0.5"
 r="0.5"
 fx="0.35"
 fy="0.35"
 fr="5%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>

  <rect
 x="10"
 y="10"
 rx="15"
 ry="15"
 width="100"
 height="100"
 fill="url(#Gradient)"
 stroke="black"
 stroke-width="2" />

  <circle
 cx="60"
 cy="60"
 r="50"
 fill="transparent"
 stroke="white"
 stroke-width="2" />
  <circle cx="35" cy="35" r="2" fill="white" stroke="white" />
  <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">
    (fx,fy)
  </text>
  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">
    (cx,cy)
  </text>
</svg>
```

元素
--

下列元素可以使用 `fr` 属性：

* `<radialGradient>`
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementFRAttribute |


primitiveUnits - SVG：可缩放矢量图形

primitiveUnits
==============

`primitiveUnits` 属性为过滤器原语和定义过滤器原语子域中的各种各样的长度单位指定坐标系统。

如果 primitiveUnits 属性未指定，那么效果就如同指定值为 userSpaceOnUse 的效果是一样的。

Usage context
-------------

| Categories | *None* |
| --- | --- |
| Value | **`userSpaceOnUse`** | `objectBoundingBox` |
| Animatable | Yes |

userSpaceOnUse

当`<filter>`元素使用该值的时候，过滤器中定义的任意长度的值都基于当前用户坐标系统 (例如通过`filter`属性引用该`<filter>`元素的元素所在的用户坐标系统).

objectBoundingBox

在 filter 中定义的任意长度值表示引用该 filter 的元素的包围盒的分数或百分比。

Examples
--------

Elements
--------

下列元素可以使用 primitiveUnits 属性：

* `<filter>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-primitiveunits |


mode - SVG：可缩放矢量图形

mode
====

**`mode`** 属性定义了 `<feBlend>` 滤镜原语上的混合模式。

可在以下 SVG 元素中使用该属性：

* `<feBlend>`
示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="blending1" x="0" y="0" width="100%" height="100%">
    <feFlood
 result="floodFill"
 x="0"
 y="0"
 width="100%"
 height="100%"
 flood-color="seagreen"
 flood-opacity="1" />
    <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />
  </filter>
  <filter id="blending2" x="0" y="0" width="100%" height="100%">
    <feFlood
 result="floodFill"
 x="0"
 y="0"
 width="100%"
 height="100%"
 flood-color="seagreen"
 flood-opacity="1" />
    <feBlend in="SourceGraphic" in2="floodFill" mode="color-dodge" />
  </filter>

  <image
 xlink:href="mdn\_logo\_only\_color.png"
 width="200"
 height="200"
 style="filter:url(#blending1);" />
  <image
 xlink:href="mdn\_logo\_only\_color.png"
 width="200"
 height="200"
 style="filter:url(#blending2); transform:translateX(220px);" />
</svg>
```

用法
--

|  |  |
| --- | --- |
| 值 | `<blend-mode>` |
| 默认值 | `normal` |
| 可变性 | 是 |

有关值的说明，请参阅 `<blend-mode>`。

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feblend-mode |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


origin - SVG：可缩放矢量图形

origin
======

该 **`origin`** 属性指定动画的运动原点。在 SVG 中无效。

只有一个元素正在使用此属性：`<animateMotion>`

总体注释
----

| 值 | `default` |
| --- | --- |
| 默认值 | `default` |
| 可动画的 | 没有 |

规范
--

| Specification |
| --- |
| SVG Animations Level 2 # OriginAttribute |

参见
--

* `origin`SMIL 动画规范中的定义


SVG 样式属性 - SVG：可缩放矢量图形

SVG 样式属性
========

SVG 样式属性是所有可以在任何 SVG 元素上指定以应用 CSS 样式效果的属性。

* `class`
* `style`
属性
--

`class (en-US)`

给一个元素分配一个类名称或者设置类名。它跟 HTML 中的 `class` 属性具有同样的功能。*值*: 任何可用的 ID 字符；*动画性*：**是**

`style`

它指定元素的样式信息。它跟 HTML 中 `style`属性具有相同的功能。*值*：任何可用的 ID 字符；*动画性*：**否**

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


shape-rendering - SVG：可缩放矢量图形

shape-rendering
===============

指定 SVG 元素 `<path>` 的渲染模式。

使用参考
----

| 类型 | 外观属性 |
| --- | --- |
| 值 | **auto** | optimizeSpeed | crispEdges | geometricPrecision | inherit |
| 可运动 | Yes |

auto

让浏览器自动权衡渲染速度、平滑度、精确度。默认是倾向于精确度而非平滑度和速度。

optimizeSpeed

偏向渲染速度，浏览器会关闭反锯齿模式。（速度）

crispEdges

偏向更加清晰锐利的边缘的渲染。浏览器在渲染的时候会关闭反锯齿模式，且会让线条的位置和宽度和显示器边缘对齐。（锐度）

geometricPrecision

偏向渲染平滑的曲线。（平滑）

示例
--

```xml
<svg xmlns="http://www.w3.org/2000/svg"
 version="1.1" width="100" height="100"
 shape-rendering="optimizeSpeed"><!-- 这个示例在 Firefox 下看区别更明显 -->
```

| shape-rendering: geometricPrecision:
 shape-rendering:geometricPrecision | shape-rendering: optimizeSpeed
 shape-rendering:optimizeSpeed |
| --- | --- |

同样，你也可以在 CSS 样式中使用 shape-rendering:

```xml
<svg xmlns="http://www.w3.org/2000/svg"
 version="1.1" width="100" height="100"
 style="shape-rendering:optimizeSpeed;">
```

关联元素
----

下面的元素可以使用这个属性

* Shape elements »
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # ShapeRendering |


stroke-opacity - SVG：可缩放矢量图形

stroke-opacity
==============

`stroke-opacity` 属性指定了当前对象的轮廓的不透明度。它的默认值是 **1**。

作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | <opacity-value> | inherit |
| 可变性 | Yes |

<opacity-value>

在当前对象的轮廓上用该涂色操作的不透明度。任何超出 0.0 到 1.0 范围的值都会被压回这个范围（0.0 表示完全透明，1.0 表示完全不透明）。

示例
--

### SVG

```html
<svg width="120px" height="120px" viewBox="0 0 120 120">
  <rect x="10" y="10" width="100" height="100" />
</svg>
```

### CSS

```css
rect {
  fill: #b4da55;
  stroke: #000;
  stroke-width: 10px;
  stroke-opacity: 0.3;
}
```

### 结果

元素
--

下列元素可以使用`stroke-opacity`属性：

* 形状元素 »
* 文本内容元素 »
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeOpacity |

参见
--

* `fill-opacity`
* `opacity`


fill - SVG：可缩放矢量图形

fill
====

`fill` 属性根据它的使用环境，拥有两个意义。

默认地，当动画元素结束时，目标元素的外观属性不再应用该效果。在动画元素结束后，要还保持这个动画的的值，就需要用到`fill`属性。

对于形状元素和文本，`fill`属性是外观属性，用来定义给定图形元素内部的颜色。哪一块算是“内部”取决于形状本身以及`fill-rule` 属性的值。作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。

用法
--

### 对动画元素

| 类别 | 动画定时属性 |
| --- | --- |
| 值 | **remove** | freeze |
| 可变性 | No |
| 规范文档 | SVG 1.1 (2nd Edition) |

remove（默认值）

在动画的激活持续时间结束后，动画效果会移除（不再应用）。在动画的激活结束后，动画不再对目标元素有影响（除非动画重新开始）。

freeze

在动画激活持续时间结束后，文档持续时间的剩余时间里（或者直到动画重新开始）动画效果会“冻结”着。

### 对形状元素

| 类别 | 外观属性 |
| --- | --- |
| 值 | <paint> |
| 可变性 | Yes |
| 规范文档 | SVG 1.1 (2nd Edition) |

示例
--

元素
--

下列元素可以使用`fill`属性：

* 动画元素 »
* 形状元素 »
* 文本内容元素 »


begin - SVG：可缩放矢量图形

begin
=====

这个属性定义了动画何时开始。

这个属性值是一个分号分隔的数列值。SMIL 规范的"Evaluation of begin and end time lists"章节详细解释了开始时间数列。每个单独的值可以是下述之一：`<offset-value>`、`<syncbase-value>`、`<event-value>`、`<repeat-value>`、`<accessKey-value>`、`<wallclock-sync-value>`或者关键词`indefinite`。

用法
--

| 类别 | 动画定时属性 |
| --- | --- |
| 值 | <begin-value-list> |
| 可变性 | No |
| 规范文档 | SVG 1.1 (2nd Edition) |

`<begin-value-list>`中的每一个值可以是下述之一：

<offset-value>

一个时钟值代表了一个相对于 SVG 文档开头的时间点，SVG 文档开头通常是指 load 事件或者 DOMReady 事件触发的时间点。负值是合法的。

<syncbase-value>

描述一个*syncbase*以及一个可选的来自于*syncbase*的时偏移。元素的动画开始时间被定义为相对于另一个动画的开头或者激活结束。一个 ID 及其后面跟着的 .begin 或 .end 构成了一个 syncbase，ID 引用到另一个动画元素，.begin 或 .end 用来确定到底是与引用的动画元素的动画开头同步、还是与引用的动画元素的动画激活结束同步。

<event-value>

描述了一个事件以及一个可选的时偏移，用来确定动画开始的时点。触发指定事件的时点，被定义为动画开始的时点。一个元素 ID 及其后面跟着的一个点及其后面跟着事件名构成了一个合法的 event-value 值。事件名必须是元素支持的事件名。全部合法的事件（不一定是所有元素都支持的事件）包括这些：focusin、focusout、`activate`、`click`、`mousedown`、`mouseup`、`mouseover`、`mousemove`、`mouseout`、`DOMSubtreeModified`、`DOMNodeInserted`、`DOMNodeRemoved`、`DOMNodeRemovedFromDocument`、`DOMNodeInsertedIntoDocument`、`DOMAttrModified`、`DOMCharacterDataModified`、`SVGLoad`、`SVGUnload`、`SVGAbort`、`SVGError`、`SVGResize`、`SVGScroll`、`SVGZoom`、`beginEvent`、`endEvent` 和 `repeatEvent`。

<repeat-value>

描述了一个符合条件重复事件。repeat 事件发生了指定次数的时间点，被定义为元素动画的开始时间点。

<accessKey-value>

描述了一个用来触发动画的访问键。当用户按下指定的键时，元素动画就开始了。

<wallclock-sync-value>

描述了一个动画开始时间，是真实世界钟的时点。时点的句法遵守 ISO8601 定义的句法。

示例
--

### Offset 示例

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="100"
 begin="0s"
 dur="8s"
 fill="freeze" />
  </rect>

  <rect x="35" y="60" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="75"
 begin="2s"
 dur="6s"
 fill="freeze" />
  </rect>

  <rect x="60" y="85" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="50"
 begin="4s"
 dur="4s"
 fill="freeze" />
  </rect>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>
```

begin-1-offset.svg

### Syncbase 示例

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="50"
 id="first"
 begin="0s;third.end"
 dur="4s" />
  </rect>

  <rect x="60" y="60" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="25"
 id="second"
 begin="first.end"
 dur="2s" />
  </rect>

  <rect x="85" y="85" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="25"
 id="third"
 begin="second.end"
 dur="2s" />
  </rect>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>
```

begin-2-syncbase.svg

### Event 示例

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangle -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 from="0"
 to="100"
 begin="startButton.click"
 dur="8s"
 fill="freeze" />
  </rect>

  <!-- trigger -->
  <rect
 id="startButton"
 style="cursor:pointer;"
 x="19.5"
 y="62.5"
 rx="5"
 height="25"
 width="80"
 fill="#EFEFEF"
 stroke="black"
 stroke-width="1" />

  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Click me.
  </text>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>
```

begin-3-event.svg

### Repeat 示例

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangle -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 from="0"
 to="100"
 id="myLoop"
 begin="0s;myLoop.end"
 dur="4s"
 repeatCount="3" />

    <set
 attributeType="CSS"
 attributeName="fill"
 to="green"
 begin="myLoop.begin" />

    <set
 attributeType="CSS"
 attributeName="fill"
 to="gold"
 begin="myLoop.repeat(1)" />

    <set
 attributeType="CSS"
 attributeName="fill"
 to="red"
 begin="myLoop.repeat(2)" />
  </rect>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">1s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">2s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">3s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">4s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>
```

begin-4-repeat.svg

### Accesskey 示例

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 from="0"
 to="100"
 begin="accessKey(s)"
 dur="8s"
 fill="freeze" />
  </rect>

  <!-- trigger -->
  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Hit the "s" key
  </text>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>
```

*该示例被嵌入到了一个 iFrame 中。如果你想要激活按键事件，你必须先点击它。*

begin-5-accesskey.svg

规范
--

| Specification |
| --- |
| SVG Animations Level 2 # BeginAttribute |


id - SVG：可缩放矢量图形

id
==

**`id`** 属性给予元素一个唯一名称。

所有元素均可使用该属性。

示例
--

```html
<svg
 width="120"
 height="120"
 viewPort="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
 <![CDATA[
 #smallRect {
 stroke: #000066;
 fill: #00cc00;
 }
 ]]>
 </style>

  <rect id="smallRect" x="10" y="10" width="100" height="100" />
</svg>
```

用法说明
----

| 值 | <id> |
| --- | --- |
| 默认值 | *None* |
| 可动画 | No |

<id>

指定元素的 ID。该 ID 在节点树中必须是唯一的，不能为空字符串，并且不能包含任何空格字符。

**备注：** 应当避免使用会被解析为 SVG 视图规范的 `id` 值（如 `MyDrawing.svg#svgView(viewBox(0,200,1000,1000))`），或被解析为用作 URL 目标片段的基本媒体片段的 `id` 值。

该属性取值必须在 XML 文档中有效。独立的 SVG 文档使用 XML 1.0 语法，该语法指定有效的 ID 仅包含指定的字符（字母，数字和一些标点符号），开头不能是数字，点（.）字符或 连字符减号（-）。

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # Core.attrib |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参考
--

* HTML `id`
* `class (en-US)`


stroke-linejoin - SVG：可缩放矢量图形

stroke-linejoin
===============

**`stroke-linejoin`** 属性指明路径的转角处使用的形状或者绘制的基础形状。

**备注：** 作为表现属性，`stroke-linejoin` 能被用做 CSS 属性。

作为表现属性，该属性能被应用到任何元素，但只对以下元素有效：

* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg">
  <!--
 Upper left path:
 Effect of the "miter" value
 -->
  <path
 d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="miter" />

  <!--
 Center path:
 Effect of the "round" value
 -->
  <path
 d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="round" />

  <!--
 Upper right path:
 Effect of the "bevel" value
 -->
  <path
 d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="bevel" />

  <!--
 Bottom left path:
 Effect of the "miter-clip" value
 with fallback to "miter" if not supported.
 -->
  <path
 d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="miter-clip" />

  <!--
 Bottom right path:
 Effect of the "arcs" value
 with fallback to "miter" if not supported.
 -->
  <path
 d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="arcs" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <g id="highlight">
    <path
 d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="pink"
 fill="none"
 stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5.5" r="0.05" fill="pink" />
  </g>
  <use xlink:href="#highlight" x="6" />
  <use xlink:href="#highlight" x="12" />
  <use xlink:href="#highlight" x="2" y="6" />
  <use xlink:href="#highlight" x="8" y="6" />
</svg>
```

用法
--

| 值 | `arcs` | `bevel` |`miter` | `miter-clip` | `round` |
| --- | --- |
| 默认值 | `miter` |
| 可动画性 | Yes |

### arcs

**备注：** `arcs` 来自于 SVG2 但尚未被广泛支持，详情参见 浏览器兼容性

`arcs` 值指示将使用圆弧拐角来连接路径线段。通过用与连接点的外边缘具有相同曲率的圆弧在连接点处延伸笔触的外边缘来形成弧形。

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "arcs" value -->
  <path
 d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="arcs" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <g id="p">
    <path
 d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
 stroke="pink"
 fill="none"
 stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

### bevel

The `bevel` 用斜角连接路径段。

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "bevel" value -->
  <path
 d="M1,5 l2,-3 l2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="bevel" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <g id="p">
    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

### miter

The `miter` 用尖角连接路径段。通过在路径段的切线处延伸笔触的外边缘直到它们相交，来形成拐角。

**备注：** 如果超出了`stroke-miterlimit`，则会退回到 `bevel`。

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "miter" value -->
  <path
 d="M1,5 l2,-3 l2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="miter" />

  <!-- Effect of the "miter" value on a sharp angle
 where de default miter limit is exceeded -->
  <path
 d="M7,5 l0.75,-3 l0.75,3"
 stroke="black"
 fill="none"
 stroke-linejoin="miter" />

  <!-- the following red dotted line show where
 the miter value falls back to the bevel value -->
  <path
 d="M0,0 h10"
 stroke="red"
 stroke-dasharray="0.05"
 stroke-width="0.025" />

  <!-- the following pink lines highlight the position of the path for each stroke -->
  <g>
    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />

    <path
 d="M7,5 l0.75,-3 l0.75,3"
 stroke="pink"
 fill="none"
 stroke-width="0.025" />
    <circle cx="7" cy="5" r="0.05" fill="pink" />
    <circle cx="7.75" cy="2" r="0.05" fill="pink" />
    <circle cx="8.5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

### miter-clip

**备注：** `miter-clip` 来自于 SVG2 但尚未被广泛支持，详情参见 浏览器兼容性

The `miter-clip` 用尖角连接路径段。通过在路径段的切线处延伸笔触的外边缘直到它们相交，来形成拐角。

如果超过了`stroke-miterlimit`，则斜切将被裁剪为等于`stroke-miterlimit`值乘以路径段相交处的笔划宽度的一半的距离。在非常尖锐的连接或动画的情况下，这提供了比 `mitt` 更好的渲染效果。

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "miter-clip" value -->
  <path
 d="M1,5 l2,-3 l2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="miter-clip" />

  <!-- Effect of the "miter-clip" value on a sharp angle
 where de default miter limit is exceeded -->
  <path
 d="M7,5 l0.75,-3 l0.75,3"
 stroke="black"
 fill="none"
 stroke-linejoin="miter-clip" />

  <!-- the following red dotted line show where the clip should happen -->
  <path
 d="M0,0 h10"
 stroke="red"
 stroke-dasharray="0.05"
 stroke-width="0.025" />

  <!-- the following pink lines highlight the position of the path for each stroke -->
  <g>
    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />

    <path
 d="M7,5 l0.75,-3 l0.75,3"
 stroke="pink"
 fill="none"
 stroke-width="0.025" />
    <circle cx="7" cy="5" r="0.05" fill="pink" />
    <circle cx="7.75" cy="2" r="0.05" fill="pink" />
    <circle cx="8.5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

### round

`round` 使用圆角连接路径片段。

#### 示例
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "round" value -->
  <path
 d="M1,5 l2,-3 l2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="round" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <g id="p">
    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LineJoin |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


accumulate - SVG：可缩放矢量图形

accumulate
==========

该属性控制了动画是否是累加的。

在原来的结果的基础上重复动画的时候，它通常很有用，每一次循环都累加。这个属性告诉动画是否是每次循环，前一个动画属性值要加上去。

用法
--

| 类别 | 动画累加属性 |
| --- | --- |
| 值 | **none** | sum |
| 可变性 | No |
| 规范文档 | SVG 1.1 (2nd Edition) |

sum

指定第一次循环后的每次循环建立在上次循环的终值上。

none

指定重复循环是不累加的。这是默认值。

示例
--

元素
--

以下元素可以使用`additive`属性：

* `<animate>`
* `<animateColor>`
* `<animateMotion>`
* `<animateTransform>`
规范
--

| Specification |
| --- |
| SVG Animations Level 2 # AccumulateAttribute |


fx - SVG：可缩放矢量图形

fx
==

对于 `<radialGradient>` 元素，此属性用来定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。

用法
--

| 类别 | 无 |
| --- | --- |
| 值 | <coordinate> |
| 可变性 | 非 |
| 规范文档 | SVG 1.1 (2nd Edition): The radialGradient element |

示例
--

```html
<?xml version="1.0" standalone="no"?>

<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>

  <rect
 x="10"
 y="10"
 rx="15"
 ry="15"
 width="100"
 height="100"
 fill="url(#Gradient)"
 stroke="black"
 stroke-width="2" />

  <circle
 cx="60"
 cy="60"
 r="50"
 fill="transparent"
 stroke="white"
 stroke-width="2" />
  <circle cx="35" cy="35" r="2" fill="white" stroke="white" />
  <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">
    (fx,fy)
  </text>
  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">
    (cx,cy)
  </text>
</svg>
```

元素
--

下列元素可以使用 `fx` 属性：

* `<radialGradient>`
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementFXAttribute |


marker-start - SVG：可缩放矢量图形

marker-start
============

**`marker-start`** 属性将在给定形状的起始顶点绘制的箭头或者多边形标记

对于除 SVG 的 polyline 和 path 元素之外的所有形状元素，最后的一个顶点与第一个顶点相同。在这种情况下，如果 SVG 的`marker-start`属性和 `marker-end` 的值都不是 `none` ，然后再最后一个顶点渲染两个图标。对于一个 `<path>` 元素，对于每个封闭的子路径，他的最后一个顶点都与第一个顶点相同。 `marker-end` 仅在路径数据的起始顶点上呈现。

\*\*Note:\*\*作为一个图像属性， `marker-start` 可以用作 CSS 属性。

作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效：`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, 和`<rect>`

示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="triangle"
 viewBox="0 0 10 10"
 refX="1"
 refY="5"
 markerUnits="strokeWidth"
 markerWidth="10"
 markerHeight="10"
 orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00" />
    </marker>
  </defs>
  <polyline
 fill="none"
 stroke="black"
 points="20,100 40,60 70,80 100,20"
 marker-start="url(#triangle)" />
</svg>
```

使用说明
----

| 值 | `none` | `<marker-ref>` |
| --- | --- |
| 默认值 | `none` |
| 可用作与动画 | 是 |

`none`

表示将不会在起点绘制任何符号。

`<marker-ref>`

这个值表示的是对 `<marker>` 元素的引用，将在起点绘制该元素.。如果引用无效，将不会绘制任何东西。

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # VertexMarkerProperties |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

另见
--

* `<marker>`
* `marker-end`
* `marker-mid (en-US)`


style - SVG：可缩放矢量图形

style
=====

**`style`** 属性指定了指定其元素的样式信息。它的功能与 HTML 中的 style 属性相同。

使用环境
----

| Categories | Presentation attribute |
| --- | --- |
| Value | <style> |
| Animatable | No |

<style>

样式数据的语法取决于样式表语言。默认情况下，如果未指定 `contentStyleType`，样式表语言为 CSS。

示例
--

以下示例展示了使用 CSS 作为样式表语言来使用 style 属性，为一个矩形框添加样式。

```html
<svg version="1.1" viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg">
  <rect
 height="300"
 width="600"
 x="200"
 y="100"
 style="fill: red; stroke: blue; stroke-width: 3" />
</svg>
```

元素
--

以下元素可以使用 style 属性

* Container elements »
* Filter primitive elements »
* Gradient elements »
* Graphics elements »
* Structural elements »
* Text content elements »
* `<clipPath>`
* `<filter>`
* `<font>`
* `<foreignObject>`
* `<glyphRef>`
* `<stop>`
* `<glyph>`
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # ElementSpecificStyling |

相关
--

* `<style>`


points - SVG：可缩放矢量图形

points
======

`points` 属性定义了用来画一个 `<polyline>` 元素或画一个 `<polygon>` 元素的点的数列。

每个点用用户坐标系统中的一个 X 坐标和 Y 坐标定义。用逗号分开每个点的 X 和 Y 坐标标记是一个常用实践（但是并非必要），使用空间标注每个点。

用法
--

| 类别 | 无 |
| --- | --- |
| 值 | <list-of-points> |
| 可变性 | Yes |

示例
--

```xml
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 250,150 200,110"
 style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
```

元素
--

以下元素可以使用`points`属性：

* `<polyline>`
* `<polygon>`
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PolygonElementPointsAttribute |
| Scalable Vector Graphics (SVG) 2 # PolylineElementPointsAttribute |


preserveAlpha - SVG：可缩放矢量图形

preserveAlpha
=============

`preserveAlpha` 属性表示`<feConvolveMatrix>` 元素怎样处透明度。

取值为 `false` 表示 feConvolveMatrix 元素将应用在包括透明度通道的所有的通道。这是默认的选项。

取值为 `true` 表示 feConvolveMatrix 仅应用在颜色通道。

用法
--

| 类别 | None |
| --- | --- |
| 值 | `true` | `false` |
| 可变性 | Yes |

示例
--

元素
--

下列元素可以使用 `preserveAlpha` 属性

* `<feConvolveMatrix>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feconvolvematrix-preservealpha |


stroke-miterlimit - SVG：可缩放矢量图形

stroke-miterlimit
=================

如果两条线交汇在一起形成一个尖角，而且属性 `stroke-linejoin` 指定了 `miter`，斜接有可能扩展到远远超过出路径轮廓线的线宽。属性 `stroke-miterlimit` 对斜接长度和 `stroke-width` 的比率强加了一个极限。当极限到达时，交汇处由斜接变成倒角。

斜接长度（斜接的外尖角和内夹角之间的距离）与 `stroke-width` 的比率，直接跟两条线之间的角度（θ）有关，用如下方程表示：
```

miterLength / stroke-width = 1 / sin ( theta / 2 )
```

举个例子，一个极限为 1.414 斜接，θ 小于 90 度的把斜接会转换成倒角，一个极限为 4.0 的斜接，θ 小于 29 度的斜接会转换成倒角，一个极限为 10.0 的斜接，θ 小于大约 11.5 度的斜接会转换成倒角。

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | <miterlimit> | inherit |
| 初始值 | 4 |
| 可动性 | Yes |

<miterlimit>

对斜角长度与`stroke-width`的比率的限制。<miterlimit>的值必须是一个大于或等于 1 的<number>。

示例
--

元素
--

下列元素可以使用`stroke-miterlimit`属性：

* 形状元素 »
* 文本内容元素 »
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeMiterlimitProperty |


text-decoration - SVG：可缩放矢量图形

text-decoration
===============

`text-decoration` 属性的作用跟 `CSS Text Decoration` 特性差不多，当然除了它是一个 CSS 属性。浏览 `CSS Text Decoration` 获取进一步的信息。

使用环境
----

| 分类 | 外观属性 |
| --- | --- |
| 值 | none | underline | overline | line-through | blink | **inherit** |
| 是否可用于动画 | Yes |

元素
--
```

后代元素可以继承 text-decoration 这个属性
```

* Text content elements »
规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-property |
| Scalable Vector Graphics (SVG) 2 # TextDecorationProperties |

相关
--

* `CSS Text Decoration`


rx - SVG：可缩放矢量图形

rx
==

**`rx`** 属性用于定义水平轴向的圆角半径尺寸。

`<ellipse>` 和 `<rect>` 两个基本图形使用了这个属性。

示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="50" cy="50" rx="0" ry="25" />
  <ellipse cx="150" cy="50" rx="25" ry="25" />
  <ellipse cx="250" cy="50" rx="50" ry="25" />

  <rect x="20" y="120" width="60" height="60" rx="0" ry="15" />
  <rect x="120" y="120" width="60" height="60" rx="15" ry="15" />
  <rect x="220" y="120" width="60" height="60" rx="150" ry="15" />
</svg>
```

椭圆
--

对于 `<ellipse>`，`rx` 属性定义了水平方向的半径尺寸。如果使用了负值或者零，那么椭圆就不会被绘制。

| 取值 | **<length>** | **<percentage>** | `auto` |
| --- | --- |
| 默认值 | `auto` |
| 是否支持动画 | 是 |

**注释：** 从 SVG2 开始， `rx` 是一个几何属性，也就是说，这个属性也可以用作椭圆的 CSS 属性。

矩形
--

对于 `<rect>`，`rx` 定义了水平方向的圆角尺寸。

`rx` 属性的实际效果取决于矩形的 `ry (en-US)` 属性和宽度：

* 如果你为 `rx` 属性指定了正确的值，但是没有定义 `ry (en-US)` 属性的值，那么浏览器会让 `ry (en-US)` 取 `rx` 属性被指定的相等的值。（反之亦然）
* 如果 `rx` 和 `ry (en-US)` 都没有被正确的赋值，那么浏览器会绘制一个带有直角尖角的矩形。
* `rx` 属性的有效值为矩形宽度的一半（即，如果为 `rx` 指定的值大于矩形宽度的一半，那么浏览器会视为 `rx` 的值为矩形宽度的一半）。

| 取值 | **<length>** | **<percentage>** | `auto` |
| --- | --- |
| 缺省值 | `auto` |
| 是否支持动画 | 是 |

**注释：** 从 SVG2 开始，`rx` 是一个几何属性，也就是说，这个属性也可以用作矩形（rect）的 CSS 属性。

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RX |


result - SVG：可缩放矢量图形

result
======

属性 `result` 定义了滤镜的分配名。如果提供了它，则经过滤镜处理的结果即图形可以再次滤镜处理，在后继滤镜（即另一个 `<filter>` 元素）上通过一个 `in` 属性引用之前的结果。如果没有提供 `result` 值，而且如果下一个滤镜也没有提供 `in` 属性值，则输出只可作为下一个滤镜的隐式输入。

用法
--

| 类别 | 无 |
| --- | --- |
| 值 | <filter-primitive-reference> |
| 可变性 | Yes |

注意`<filter-primitive-reference>`不是一个 XML ID，换句话说，`<filter-primitive-reference>`只在给定的`<filter>`元素内部有意义，因此只有局部范围。在同一个`<filter>`元素内部，同一个`<filter-primitive-reference>`出现多次也是合法的。如果引用了，`<filter-primitive-reference>`将使用在给定结果前面、离给定结果最近的滤镜。

元素
--

下列元素可以使用`result`属性：

* 滤镜元素 »
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-result |


baseProfile - SVG：可缩放矢量图形

baseProfile
===========

`baseProfile` 特性描述了作者认为正确渲染内容所需要的最小的 SVG 语言概述。这个特性不会说明任何处理限制，可以把它看作是元数据。比如，这个特性的值可以被编辑工具用来在用户的修改超出所指定的基准概述范围时发出警告。

每个 SVG 概述应该为这个特性定义一个适合的文本。如果没有指定这个特性，效果就跟指定 `none` 一样。

使用背景
----

| 目录 | 无 |
| --- | --- |
| 值 | **none** | full| basic| tiny |
| 动画特性 | 无 |
| 规范文档 | SVG 1.1 (第二版) |

none

代表了最小的 SVG 语言配置，没有描述作者关于正确渲染内容的观点。

full

代表一个正常的概述，适用于 PC。

basic

代表一个轻量级的概述，适用于 PDA。

tiny

代表更轻量的概述，适用于手机。

例子
--

```html
<svg
 width="120"
 height="120"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 baseProfile="full">
  ...
</svg>
```

元素
--

以下元素会用到 `baseProfile` 特性

* `<svg>`


stroke-dasharray - SVG：可缩放矢量图形

stroke-dasharray
================

属性 `stroke-dasharray` 可控制用来描边的点划线的图案范式。

作为一个外观属性，它也可以直接用作一个 CSS 样式表内部的属性。

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | **none** | <dasharray> | inherit |
| 可变性 | Yes |

<dasharray>

它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，**5,3,2**等同于**5,3,2,5,3,2**。

示例
--

```html
<?xml version="1.0"?>
<svg
 width="200"
 height="200"
 viewPort="0 0 200 300"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg">
  <line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" />
  <line stroke-dasharray="5, 10" x1="10" y1="30" x2="190" y2="30" />
  <line stroke-dasharray="10, 5" x1="10" y1="50" x2="190" y2="50" />
  <line stroke-dasharray="5, 1" x1="10" y1="70" x2="190" y2="70" />
  <line stroke-dasharray="1, 5" x1="10" y1="90" x2="190" y2="90" />
  <line stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110" />
  <line stroke-dasharray="15, 10, 5" x1="10" y1="130" x2="190" y2="130" />
  <line stroke-dasharray="15, 10, 5, 10" x1="10" y1="150" x2="190" y2="150" />
  <line
 stroke-dasharray="15, 10, 5, 10, 15"
 x1="10"
 y1="170"
 x2="190"
 y2="170" />
  <line stroke-dasharray="5, 5, 1, 5" x1="10" y1="190" x2="190" y2="190" />

  <style>
 <![CDATA[
 line{
 stroke: black;
 stroke-width: 2;
 }
 ]]>
 </style>
</svg>
```

### 示例输出

元素
--

下列元素可以使用 `stroke-dasharray` 属性：

* 形状元素 »
* 文本内容元素 »
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeDashing |


clip-path - SVG：可缩放矢量图形

clip-path
=========

元素的表现属性 **`clip-path`** 为其定义或关联一条剪切路径。

**注意：**`clip-path` 是一个表现属性，可以作为 CSS 属性使用。

作为一种表现属性，`clip-path` 可以用于任何元素，不过效果最明显的是下列十九种元素：`<a>`, `<circle>`, `<clipPath>`, `<ellipse>`, `<g>`, `<glyph>`, `<image>`, `<line>`, `<marker>`, `<mask>`, `<path>`, `<pattern>`, `<polygon>`, `<polyline>`, `<rect>`, `<svg>`, `<symbol>`, `<text>`, `<use>`

示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <circle cx=".5" cy=".5" r=".5" />
  </clipPath>

  <!-- 左上：应用自定义的剪切路径 -->
  <rect
 x="1"
 y="1"
 width="8"
 height="8"
 stroke="green"
 clip-path="url(#myClip)" />

  <!-- 右上：应用 CSS 基本形状和 fill-box 几何。
 实质上和自定义剪切路径并把 clipPathUnits
 设成 objectBoundingBox 一样 -->
  <rect
 x="11"
 y="1"
 width="8"
 height="8"
 stroke="green"
 clip-path="circle() fill-box" />

  <!-- 左下 -->
  <rect
 x="1"
 y="11"
 width="8"
 height="8"
 stroke="green"
 clip-path="circle() stroke-box" />

  <!-- 右下：应用 CSS 基本形状和 view-box 几何。
 实质上和自定义剪切路径并把 clipPathUnits
 设成 userSpaceOnUse 一样 -->
  <rect
 x="11"
 y="11"
 width="8"
 height="8"
 stroke="green"
 clip-path="circle() view-box" />
</svg>
```

Usage notes
-----------

| 值 | `url()` | [ `<basic-shape>` || `<geometry-box>` ] | `none` |
| --- | --- |
| 默认值 | `none` |
| Animatable | 是 |

<geometry-box>

geometry-box 是应用 `<basic-shape>` 的额外信息，用于区分 CSS 基本形状如何应用于元素上：`fill-box` 表示将对象的包围框作为参照框；`stroke-box` 表示将对象的包围框加上描边的范围作为参照框；`view-box` 表示使用最近的 SVG 视窗作为参照框。

**备注：** `clip-path` 语法的更多细节可参考 CSS 属性 `clip-path` 的参考页面。

规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # the-clip-path |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The CSS `clip-path` property


height - SVG：可缩放矢量图形

height
======

该属性在用户坐标系统中标识了一个垂直长度。该坐标的确切效果依赖于每个元素。大多数时候，它体现引用元素的矩形区域的高度（请阅读每个元素的文档以了解例外情况）。

除了`<svg>`元素之外，别的元素都必须指定该属性，`<svg>`的高度默认是 **100%**，而 `<filter>` 元素以及 `<mask>` 元素的默认高度是 **120%**。

示例
--

```html
<?xml version="1.0"?>
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" />
</svg>
```

元素
--

下列元素可以使用 `height` 属性：

* 滤镜元素 »
* `<filter>`
* `<foreignObject>`
* `<image>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<use>`
* `<mask>`
用法
--

对于 `<use>` 元素，`height` 定义了引用元素的垂直长度。

|  |  |
| --- | --- |
| 值 | `auto` |
 **<length>**
 |
 **<percentage>** |
| 默认值 | `auto`（视为 `0`） |
| 可变性 | 是 |

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-height |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-height |
| CSS Masking Module Level 1 # element-attrdef-mask-height |
| Scalable Vector Graphics (SVG) 2 # Sizing |
| Scalable Vector Graphics (SVG) 2 # PatternElementHeightAttribute |


baseline-shift - SVG：可缩放矢量图形

baseline-shift
==============

属性 `baseline-shift` 允许相对于父文本内容元素的 `dominant-baseline` 重定位 `dominant-baseline`。该切换对象必须是一个下标或上标。

作为一个外观属性，它还可以直接作为 CSS 样式表内部的属性使用。请看`CSS baseline-shift`以了解更多信息。

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | **auto** | baseline | super | sub | <percentage> | <length> | inherit |
| 可变性 | Yes |
| 规范文档 | SVG 1.1 (2nd Edition) |

baseline

没有基线切换，`dominant-baseline`依然在原来的位置。

sub

`dominant-baseline`切换到下标的默认位置。

super

`dominant-baseline`切换到上标的默认位置

<percentage>

该属性的结果值是这个百分数乘以 `<text>`元素的`line-height`。如果是正值，dominant-baseline 向 shift 同方向移动结果值；如果是负值，dominant-baseline 向 shift 反方向移动结果值，相对于父文本内容元素。值“0%”等于”baseline“。

<length>

如果是正值，dominant-baseline 向 shift 同方向移动<length>距离；如果是负值，dominant-baseline 向 shift 反方向移动<length>距离。值”0cm“等于”baseline“。

示例
--

元素
--

下列这些元素可以使用 `baseline-shift` 属性。

* `<tspan>`
* `<tref>`
* `<textPath>`
规范
--

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # baseline-shift-property |
| Scalable Vector Graphics (SVG) 2 # BaselineShiftProperty |

参见
--

* `CSS baseline-shift`


from - SVG：可缩放矢量图形

from
====

这个属性是在 svg 动画发生过程中被修改的属性的初始值。当同时使用了这个属性和 to (en-US) 属性，animation 将会修改这个这个设定的动画属性的值从 from 属性的值到 to 属性的值。

用法
--

| 类别 | 动画属性值 |
| --- | --- |
| 值 | <value> |
| 动画特征 | No |
| 标准化文档 | SVG 1.1 (2nd Edition) |

这个属性的准确的值类型取决于这个属性将要被用作动画的属性的值。

例子
--

这个例子给 from 属性了一个 100 的值，让动画从 100 的宽度开始运行。

```xml
<?xml version="1.0"?>
<svg width="200" height="200"
 viewPort="0 0 200 200" version="1.1"
 xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100">
    <animate attributeType="XML"
 attributeName="width"
 from="100" to="150"
 dur="3s"
 fill="freeze"/>
  </rect>

</svg>
```

元素
--

如下的元素能使用 from 属性

* `<animate>`
* `<animateColor>`
* `<animateMotion>`
* `<animateTransform>`
规范
--

| Specification |
| --- |
| SVG Animations Level 2 # FromAttribute |


stroke-dashoffset - SVG：可缩放矢量图形

stroke-dashoffset
=================

`stroke-dashoffset` 属性指定了 dash 模式到路径开始的距离

如果使用了一个 <百分比> 值，那么这个值就代表了当前 viewport 的一个百分比。

值可以取为负值。

使用环境
----

| 类别 | 显示属性 |
| --- | --- |
| 值 | <percentage> | <length> | inherit |
| 初始值 | 1 |
| 可动画 | Yes |

示例
--

元素
--

以下元素可使用 stroke-dashoffset 属性

* 形状元素 »
* 文本内容元素 »
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeDashoffsetProperty |


font-family - SVG：可缩放矢量图形

font-family
===========

`font-family` 属性指出哪个字体集将被用来渲染文字，在带优先级的字体集名称列表被指定，还有或没有泛指的字符集名称。

作为一个表现层的属性，`font-family` 属性也可以被直接用在 CSS 样式表中，详见 `CSS font-family` 。

使用上下文
-----

| 分类 | Presentation attribute |
| --- | --- |
| 值 | [[<family-name> | <generic-family>],]\* [<family-name> | <generic-family>] | inherit |
| 可动画 Animatable | Yes |
| 规范文档 | SVG 1.1 (2nd Edition) |

例子
--

#### CSS
```

p.class1{font-family:"Times New Roman",Times,serif;}
p.class2{font-family:Arial,Helvetica;}
```

#### HTML

```html
<p class="class1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="class2">This is a paragraph, shown in the Arial font.</p>
```

元素
--

以下元素可以使用`font-family` 属性 (attribute)

* Text content elements »
规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # generic-font-families |
| CSS Fonts Module Level 4 # font-family-prop |

另见
--

* `CSS font-family`


r - SVG：可缩放矢量图形

r
=

**`r`** 属性用来定义圆的半径。

有两个元素在使用该属性：`<circle>` 和 `<radialGradient>`

示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient r="0" id="myGradient000">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="50%" id="myGradient050">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="100%" id="myGradient100">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="0" />
  <circle cx="150" cy="50" r="25" />
  <circle cx="250" cy="50" r="50" />

  <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" />
  <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
  <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
</svg>
```

圆
-

对于 `<circle>`，`r` 用来定义圆的半径以及它的大小。取值小于或等于零，圆将不会被绘制出来。

| 值 | **<length>** | **<percentage>** |
| --- | --- |
| 默认值 | `0` |
| 可变性 | Yes |

\*\*注：\*\*起始于 SVG2，`r` 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。

径向渐变
----

对于 `<radialGradient>`，`r` 用来定义径向渐变终止圆的半径。

渐变将以此绘制出来：**100%** 渐变停止点会被映射到终止圆的一周上。取值小于或等于零，将会使用最后一个渐变 `<stop>` 的颜色和不透明度，导致该区域被绘制为单色。

| 值 | **<length>** | **<percentage>** |
| --- | --- |
| 默认值 | `50%` |
| 可变性 | Yes |

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # R |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementRAttribute |


width - SVG：可缩放矢量图形

width
=====

**`width`** 属性在用户坐标系统中定义了元素的一个水平长度。

你可以在以下 SVG 元素中使用该属性：

* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDropShadow>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* `<filter>`
* `<foreignObject>`
* `<image>`
* `<mask>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<use>`
示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <!-- With a width of 0 or less, nothing will be rendered -->
  <rect x="0" y="0" width="0" height="90" />
  <rect x="0" y="100" width="60" height="90" />
  <rect x="0" y="200" width="100%" height="90" />
</svg>
```

use
---

对于 `<use>` 元素，`width` 定义了引用元素的水平长度。

|  |  |
| --- | --- |
| 值 | `auto` |
 **<length>**
 |
 **<percentage>** |
| 默认值 | `auto`（视为 `0`） |
| 可变性 | 是 |

**备注：** `width` 对 `use` 元素没有影响，除非引用的元素具有 viewBox。例如，该属性仅在 `use` 引用的元素是 `svg` 或 `symbol` 元素时才有意义。

**备注：** 从 SVG2 开始，`width` 变为*几何属性*，这意味着该元素也可以用作使用的元素的 CSS 属性。

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-width |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-width |
| CSS Masking Module Level 1 # element-attrdef-mask-width |
| Scalable Vector Graphics (SVG) 2 # Sizing |
| Scalable Vector Graphics (SVG) 2 # PatternElementWidthAttribute |


stdDeviation - SVG：可缩放矢量图形

stdDeviation
============

**`stdDeviation`** 属性定义了模糊操作的标准差。

你可以将该属性与以下 SVG 元素一起使用：

* `<feGaussianBlur>`
示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="gaussianBlur1">
    <feGaussianBlur stdDeviation="1" />
  </filter>
  <filter id="gaussianBlur2">
    <feGaussianBlur stdDeviation="5" />
  </filter>
  <filter id="gaussianBlur3" x="-30%" y="-30%" width="160%" height="160%">
    <feGaussianBlur stdDeviation="10" />
  </filter>

  <circle cx="100" cy="100" r="50" style="filter: url(#gaussianBlur1);" />
  <circle
 cx="100"
 cy="100"
 r="50"
 style="filter: url(#gaussianBlur2); transform: translateX(140px);" />
  <circle
 cx="100"
 cy="100"
 r="50"
 style="filter: url(#gaussianBlur3); transform: translateX(280px);" />
</svg>
```

用法
--

|  |  |
| --- | --- |
| 值 | `<number-optional-number>` |
| 默认值 | `0` |
| 可变性 | 是 |

`<number-optional-number>`

如果列出两个数值，第一个数字表示沿着 x 轴的标准差值。第二个值表示沿着 y 轴的标准差值。如果只提供了一个数字，那个值就表示在 x 轴和 y 轴上有着相同的标准差。

负值是不允许的。设为零即禁用了已有滤镜的原本效果（比如，结果是滤镜输入图像）。如果 `stdDeviation` 在 x 轴和 y 轴上只有一个为 0，那么模糊效果就只会应用于非 0 的那个方向。

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fegaussianblur-stddeviation |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


edgeMode - SVG：可缩放矢量图形

edgeMode
========

`edgeMode` 属性确定了当核心位于输入图像的边缘或贴近输入图像的边缘时，如何取用颜色值用于扩展输入图像，从而可以应用矩阵操作。

如果没有指定 `edgeMode` 属性，等效于值被指定为 `duplicate`。

用法
--

| 类别 | 无 |
| --- | --- |
| 值 | **duplicate** | wrap | none |
| 可变性 | Yes |
| 规范文档 | SVG 1.1 (2nd Edition) |

duplicate

它指示输入图像沿着每条边扩展，复制输入图像的给定边缘上的颜色值。

wrap

它指示扩展输入图像，从图像相对的边缘取色。

none

它指示扩展输入图像，用 0 作为 RGBA 的像素值。

示例
--

元素
--

以下元素可以使用`edgeMode`属性：

* `<feConvolveMatrix>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feconvolvematrix-edgemode |


dx - SVG：可缩放矢量图形

dx
==

`dx` 属性表示一个元素或其内容在 `x` 轴方向上的偏移，偏移量取决于设置该属性的元素。

对于`<feOffset>`元素，它的值代表所有输入的图像的偏移量之和。这个总和被表达在由`<filter>`元素的`primitiveUnits`属性定义的坐标系中。

对于`<glyphRef>`元素，它的值代表该符号在字体坐标系中 x 轴上的相对坐标。

对于 `<text>`、`<tspan>` 和 `<tref>` 元素，由于这些元素允许设置 <list-of-length>，所以更复杂。

如果只提供了一个<length>，当前文本位置会沿着坐标系内 x 轴方向偏移<length> 。

如果提供了一个由逗号或者空格分隔的<length>列表，列表中的值将会表示前 n 个字符沿 x 轴方向偏移的增量。因此，当前文本位置也因为绘制当前`<text>`元素而沿 x 轴方向偏移。

如果在<length>列表中有更多的字符，那么对于每个字符，都有

* 如果祖先`<text>`或`<tspan>`元素对于给定的字符，通过 dx 的属性指定了相对 x 坐标，那么当前文本位置会沿坐标系的 x 轴方向偏移该数值（最近的祖先具有优先级）
* 否则没有额外的 x 轴方向的偏移发生
用法上下文
-----

| 分类 | 无 |
| --- | --- |
| 数值类型 | <number> | T<.2Fvar>s"><list-of-length> |
| 可变 | 是 |

元素
--

这些元素可以使用 dx 属性

* `<feOffset>`
* `<glyphRef>`
* `<text>`
* `<tref>`
* `<tspan>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fedropshadow-dx |
| Filter Effects Module Level 1 # element-attrdef-feoffset-dx |
| Scalable Vector Graphics (SVG) 2 # TextElementDXAttribute |


type - SVG：可缩放矢量图形

type
====

type 属性是一个类属性，他在不同的使用语境下有不同的意思。

* 对于`<animateTransform>`元素 , 它决定了那些随时间变化的值的转换的类型
* 对于 `<feColorMatrix>` 元素，它指明了矩阵运算的类型。关键词 `matrix` 表明一个全 5x4 矩阵的值会被提供。其他关键字快捷方式代表允许不执行复杂矩阵运算下使用常用颜色。
* 对于`<feFuncR>`, `<feFuncG>`, `<feFuncB>`, 和`<feFuncA>` 元素，它指明了组件传递函数的类型。
* 对于 `<feTurbulence>` 元素，它表示应以噪声函数还是湍流函数执行过滤。
* 对于 `<style>` 和 `<script>` 元素，它定义了元素内容的类型。
Usage context
-------------

### For the `<animateTransform>` elements

| Categories | *None* |
| --- | --- |
| Value | **`translate`** | `scale` | `rotate` | `skewX` | `skewY` |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) |

### For the `<feColorMatrix>` element

| Categories | *None* |
| --- | --- |
| Value | **`matrix`** | `saturate` | `hueRotate` | `luminanceToAlpha` |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

### For the `<feFuncR>`, `<feFuncG>`, `<feFuncB>`, and `<feFuncA>` elements

| Categories | *None* |
| --- | --- |
| Value | `identity` | `table` | `discrete` | `linear` | `gamma` |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

### For the `<feTurbulence>` element

| Categories | *None* |
| --- | --- |
| Value | `fractalNoise` | **`turbulence`** |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

### For the `<style>` and `<script>` elements

| Categories | *None* |
| --- | --- |
| Value | <content-type> |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) : script SVG 1.1 (2nd Edition) : style |

Example
-------

Elements
--------

The following elements can use the `values` attribute

* `<animateTransform>`
* `<feColorMatrix>`
* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
* `<feTurbulence>`
* `<script>`
* `<style>`


accent-height - SVG：可缩放矢量图形

accent-height
=============

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

**`accent-height`** 属性定义从原点到重点字符顶部的距离，通过字体坐标系内的距离测量。

你可以将该属性与以下 SVG 元素一起使用：

* `<font-face>`
font-face
---------

对于 `<font-face>` 元素，`accent-height` 定义从原点到重音字符顶部的距离，通过字体坐标系内的距离测量。

|  |  |
| --- | --- |
| 值 | <number> |
| 默认值 | `ascent (en-US)` 的值 |
| 可变性 | 否 |

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # FontFaceElementAccentHeightAttribute |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `cap-height (en-US)`
* `x-height (en-US)`


display - SVG：可缩放矢量图形

display
=======

**`display`** 属性让你可以控制图形元素或容器元素的渲染。

`display="none"` 表示该元素和它的子元素不会被渲染。而非 `none` 或 `inherit` 的值表示元素会被浏览器渲染。

当应用到容器元素时，将 `display` 设为 `none` 会导致容器与它所有的子元素不可见，如此看来，它在一组元素中表现地像一个元素组。这表示具有 `display="none"` 属性元素的所有子元素都不会被渲染，即使子元素的 `display` 并不是 `none`。

`display` 属性被设为 `none` 的元素不会成为渲染树的一部分。它涉及到 `<tspan>` 和 `<tref>` 元素，用于盒边界与路径剪裁计算的事件处理。

* 如果在 `<tspan>` 或 `<tref>` 元素中 `display` 的属性值被设为 `none`，则为了文字布局，文字字符串会被忽视掉。
* 至于事件，如果 `display` 被设为 `none` 则该元素不接受任何事件。
* 图形元素的 `display` 属性被设为 `none` 则不会被盒边界和路径剪裁计算中包含进去。

`display`属性只影响能被直接渲染的元素，尽管它不能防止该元素被其他元素参考。例如：将 `<path>` 元素设为 `none`，会使得该元素不会被直接渲染到 canvas 上，但是 `<textPath>` 元素依旧会参考 `<path>`。此外，即便 `<path>` 的 `display` 为 `none`，它的形状在处理路径上的文本时仍然会被用到。

这个属性也能影响直接渲染到屏幕外的画布，比如遮罩或路径剪裁。因此，把 `<mask>` 元素的一个子元素设为 `display="none"` 将会阻止 `<clipPath>` 的子元素参与到路径剪裁中。

**备注：** As a presentation attribute, `display` can be used as a CSS property. See `CSS display` for further information.

As a presentation attribute, it can be applied to any element.

示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Here the yellow rectangle is displayed -->
  <rect x="0" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect x="20" y="20" width="60" height="60" fill="yellow"></rect>

  <!-- Here the yellow rectangle is not displayed -->
  <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect
 x="140"
 y="20"
 width="60"
 height="60"
 fill="yellow"
 display="none"></rect>
</svg>
```

使用说明
----

| Default value | `inline` |
| --- | --- |
| Value | Error: could not find syntax for this item |
| Animatable | Yes |

For a description of the values, please refer to the `CSS display` property.

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # VisibilityControl |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `visibility` attribute
* `CSS display`


text-anchor - SVG：可缩放矢量图形

text-anchor
===========

文本锚点属性被用来描述该文本与所给点的对齐方式（开头、中间、末尾对齐）。

文本锚点属性被运用到每个 `<text>` 元素的独立文本块上。每个文本块有一个初始的当前文本位置，一个来源于 `<text>` 元素的 `x` 和 `y` 属性在当前上下文的用户坐标系中所对应的点，任何一个 `<tspan>`、`<tref>` 元素的 `x` 或者 `y` 属性值都明确指向了文本块里第一个被呈现的字符，或者是决定了 `<textPath>` 元素的当前文本位置的初始值。

作为一个描述性的属性，它也可以直接用作 CSS 样式的性质（style 属性的值）。

使用方法
----

| 类别 | 呈现属性 |
| --- | --- |
| 值 | start | middle | end | **inherit** |
| 可动画化 | 是 |

start

所呈现的字符对齐方式为：文本字符串的开始位置即当前文本的初始位置。对于拉丁文在其通常文本排列方向，这就相当于左对齐。对于脚本像希伯来语和阿拉伯语这类自右向左排列的文字来说，这相当于右对齐。对于亚洲某些垂直走向的文本来说，这相当于向上对齐。

middle

所呈现的字符对齐方式为：文本字符串的中间位置即当前文本的初始位置。(对于按路径排列的文本，会从概念上首先将其文本排列在一条直线上，确定该串中点位置后，然再将该文本映射到路径上，并且将之前确定的中点放置在当前文本的位置上 )

end

所呈现的字符对齐方式为：文本字符串的末尾即当前文本的初始位置。对于拉丁语通常的文字走向来说，这就相当于右对齐。对于像希伯来语和阿拉伯语这类将文字自右向左排列的脚本来说，这相当于左对齐。

示例
--

```html
<?xml version="1.0"?>
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1">
  <!-- Materialisation of anchors -->
  <path
 d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110"
 stroke="grey" />

  <!-- Anchors in action -->
  <text text-anchor="start" x="60" y="40">A</text>

  <text text-anchor="middle" x="60" y="75">A</text>

  <text text-anchor="end" x="60" y="110">A</text>

  <!-- Materialisation of anchors -->
  <circle cx="60" cy="40" r="3" fill="red" />
  <circle cx="60" cy="75" r="3" fill="red" />
  <circle cx="60" cy="110" r="3" fill="red" />

  <style>
 <![CDATA[
 text{
 font: bold 36px Verdana, Helvetica, Arial, sans-serif;
 }
 ]]>
 </style>
</svg>
```

元素
--

以下元素可以运用文本锚点属性：

* Text content elements »
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # TextAnchoringProperties |


version - SVG：可缩放矢量图形

version
=======

**`version`** 属性用于指明 SVG 文档遵循规范。它只允许在根元素 <svg> 上使用。它纯粹是一个说明，对渲染或处理没有任何影响。

虽然它接受任何数字，但是只有 `1.0` 和 `1.1` 这两个有效的选择。

Usage context
-------------

| 类别 | None |
| --- | --- |
| 值 | <number> |
| 动画属性 | No |

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # SVGElementVersionAttribute |


end - SVG：可缩放矢量图形

end
===

这个属性定义了一个动画的结束值，可以约束激活持续时间。

这个属性值是一个分号分隔的数列值。每个单独值可以是定义在`begin`属性中同种类型。

用法
--

| 类别 | 动画定时属性 |
| --- | --- |
| 值 | <End-value-list> |
| 可变性 | No |
| 规范文档 | SVG 1.1 (2nd Edition) |

欲知在`<end-value-list>`中允许用哪些值，请阅读`begin`属性。

示例
--

元素
--

下列元素可以使用`end`属性：

* Animation elements »
规范
--

| Specification |
| --- |
| SVG Animations Level 2 # EndAttribute |


color - SVG：可缩放矢量图形

color
=====

`color` 属性用来为 `fill` 属性、`stroke` 属性、`stop-color (en-US)` 属性、`flood-color (en-US)` 属性和 `lighting-color (en-US)` 属性提供一个潜在的间接值（`currentColor`）。

作为一个外观属性，它还可以直接用作 CSS 样式表的属性。请阅读 `CSS color` 以了解更多信息。

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | <color> | inherit |
| 规范文档 | SVG 1.1 (2nd Edition) |

示例
--

```html
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g color="green">
    <rect width="50" height="50" fill="currentColor" />
    <circle
 r="25"
 cx="70"
 cy="70"
 stroke="currentColor"
 fill="none"
 stroke-width="5" />
  </g>
</svg>
```

元素
--

下列元素可以使用`color`属性：

* 文本内容元素 »
* 形状元素 »
* `<stop>`
* `<feFlood>`
* `<feDiffuseLighting>`
* `<feSpecularLighting>`
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # ColorProperty |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


media - SVG：可缩放矢量图形

media
=====

**`media`** 属性指定只有符合media query (en-US)的样式表才会被应用。

只有一个元素使用这个属性： `<style>`

示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg">
  <style>
 rect {
 fill: black;
 }
 </style>
  <style media="all and (min-width: 600px)">
 rect {
 fill: seagreen;
 }
 </style>

  <text y="15">Resize the window to see the effect</text>
  <rect y="20" width="200" height="200" />
</svg>
```

Usage notes
-----------

| Value | `<media-query-list>` |
| --- | --- |
| Default value | `all` |
| Animatable | Yes |

`<media-query-list>`

This value holds a media query that needs to match in order for the style sheet to be applied.如果没有指定，样式表就会被应用。

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StyleElementMediaAttribute |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


opacity - SVG：可缩放矢量图形

opacity
=======

opacity 属性指定了一个对象或一组对象的透明度，也就是说，元素后面的背景的透过率。

作为一个外观属性，它可以直接用作 CSS 样式表内部的属性，请阅读 `CSS opacity` 以了解更多信息。

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | <opacity-value> | inherit |
| 可变性 | Yes |

<opacity-value>

一致的不透明度设置，作为一个<number>被应用到整个对象上。任何超过范围 0.0 到 1.0 的值都会被压回这个范围。0.0 表示完全透明，1.0 表示完全不透明。

示例
--

元素
--

以下元素可以使用`opacity`属性：

* 图形元素 »
* `<a>`
* `<defs>`
* `<glyph>`
* `<g>`
* `<marker>`
* `<missing-glyph>`
* `<pattern>`
* `<svg>`
* `<switch>`
* `<symbol>`
规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # transparency |
| Scalable Vector Graphics (SVG) 2 # ObjectAndGroupOpacityProperties |

参见
--

* `CSS opacity`


alignment-baseline - SVG：可缩放矢量图形

alignment-baseline
==================

`alignment-baseline` 属性指定了一个对象如何相对于它的父元素对齐。这个属性指定了该元素的基线对齐到相应的父元素的基线。举个例子，允许罗马文字中的字母表基线在字体大小发生变化时保持一致。它的默认值是 baseline，与该 `alignment-baseline` 属性的计算值同名。

作为一个外观属性，它还可以直接作为 CSS 样式表内部的属性使用。请阅读 `CSS alignment-baseline` 以了解更多信息。

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | **auto** | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit |
| 可变性 | Yes |
| 规范文档 | SVG 1.1 (2nd Edition) |

示例
--
```

<?xml version="1.0"?>
<svg width="300" height="120" viewBox="0 0 300 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

    <!-- Materialisation of anchors -->
    <path d="M60,10 L60,110
             M30,10 L300,10
             M30,65 L300,65
             M30,110 L300,110
             " stroke="grey" />

    <!-- Anchors in action -->
    <text alignment-baseline="hanging"
          x="60" y="10">A hanging</text>

    <text alignment-baseline="middle"
          x="60" y="65">A middle</text>

    <text alignment-baseline="baseline"
          x="60" y="110">A baseline</text>

    <!-- Materialisation of anchors -->
    <circle cx="60" cy="10" r="3" fill="red" />
    <circle cx="60" cy="65" r="3" fill="red" />
    <circle cx="60" cy="110" r="3" fill="red" />

<style><![CDATA[
text{
    font: bold 36px Verdana, Helvetica, Arial, sans-serif;
}
]]></style>
</svg>
```

元素
--

下列元素使用 `alignment-baseline` 属性：

* `<tspan>`
* `<tref>`
* `<textPath>`

如果对象要在别的元素中对齐（比如在`<text>`元素中），请阅读`dominant-baseline (en-US)`。

规范
--

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # alignment-baseline-property |
| Scalable Vector Graphics (SVG) 2 # AlignmentBaselineProperty |

参见
--

* `CSS alignment-baseline`


repeatDur - SVG：可缩放矢量图形

repeatDur
=========

**`repeatDur`** 属性指定重复动画的总持续时间。

可在以下 SVG 元素中使用该属性：

* `<animate>`
* `<animateColor>`
* `<animateMotion>`
* `<animateTransform>`
* `<set>`
示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatDur="5s" />
  </rect>
  <rect x="120" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatDur="indefinite" />
  </rect>
</svg>
```

用法
--

|  |  |
| --- | --- |
| 值 | `<clock-value>`
 | `indefinite` |
| 默认值 | *无* |
| 可变性 | 否 |

`<clock-value>`

该值指定重复动画的呈现时间的持续时间。

`indefinite`

该值表示动画将无限期重复（即直到文档结束）。

规范
--

| Specification |
| --- |
| SVG Animations Level 2 # RepeatDurAttribute |


values - SVG：可缩放矢量图形

values
======

values 属性具有不同的含义，具体取决于使用的上下文，它可以定义在动画过程中使用的值序列，或者它是颜色矩阵的数字列表，根据颜色类型的不同，它们的解释也不同。要执行的颜色更改。

五个元素正在使用此属性：`<animate>`, `<animateColor>`, `<animateMotion>`, `<animateTransform>`, and `<feColorMatrix>`

animate, animateColor, animateMotion, animateTransform
------------------------------------------------------

对于 `<animate>`, `<animateColor>`, `<animateMotion>`, 和 `<animateTransform>`, `values`是一个列表 定义动画过程中的值序列的值。如果指定了此属性，则将忽略在元素上设置的任何 `from`, `to (en-US)`, 和 `by (en-US)` 属性值。

| Value | `<list-of-values>` |
| --- | --- |
| Default value | *None* |
| Animatable | No |

`<list-of-values>`

该值包含一个或多个值的分号分隔列表。值的类型由 `href (en-US)` 和 `attributeName` 属性定义。

feColorMatrix
-------------

对于 `<feColorMatrix>` 元素，值是根据 `type` 属性值不同解释的数字列表。

| Value | `<list-of-numbers>` |
| --- | --- |
| Default value | *If `type="matrix"`, identity matrix, if `type="saturate"`, `1`, resulting in identity matrix, if `type="hueRotate"`, `0`, resulting in identity matrix* |
| Animatable | Yes |

`<list-of-numbers>`

该值是一个数字列表，根据 type 属性的值来定义不同解释：

* `type="matrix"`，`values` 是 20 个矩阵值（a00 a01 a02 a03 a04 a10 a11 ... a34）的列表，以空格和/或逗号分隔。
* `type="saturate"`，`values` 是单个实数值（0 到 1）。
* `type="hueRotate"`，`values` 是一个单一的实数值（度）。
* `type="luminanceToAlpha"`，`values` 不适用。

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fecolormatrix-values |
| SVG Animations Level 2 # ValuesAttribute |


marker-end - SVG：可缩放矢量图形

marker-end
==========

**`marker-end`** 属性将在给定形状的最终顶点绘制的箭头或者多边形标记。

对于除 SVG 的 polyline 和 path 元素之外的所有形状元素，最后的一个顶点与第一个顶点相同。在这种情况下，如果 SVG 的 marker-start 属性和 `marker-end` 的值都不是 `none` ，然后再最后一个顶点渲染两个图标。对于一个 `<path>` 元素，对于每个封闭的子路径，他的最后一个顶点都与第一个顶点相同。 `marker-end` 仅在路径数据的最终顶点上呈现。

**Note:** 作为一个图像属性，`marker-end` 可以用作 CSS 属性。

作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效：`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, and `<rect>`

示例
--
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="triangle"
 viewBox="0 0 10 10"
 refX="1"
 refY="5"
 markerUnits="strokeWidth"
 markerWidth="10"
 markerHeight="10"
 orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00" />
    </marker>
  </defs>
  <polyline
 fill="none"
 stroke="black"
 points="20,100 40,60 70,80 100,20"
 marker-end="url(#triangle)" />
</svg>
```

使用说明
----

| Value | `none` | `<marker-ref>` |
| --- | --- |
| Default value | `none` |
| Animatable | Yes |

`none`

表示将不会在终点绘制任何符号。

`<marker-ref>`

这个值表示的是对 `<marker>` 元素的引用，将在终点绘制该元素.。如果引用无效，将不会绘制任何东西。

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # VertexMarkerProperties |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

另见
--

* `<marker>`
* `marker-start`
* `marker-mid (en-US)`


filterUnits - SVG：可缩放矢量图形

filterUnits
===========

filterUnits 属性定义 `x`、`y`、`width` 和 `height` 使用的坐标系系统。

如果 filterUnits 属性未指定，那么效果如同指定了值为 `objectBoundingBox`。

Usage context
-------------

| Categories | *None* |
| --- | --- |
| Value | `userSpaceOnUse` | **`objectBoundingBox`** |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

userSpaceOnUse

`x`, `y`, `width` 和 `height` 表示当前坐标系统中的值，这些值表示`<filter>`元素在当前用户坐标系中的位置和大小 (例如通过`filter`引用该`<filter>`元素的元素所在的坐标系系统).

objectBoundingBox

在这种情况下，`x`, `y`, `width` 和 `height`biao 表示引用`<filter>`元素的元素的 baow 包围盒的分数或百分比。

Examples
--------

Elements
--------

下面这些元素可以使用 filterUnits 属性：

* `<filter>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-filterunits |


viewBox - SVG：可缩放矢量图形

viewBox
=======

viewBox 属性允许指定一个给定的一组图形伸展以适应特定的容器元素。

viewBox 属性的值是一个包含 4 个参数的列表 `min-x`, `min-y`, `width` and `height`，以空格或者逗号分隔开，在用户空间中指定一个矩形区域映射到给定的元素，查看属性`preserveAspectRatio`。

不允许宽度和高度为负值，0 则禁用元素的呈现。

示例
--
```

html,
body,
svg {
  height: 100%;
  vertical-align: top;
}
svg:not(:root) {
  display: inline-block;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!--
 with relative unit such as percentage, the visual size
 of the square looks unchanged regardless of the viewBox
 -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
 with a large viewBox the circle looks small
 as it is using user units for the r attribute:
 4 resolved against 100 as set in the viewBox
 -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!--
 with relative unit such as percentage, the visual size
 of the square looks unchanged regardless of the viewBox
 -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
 with a small viewBox the circle looks large
 as it is using user units for the r attribute:
 4 resolved against 10 as set in the viewBox
 -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <!--
 The point of coordinate 0,0 is now in the center of the viewport,
 and 100% is still resolve to a width or height of 10 user units so
 the rectangle looks shifted to the bottom/right corner of the viewport
 -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
 With the point of coordinate 0,0 in the center of the viewport the
 value 50% is resolve to 5 which means the center of the circle is
 in the bottom/right corner of the viewport.
 -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>
```

这个属性会受到 `preserveAspectRatio` 的影响。

**备注：** `width` 或者 `height` 的值，小于或等于 0 的情况下，这个元素将不会被渲染出来。

有 `<marker>`, `<pattern>`, `<svg>`, `<symbol>`, 和 `<view>` 等五个 svg 元素可以有这个属性。

Usage context
-------------

| Categories | None |
| --- | --- |
| Value | *See above* |
| Animatable | Yes |

Elements
--------

下面的元素可以使用 viewBox 属性

* `<svg>`
* `<symbol>`
* `<image>`
* `<marker>`
* `<pattern>`
* `<view>`
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # ViewBoxAttribute |

参见
--

* SVG Getting Started: Positions


fy - SVG：可缩放矢量图形

fy
==

**`fy`** 属性用来定义径向渐变的焦点的 y 轴坐标。

你可以将该属性与以下 SVG 元素一起使用：

* `<radialGradient>`
示例
--

### 示例 1
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient
 id="gradient1"
 cx="0.5"
 cy="0.5"
 r="0.5"
 fx="0.35"
 fy="0.35"
 fr="5%">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="darkseagreen" />
    </radialGradient>
    <radialGradient
 id="gradient2"
 cx="0.5"
 cy="0.5"
 r="0.5"
 fx="0.35"
 fy="0.75"
 fr="5%">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="darkseagreen" />
    </radialGradient>
  </defs>

  <circle cx="100" cy="100" r="100" fill="url(#gradient1)" />
  <circle
 cx="100"
 cy="100"
 r="100"
 fill="url(#gradient2)"
 style="transform: translateX(240px);" />
</svg>
```

### 示例 2

```html
<svg
 viewBox="0 0 120 120"
 width="200"
 height="200"
 xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient
 id="Gradient"
 cx="0.5"
 cy="0.5"
 r="0.5"
 fx="0.35"
 fy="0.35"
 fr="5%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>

  <rect
 x="10"
 y="10"
 rx="15"
 ry="15"
 width="100"
 height="100"
 fill="url(#Gradient)"
 stroke="black"
 stroke-width="2" />

  <circle
 cx="60"
 cy="60"
 r="50"
 fill="transparent"
 stroke="white"
 stroke-width="2" />
  <circle cx="35" cy="35" r="2" fill="white" stroke="white" />
  <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">
    (fx,fy)
  </text>
  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">
    (cx,cy)
  </text>
</svg>
```

用法
--

|  |  |
| --- | --- |
| 值 | `<length>` |
| 默认值 |
 与元素的 `cy` 表现值一致，不论
 `cy` 的值是继承与否。
  |
| 可变性 | 否 |

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementFYAttribute |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


filter - SVG：可缩放矢量图形

filter
======

属性 `filter` 定义了由 `<filter>` 元素定义滤镜效果，该滤镜效果将应用到该元素上。

作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。请阅读 `CSS filter` 以了解更多信息。

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | <funciri> | **none** | inherit |
| 可变性 | Yes |
| 规范文档 | SVG 1.1 (2nd Edition) |

<funciri>

元素的引用，它定义了将要应用到该元素的滤镜效果。

none

不对该元素应用任何滤镜效果。

元素
--

下列元素可以使用`filter`属性：

* 图形元素 »
* `<a>`
* `<defs>`
* `<glyph>`
* `<g>`
* `<marker>`
* `<missing-glyph>`
* `<pattern>`
* `<svg>`
* `<switch>`
* `<symbol>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # FilterProperty |

参见
--

* `CSS filter`


dur - SVG：可缩放矢量图形

dur
===

该属性标识了动画的简单持续时间。

用法
--

| 类别 | 动画定时属性 |
| --- | --- |
| 值 | <clock-value> | **indefinite** |
| 可变性 | No |
| 规范文档 | SVG 1.1 (2nd Edition) |

<clock-value>

指定简单持续时间的时长。值必须大于 0。可以用小时（h）、分钟（m）、秒（s）、毫秒（ms）表达这个值。可以组合这些时间表达式以提供一个复合的持续时间，比如这样：`hh:mm:ss.iii`或者这样：`mm:ss.iii`。

如果一个动画元素不带有`dur`属性，简单持续时间就是无限期的。请注意：如果一个简单持续时间是无限期的，则插值不能起作用（虽然它对 `<set>` 元素依然是有用的）。

示例
--

元素
--

下列元素可以使用`dur`属性：

* 动画元素 »
规范
--

| Specification |
| --- |
| SVG Animations Level 2 # DurAttribute |