recursal/MDN huggingface dataset:
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
=======

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

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

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

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

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # SVGElementVersionAttribute |
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
=====

`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
=====

**`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
=======

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
==================

`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
=========

**`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
======

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
==========

**`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
===========

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
=======

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
==

**`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
======

属性 `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
===

该属性标识了动画的简单持续时间。

用法
--

| 类别 | 动画定时属性 |
| --- | --- |
| 值 | <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 |
enable-background
=================

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

该 **`enable-background`** 属性指定如何管理背景图像的累积。

\*\*注意：\*\*作为演示文稿属性，`enable-background`可以用作 CSS 属性。

作为表示属性，它可以应用于任何元素，但仅对以下 11 个元素有效：`<a>`，`<defs>`，`<字形>`，`<g>`，`<marker>`，`<mask>`，`<missing-glyph>`，`<pattern>`，`<svg>`，`<switch>`和`<symbol>`

上下文注释
-----

| 值 | `accumulate`| `new`[ `<x>` `<y>` `<width>` `<height>`]？ |
| --- | --- |
| 默认值 | `accumulate` |
| 可动画的 | 没有 |

`accumulate`

如果祖先容器元素的属性值为`enable-background: new`，则当前容器元素内的所有图形元素都将呈现到父容器元素的背景图像画布上以及目标设备上。否则，没有当前的背景图像画布，因此图形元素仅渲染到目标设备上。

`new [ <x> <y> <width> <height> ]?`

 该值使当前容器元素的子代能够访问背景图像。它还指示建立了新的（即最初为透明的黑色）背景图像画布，并且实际上，除了将当前容器元素的所有子对象呈现到目标设备上之外，还应将其呈现到新的背景图像画布中。The optional `<x>`, `<y>`, `<width>`, and `<height>` parameters are `<number>` values that indicate the subregion of the container elementʼs user space where access to the background image is allowed to happen. Those values act as a clipping rectangle on the background image canvas.
 Negative values for `<width>` or `<height>` are forbidden. If one, two, or three values are specified or if neither `<width>` nor `<height>` are specified, the `BackgroundImage` and `BackgroundAlpha` of a filter primitive are processed as if background image processing were not enabled.


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

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

Browser compatibility
---------------------

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

用于 order 属性定义一列 <number> 为 `<feConvolveMatrix>` 元素构成核矩阵。值之间用空格或逗号分开。<number> 的数量必须等于在 `order` 属性中定义的 <orderX> 和 <orderY> 的乘积。

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

| Categories | None |
| --- | --- |
| Value | T<.2Fvar>s"><list of number> |
| Animatable | Yes |

Example
-------

Elements
--------

下面的元素可以使用`kernelMatrix 属性`

* `<feConvolveMatrix>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feconvolvematrix-kernelmatrix |
fill-rule
=========

**`fill-rule`** 是一个表现属性，它定义了用来确定一个多边形内部区域的算法。

**备注：** 作为一个表现属性，fill-rule 可以被用于 CSS。

作为一个表现属性，它可以被应用于任何元素，但只会在以下元素中有效：

* `<path>`
* `<polygon>`
* `<polyline>`
* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`

如何判断一个路径组成的多边形的内部区域，从而给它上色，对于一个简单的、没有交错的路径来说，是很显然的；然而，对于一个更为复杂的路径，比如一条与自身相交的路径，或者是这条路径上的其中一段将另一段包围着，要解释什么是“内部”，就不再这么显然了。

示例
--
```

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



```html
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- fill-rule 的默认值 -->
  <polygon
 fill-rule="nonzero"
 stroke="red"
 points="50,0 21,90 98,35 2,35 79,90" />

  <!--
 从这个形状的中心到无穷远处有两条路径段（红色部分），因此
 该区域被认为是形状外部，并且没有被填充。
 -->
  <polygon
 fill-rule="evenodd"
 stroke="red"
 points="150,0 121,90 198,35 102,35 179,90" />
</svg>
```

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | nonzero | evenodd |
| 默认值 | nonzero |
| 可变性 | Yes |
| 规范文档 | SVG 1.1 (2nd Edition) |

`fill-rule` 属性为如何确定一个形状的内部（即可以被填充的区域）提供了两个可选值：

### nonzero

这个值确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。

#### Example
```

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



```html
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- nonzero 填充规则被用于路径段会相交的形状上的效果 -->
  <polygon
 fill-rule="nonzero"
 stroke="red"
 points="50,0 21,90 98,35 2,35 79,90" />

  <!--
 nonzero 填充规则被用于一个形状在另一形状内部的效果
 这两个正方形的路径段方向相同（都是顺时针）
 -->
  <path
 fill-rule="nonzero"
 stroke="red"
 d="M110,0 h90 v90 h-90 z
 M130,20 h50 v50 h-50 z" />

  <!--
 这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反
 外面的正方形是顺时针，里面的正方形则是逆时针
 -->
  <path
 fill-rule="nonzero"
 stroke="red"
 d="M210,0 h90 v90 h-90 z
 M230,20 v50 h50 v-50 z" />
</svg>
```

### evenodd

这个值用确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。

#### Example
```

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



```html
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- evenodd 填充规则被用于路径段会相交的形状上的效果 -->
  <polygon
 fill-rule="evenodd"
 stroke="red"
 points="50,0 21,90 98,35 2,35 79,90" />

  <!--
 evenodd 填充规则被用于一个形状在另一形状内部的效果
 这两个正方形的路径段方向相同（都是顺时针）
 -->
  <path
 fill-rule="evenodd"
 stroke="red"
 d="M110,0 h90 v90 h-90 z
 M130,20 h50 v50 h-50 z" />

  <!--
 这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反
 外面的正方形是顺时针，里面的正方形则是逆时针
 -->
  <path
 fill-rule="evenodd"
 stroke="red"
 d="M210,0 h90 v90 h-90 z
 M230,20 v50 h50 v-50 z" />
</svg>
```

规范
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
事件处理器（概述）
=========

事件是浏览器窗口内触发的信号，用于通知浏览器或操作系统环境的变化。程序员可以创建用于在事件触发时运行的*事件处理器*代码，使网页能够适当地响应变化。

本页提供了有关如何使用事件和事件处理器的非常简短的“提醒”。新开发人员应阅读事件介绍。

有哪些可用事件？
--------

事件记录在产生事件的 JavaScript 对象的页面中和/或页面下方。例如，要了解浏览器窗口或当前文档触发的事件，请参阅 `Window` 和 `Document` 中的事件部分。

你可以使用事件参考查找哪些 JavaScript 对象会触发特定 API 的事件，例如动画、媒体等。

注册事件处理器
-------

有两种推荐的注册处理器的方法。可以将事件处理器代码赋值给目标元素对应的 *onevent* 属性，或使用 `addEventListener()` 方法将处理器注册为元素的监听器，从而在事件触发时运行事件处理器的代码。无论哪种情况，处理器都将接收一个符合 `Event` 接口的对象。主要区别在于可以使用事件监听器方法添加（或删除）多个事件处理器。

**警告：** 不推荐使用 HTML onevent 属性设置事件处理器的第三种方法！它们会使标签变长，从而降低了可读性且变得难以调试。有关详细信息，请参阅内联事件处理器。

### 使用 onevent 属性

按照惯例，触发事件的 JavaScript 对象都有相应的“onevent”属性（以事件名称加前缀“on”命名）。当事件触发时，这些属性会被调用以运行相关的处理器的代码，也可能被你自己的代码直接调用。

要设置事件处理器的代码，只需将其赋值给相应的 onevent 属性即可。一个元素的每个事件只能分配一个事件处理器。如果需要，可以通过将另一个函数赋值给相同的属性来替换处理器。

下面我们将展示如何使用 `onclick` 属性为 `click` 事件设置一个简单的 `greet()` 函数。


```js
const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.onclick = greet;
```


请注意，代表事件的对象会作为第一个参数传递给事件处理器。此事件对象实现或派生自 `Event` 接口。

### EventTarget.addEventListener

在元素上设置事件处理器的最灵活的方法是使用 `EventTarget.addEventListener` 方法。这种方法允许为一个元素分配多个监听器，并在需要时*删除*监听器（使用 `EventTarget.removeEventListener` 方法）。

**备注：** 添加和删除事件处理器的功能允许你在不同情况下执行不同的操作，例如，让同一个按钮执行不同的操作。此外，在更复杂的程序中，清理旧的或未使用的事件处理器可以提高效率。

下面我们展示了如何将一个简单的 `greet()` 函数设置为 `click` 事件的监听器/事件处理器（如果需要，你可以使用匿名函数代替具名函数）。请再次注意，事件（event）会作为第一个参数传递给事件处理器。


```js
const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.addEventListener("click", greet);
```


该方法还可以使用其他参数/选项来控制捕获和删除事件的方式。更多信息请参阅 `EventTarget.addEventListener` 参考页面。

#### 使用终止信号

事件监听器的一个显著特点是可以使用终止信号同时清理多个事件处理器。

具体做法是将相同的 `AbortSignal` 传递给所有你想要可以一起移除的事件处理器的 `addEventListener()` 调用。然后，你可以在拥有“AbortSignal”（终止信号）的控制器上调用 `abort()`，这样就能移除通过该信号添加的所有事件处理器。例如，要添加一个可以使用 `AbortSignal` 移除的事件处理器：


```js
const controller = new AbortController();

btn.addEventListener(
  "click",
  (event) => {
    console.log("greet:", event);
  },
  { signal: controller.signal },
); // 将 AbortSignal 传递给该处理器
```


然后，通过上面代码创建的事件处理器可以这样移除：


```js
controller.abort(); // 移除与此控制器关联的任何/所有事件处理器
```