recursal/MDN huggingface dataset:
a
=

使用 SVG 的锚元素 (<a>) 定义一个超链接。

由于这个元素和 HTML 的 <a> 标签 使用了相同的标签名，当使用 CSS 或 `querySelector` 选择"a"时，可能应用到错误的元素上。可以尝试使用 `@namespace`规则 来区分两者

用法
--

|  |  |
| --- | --- |
| 类别 | 容器元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：动画元素描述性元素形状元素结构化元素渐变元素`<a>`、`<clipPath>`、`<color-profile>`、`<cursor>`、`<filter>`、`<font>`、`<font-face>`、`<foreignObject>`、`<image>`、`<marker>`、`<mask>`、`<pattern>`、`<script>`、`<style>`、`<switch>`、`<text>`、`<view>` |

示例
--


```html
<svg
 width="140"
 height="30"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="https://developer.mozilla.org/zh-CN/docs/SVG" target="\_blank">
    <rect height="30" width="120" y="0" x="0" rx="15" />
    <text fill="white" text-anchor="middle" y="21" x="60">SVG on MDN</text>
  </a>
</svg>
```


示例结果：

属性
--

### 全局属性

* 条件处理属性 (en-US) »
* 核心属性 (en-US) »
* 图形事件属性 (en-US) »
* 外观属性 (en-US) »
* Xlink 属性 (en-US) »
* `class (en-US)`
* `style`
* `externalResourcesRequired`
* `transform`
### 专有属性

* `xlink:show (en-US)`
* `xlink:actuate`
* `xlink:href (en-US)`
* `target`
DOM 接口
------

该元素实现了 `SVGAElement` (en-US) 接口。

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

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

`symbol`元素用来定义一个图形模板对象，它可以用一个`<use>`元素实例化。`symbol`元素对图形的作用是在同一文档中多次使用，添加结构和语义。结构丰富的文档可以更生动地呈现出来，类似讲演稿或盲文，从而提升了无障碍。注意，一个`symbol`元素本身是不呈现的。只有`symbol`元素的实例（亦即，一个引用了`symbol`的 `<use>`元素）才能呈现。

用法
--

|  |  |
| --- | --- |
| 类别 | 容器元素、结构元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：动画元素描述性元素形状元素结构化元素渐变元素`<a>`、`<clipPath>`、`<color-profile>`、`<cursor>`、`<filter>`、`<font>`、`<font-face>`、`<foreignObject>`、`<image>`、`<marker>`、`<mask>`、`<pattern>`、`<script>`、`<style>`、`<switch>`、`<text>`、`<view>` |

示例
--


```html
<svg>
  <!-- symbol definition NEVER draw -->
  <symbol id="sym01" viewBox="0 0 150 110">
    <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red" />
    <circle
 cx="90"
 cy="60"
 r="40"
 stroke-width="8"
 stroke="green"
 fill="white" />
  </symbol>

  <!-- actual drawing by "use" element -->
  <use xlink:href="#sym01" x="0" y="0" width="100" height="50" />
  <use xlink:href="#sym01" x="0" y="50" width="75" height="38" />
  <use xlink:href="#sym01" x="0" y="100" width="50" height="25" />
</svg>
```

属性
--

### 全局属性

* 核心属性 »
* 图形事件属性 »
* 外观属性 »
* `class (en-US)`
* `style`
* `externalResourcesRequired`
### 专有属性

* `preserveAspectRatio`
* `viewBox`
DOM 接口
------

该元素实现了 `SVGSymbolElement` 接口。

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

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

另见
--

* `<marker>`
* `<pattern>`
font-face-src
=============

`font-face-src`元素相当于 CSS 规范中的 @font-face 属性。它可以作为`<font-face-name>`元素的容器使用，指向本地安装的字体副本，`<font-face-uri>`元素则是利用远程定义字体。

用法
--

|  |  |
| --- | --- |
| 类别 | 字体元素 |
| 允许的内容 | 一个或多个下列元素，顺序不限：`<font-face-name>`、`<font-face-uri>` |

示例
--

属性
--

### 全局属性

* 核心属性 »
### 专有属性

*无。*

DOM 接口
------

该元素实现了 `SVGFontFaceSrcElement` 接口。

相关内容
----

* `<font-face>`
* SVG 教程：SVG 字体
path
====

**起步**
 本教程将教你开始使用 SVG 路径。

path 元素是用来定义形状的通用元素。所有的基本形状都可以用 path 元素来创建。

用法
--

|  |  |
| --- | --- |
| 类别 | 图形元素、形状元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：动画元素描述性元素 |

示例
--
```

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



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 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>
```


输出结果：

属性
--

### 全局属性

* 条件处理属性 »
* 核心属性 »
* 图形事件属性 »
* 外观属性 »
* `class (en-US)`
* `style`
* `externalResourcesRequired`
* `transform`
### 专有属性

* `d`
* `pathLength (en-US)`
DOM 接口
------

该元素实现了 `SVGPathElement` (en-US) 接口。

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

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

参见
--

* `<circle>`
* `<ellipse>`
* `<line>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* The MDN SVG "Getting Started" tutorial : Path
feFlood
=======

该滤镜用`flood-color (en-US)`元素定义的颜色和`flood-opacity (en-US)`元素定义的不透明度填充了滤镜子区域。

用法
--

|  |  |
| --- | --- |
| 类别 | 滤镜元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：`<animate>`、`<set>` |

示例
--

属性
--

### 全局属性

* 核心属性 »
* 外观属性 »
* 滤镜属性 »
* `class (en-US)`
* `style`
### 专有属性

* `flood-color (en-US)`
* `flood-opacity (en-US)`
DOM 接口
------

该元素实现了 `SVGFEFloodElement` 接口。

参见
--

* `<filter>`
* `<animate>`
* `<animateColor>`
* `<set>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* SVG 教程：滤镜效果
font
====

`font`元素定义了一个用于文字布局的字体。

用法
--

|  |  |
| --- | --- |
| 类别 | 字体元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：描述性元素`<font-face>`、`<glyph>`、`<hkern>`、`<missing-glyph>`、`<vkern>` |

示例
--

属性
--

### 全局属性

* 核心属性 »
* 外观属性 »
* `class (en-US)`
* `style`
* `externalResourcesRequired`
### 专有属性

* `horiz-origin-x (en-US)`
* `horiz-origin-y (en-US)`
* `horiz-adv-x (en-US)`
* `vert-origin-x (en-US)`
* `vert-origin-y (en-US)`
* `vert-adv-y (en-US)`
DOM 接口
------

该元素实现 `SVGFontElement` 接口。

参见
--

* `<font-face>`
* `<glyph>`
* `<text>`
* SVG 教程：SVG 字体
glyphRef
========

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

`glyphRef` 元素为引用的 `<altGlyph>` 替代物提供了一个唯一可能的字形。

用法
--

|  |  |
| --- | --- |
| 类别 | 文本内容元素 |
| 允许的内容 | 空 |

属性
--

### 全局属性

* 核心属性
* 表现属性
* XLink 属性
* `class (en-US)`
* `style`
### 专有属性

* `x` 
已弃用
* `y` 
已弃用
* `dx` 
已弃用
* `dy (en-US)` 
已弃用
* `glyphRef` 
已弃用
* `format` 
已弃用
* `xlink:href (en-US)`
DOM 接口
------

该元素实现了 `SVGGlyphRefElement` 接口。

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

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

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

**备注：** 尽量使用 CSS 中的 `cursor` 属性来替换该属性。

`cursor`元素可以用来定义独立于平台的自定义指针。要想定义独立于平台的指针，建议先创建一个 PNG 图象，然后定义一个引用该 PNG 图像的`cursor`元素，并在图像内部标识指针头（亦即，热点）的精确位置。

建议使用 PNG 格式，因为它支持利用 alpha 通道定义透明并遮罩的能力。如果使用了别的图像格式，这个格式必须支持透明度遮罩的定义（两个选项：提供一个明确的 alpha 通道或者使用一个特殊的像素色以表示透明度）。如果能够确定透明度遮罩，遮罩确定了指针的形状；否则，指针将是一个不透明的矩形。通常地，别的像素信息（例如，R、G、B 通道）定义了指针没有被遮罩到的部分的颜色，注意指针一般至少包含两个颜色，这样在大多数背景中都能看到指针。

用法
--

|  |  |
| --- | --- |
| 类别 | 无 |
| 允许的内容 | 任意数量、任意顺序的下列元素：描述性元素 |

属性
--

### 全局属性

* 条件处理属性 (en-US) »
* 核心属性 (en-US) »
* Xlink 属性 (en-US) »
* `externalResourcesRequired`
### 专有属性

* `x`
* `y`
* `xlink:href (en-US)`
DOM 接口
------

该元素实现了 `SVGCursorElement` (en-US) 接口。

规范
--

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

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

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

SVG 元素 **`<clipPath>`** 定义一条剪切路径，可作为其他元素的 `clip-path` 属性的值。

剪切路径限制了图形的可见范围。从概念上来说，如果图形超出了当前剪切路径所包围的区域，那么超出部分将不会绘制。

示例
--
```

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



```html
<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
 圆圈外的所有东西都会被裁剪掉，因此不可见。
 -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <!-- 作为引用元素（英文原文：for reference）的黑色心形 -->
  <path
 id="heart"
 d="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" />

  <!--
 和上述黑色心形形状相同的红色心形，剪切路径是上面定义的圆；
 红色心形只有在圆内的部分可见。
 -->
  <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" />
</svg>
```



```css
/\* 如果浏览器支持几何属性 r，可以加一点 css \*/

@keyframes openYourHeart {
  from {
    r: 0;
  }
  to {
    r: 60px;
  }
}

#myClip circle {
  animation: openYourHeart 15s infinite;
}
```


从概念上讲，剪切路径等于给引用元素设置了一个自定义的可视区域。因此，它虽然会影响一个元素的绘制，但不会影响这个元素本身的几何形状，比如被剪切元素（通过 `clip-path` 属性引用了 `<clipPath>` 的元素及其子元素）的包围盒和没有被剪切时相同。

默认情况下，`pointer-events` 不会在被剪切掉的区域（不可见的区域）内触发。举个例子，如果一个半径为 10 的圆形被剪切成半径为 5 的圆形，那么这个圆在半径为 5 以外的区域不会收到“click”事件。

属性
--

`clipPathUnits (en-US)`

 为 `<clipPath>` 元素的内容定义坐标系。
 *Value type*: `userSpaceOnUse`|`objectBoundingBox` ; *Default value*: `userSpaceOnUse`; *Animatable*: **yes**

### 全局属性

Core Attributes

Most notably: `id`

Styling Attributes
`class (en-US)`, `style`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage (en-US)`

Presentation Attributes

Most notably: `clip-path`, `clip-rule (en-US)`, `color`, `display`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect`, `visibility`

用法
--

|  |  |
| --- | --- |
| 类别 | 无 |
| 允许的内容 | 任意数量、任意顺序的下列元素：动画元素描述性元素形状元素`<text>`、`<use>` |

规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # ClipPathElement |

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

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

相关内容
----

* Other clipping and masking SVG elements: `<mask>`
* Some CSS properties: `clip-path`, `pointer-events`
feSpecularLighting
==================

该滤镜照亮一个源图形，使用 alpha 通道作为隆起映射。该结果图像是一个基于光色的 RGBA 图象。该光照计算遵守标准冯氏照明模式的镜面组件。结果图像依赖于光色、光的位置以及输入隆起映射的表面几何形状。光照计算的结果是叠加的。该滤镜假定观察者在 X 方向无穷远处。

该滤镜制作了一个图像，图像包含光照计算的镜面反射部分。如此一个映射是为了与纹理相结合，使用算术`<feComposite>`方法的叠加。利用在应用到纹理图像前添加多个光映射，可以模拟多个光源。

用法
--

|  |  |
| --- | --- |
| 类别 | 滤镜元素 |
| 允许的内容 | 有且只有一个光源元素在先，任意数量的描述性元素顺序不限。 |

示例
--

属性
--

### 全局属性

* 核心属性 »
* 外观属性 »
* 滤镜属性 »
* `class (en-US)`
* `style`
### 专有属性

* `in`
* `surfaceScale (en-US)`
* `specularConstant (en-US)`
* `specularExponent (en-US)`
* `kernelUnitLength (en-US)`
DOM 接口
------

该元素实现了 `SVGFESpecularLightingElement` 接口。

参见
--

* `<filter>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDistantLight>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<fePointLight>`
* `<feSpotLight>`
* `<feTile>`
* `<feTurbulence>`
* SVG 教程：滤镜效果
font-face-format
================

`font-face-format`元素描述了它的父`<font-face-uri>`元素引用的字体的类型。

用法
--

|  |  |
| --- | --- |
| 类别 | 字体元素 |
| 允许的内容 | 空 |

示例
--

属性
--

### 全局属性

* 核心属性 »
### 专有属性

* `string (en-US)`
DOM 接口
------

该元素实现了 `SVGFontFaceFormatElement` 接口。

参见
--

* `<font-face-uri>`
* SVG tutorial: SVG fonts
feTurbulence
============

该滤镜利用 Perlin 噪声函数创建了一个图像。它实现了人造纹理比如说云纹、大理石纹的合成。

用法
--

|  |  |
| --- | --- |
| 类别 | 滤镜元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：`<animate>`、`<set>` |

示例
--

属性
--

### Global 属性

* 核心属性 »
* 外观属性 »
* 滤镜属性 »
* `class (en-US)`
* `style`
### 专有属性

* `baseFrequency (en-US)`
* `numOctaves (en-US)`
* `seed`
* `stitchTiles (en-US)`
* `type`
DOM 接口
------

该元素实现了 `SVGFETurbulenceElement` 接口。

参见
--

* `<filter>`
* `<animate>`
* `<set>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* SVG 教程：滤镜效果
feImage
=======

`feImage 滤镜从外部来源取得图像数据，并提供像素数据作为输出（意味着如果外部来源是一个 SVG 图像，这个图像将被栅格化。）`

用法
--

|  |  |
| --- | --- |
| 类别 | 滤镜元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：`<animate>`、`<animateTransform>`、`<set>` |

属性
--

### 全局属性

* 核心属性 »
* 外观属性 »
* 滤镜属性 »
* XLink 属性 »
* `class (en-US)`
* `style`
* `externalResourcesRequired`
### 专有属性

* `preserveAspectRatio`
* `xlink:href (en-US)`
DOM 接口
------

该元素实现了`SVGFEImageElement` (en-US)接口。

示例
--

### SVG


```html
<svg
 viewBox="0 0 200 200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="image">
      <feImage xlink:href="/files/6457/mdn\_logo\_only\_color.png" />
    </filter>
  </defs>

  <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);" />
</svg>
```

### 结果

规格
--

| Specification |
| --- |
| Filter Effects Module Level 1 # feImageElement |

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

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

参见
--

* `<filter>`
* `<animate>`
* `<animateTransform>`
* `<set>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* SVG 教程：滤镜效果
animateTransform
================

`animateTransform`元素变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。

用法
--

|  |  |
| --- | --- |
| 类别 | 动画元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：描述性元素 |

示例
--


```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"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <polygon points="60,30 90,90 30,90">
    <animateTransform
 attributeName="transform"
 attributeType="XML"
 type="rotate"
 from="0 60 70"
 to="360 60 70"
 dur="10s"
 repeatCount="indefinite" />
  </polygon>
</svg>
```

属性
--

### 全局属性

* 条件处理属性
* 核心属性
* 动画事件属性
* Xlink 属性
* 动画属性目标属性
* 动画定时属性
* 动画值属性
* 动画累加属性
* `externalResourcesRequired`
### 专有属性

* `by (en-US)`
* `from`
* `to (en-US)`
* `type`
DOM 接口
------

该元素实现了 `SVGAnimateTransformElement` (en-US) 接口。
feFuncA
=======

SVG 滤镜 **`<feFuncA>`** 为它的父元素 `<feComponentTransfer>` 的输入图形的透明度（alpha）组件定义了变换函数。

用法
--

|  |  |
| --- | --- |
| 类别 | 无 |
| 允许的内容 | 任意数量、任意顺序的下列元素：`<animate>`、`<set>` |

属性
--

### 全局属性

* 核心属性
* Transfer function attributes
### 专有属性

*无。*

DOM 接口
------

该元素实现了 `SVGFEFuncAElement` (en-US) 接口。

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # feFuncAElement |

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

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

参见
--

* `<filter>`
* `<animate>`
* `<set>`
* `<feComponentTransfer>`
* `<feFuncR>`
* `<feFuncB>`
* `<feFuncG>`
* SVG 教程：滤镜效果
textPath
========

除了笔直地绘制一行文字以外，SVG 也可以根据 `<path>` 元素的形状来放置文字。只要在`textPath`元素内部放置文本，并通过其`xlink:href`属性值引用`<path>`元素，我们就可以让文字块呈现在`<path>`元素给定的路径上了。

用法
--

|  |  |
| --- | --- |
| 类别 | 文本内容元素、文本内容子元素 |
| 允许的内容 | 字符数据和任意数量、任意顺序的下列元素：描述性元素`<a>`、`<animate>`、`<set>`、`<tref>`、`<tspan>` |

示例
--


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 1000 300"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path
 id="MyPath"
 d="M 100 200
 C 200 100 300 0 400 100
 C 500 200 600 300 700 200
 C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="red" />

  <text font-family="Verdana" font-size="42.5">
    <textPath xlink:href="#MyPath">
      We go up, then we go down, then up again
    </textPath>
  </text>

  <!-- Show outline of the viewport using 'rect' element -->
  <rect
 x="1"
 y="1"
 width="998"
 height="298"
 fill="none"
 stroke="black"
 stroke-width="2" />
</svg>
```


即时结果：

属性
--

### 全局属性

* 条件处理属性 »
* 核心属性 »
* 图形事件属性 »
* 外观属性 »
* Xlink 属性 »
* `class (en-US)`
* `style`
* `externalResourcesRequired`
### 专有属性

* `startOffset (en-US)`
* `method (en-US)`
* `spacing (en-US)`
* `xlink:href (en-US)`
DOM 接口
------

该元素实现了 `SVGTextPathElement` 接口。
polygon
=======

**`polygon`** 元素定义了一个由一组首尾相连的直线线段构成的闭合多边形形状。最后一点连接到第一点。欲了解开放形状，请看`<polyline>`元素。

用法
--

|  |  |
| --- | --- |
| 类别 | 基本形状元素、图形元素、形状元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：动画元素描述性元素 |

示例
--
```

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



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 具有默认填充的多边形示例 -->
  <polygon points="0,100 50,25 50,75 100,0" />

  <!-- 具有描边但无填充的相同的多边形形状示例 -->
  <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
```

属性
--

### 全局属性

* 条件处理属性 »
* 核心属性 »
* 图形事件属性 »
* 外观属性 »
* `class (en-US)`
* `style`
* `externalResourcesRequired`
* `transform`
### 专有属性

* `points`
DOM 接口
------

该元素实现了 `SVGPolygonElement` 接口。

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

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

相关内容
----

* `<polyline>`
font-face-name
==============

`font-face-name`元素指向本地安装的字体副本，用字体名称识别。

用法
--

|  |  |
| --- | --- |
| 类别 | 无 |
| 允许的内容 | 空 |

示例
--

属性
--

### 全局属性

* 核心属性 »
### 专有属性

* `name (en-US)`
DOM 接口
------

该对象实现了 `SVGFontFaceNameElement` 接口。

相关内容
----

* `<font-face-src>`
* SVG 教程：SVG 字体
polyline
========

`polyline`元素是 SVG 的一个基本形状，用来创建一系列直线连接多个点。典型的一个`polyline`是用来创建一个开放的形状，最后一点不与第一点相连。欲了解闭合形状，请看`<polygon>` 元素。

用法
--

|  |  |
| --- | --- |
| 类别 | 基本形状元素、图形元素、形状元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：动画元素描述性元素 |

示例
--
```

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



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 具有默认填充的折线示例 -->
  <polyline points="0,100 50,25 50,75 100,0" />

  <!-- 具有描边但无填充的相同的多段线形状示例 -->
  <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
```

属性
--

### 全局属性

* 条件处理属性 »
* 核心属性 »
* 图形事件属性 »
* 外观属性 »
* `class (en-US)`
* `style`
* `externalResourcesRequired`
* `transform`
### 专有属性

* `points`
DOM 接口
------

该元素实现了 `SVGPolylineElement` 接口。

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

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

参见
--

* `<line>`
* `<polygon>`
defs
====

SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在`defs`元素里面。这样做可以增加 SVG 内容的易读性和无障碍。在`defs`元素中定义的图形元素不会直接呈现。你可以在你的视口的任意地方利用 `<use>`元素呈现这些元素。

用法
--

|  |  |
| --- | --- |
| 类别 | 容器元素、结构元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：动画元素描述性元素形状元素结构化元素渐变元素`<a>`、`<clipPath>`、`<color-profile>`、`<cursor>`、`<filter>`、`<font>`、`<font-face>`、`<foreignObject>`、`<image>`、`<marker>`、`<mask>`、`<pattern>`、`<script>`、`<style>`、`<switch>`、`<text>`、`<view>` |

示例
--


```xml
<svg width="80px" height="30px" viewBox="0 0 80 30"
 xmlns="http://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="60" height="10"
 fill="url(#Gradient01)" />
</svg>
```

属性
--

### 全局属性

* 条件处理属性 »
* 核心属性 »
* 图形事件属性 »
* 外观属性 »
* `class (en-US)`
* `style`
* `externalResourcesRequired`
* `transform`
### 专有属性

*没有专有属性。*

DOM 接口
------

这个元素实现了 `SVGDefsElement` 接口。

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

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

参见
--

* `<use>`
feBlend
=======

`feBlend`滤镜把两个对象组合在一起，使它们受特定的混合模式控制。这类似于图像编辑软件中混合两个图层。该模式由属性`mode`定义。

用法
--

|  |  |
| --- | --- |
| 类别 | 滤镜元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：`<animate>`、`<set>` |

属性
--

### 全局属性

* 核心属性 »
* 外观属性 »
* 滤镜属性属性 »
* `class (en-US)`
* `style`
### 专有属性

* `in`
* `in2 (en-US)`
* `mode`
DOM 接口
------

该元素实现了 `SVGFEBlendElement` 接口。

示例
--

### SVG


```html
<svg
 width="200"
 height="200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="spotlight">
      <feFlood
 result="floodFill"
 x="0"
 y="0"
 width="100%"
 height="100%"
 flood-color="green"
 flood-opacity="1" />
      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />
    </filter>
  </defs>

  <image
 xlink:href="/files/6457/mdn\_logo\_only\_color.png"
 x="10%"
 y="10%"
 width="80%"
 height="80%"
 style="filter:url(#spotlight);" />
</svg>
```

### 结果

参见
--

* `<filter>`
* `<animate>`
* `<set>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* SVG tutorial: Filter effects
feColorMatrix
=============

该滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值 (一个表示为 [红，绿，蓝，透明度] 的矢量) 都经过矩阵乘法 (matrix multiplated) 计算出的新颜色。

用法
--

|  |  |
| --- | --- |
| 类别 | 滤镜元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：`<animate>`、`<set>` |

示例
--


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 150 360"
 preserveAspectRatio="xMidYMid meet"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="70" y="50">Reference</text>
  <g>
    <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
    <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
  </g>

  <text x="70" y="120">matrix</text>

  <filter id="colorMeMatrix">
    <feColorMatrix
 in="SourceGraphic"
 type="matrix"
 values="0 0 0 0 0
 1 1 1 1 0
 0 0 0 0 0
 0 0 0 1 0" />
  </filter>

  <g filter="url(#colorMeMatrix)">
    <circle cx="30" cy="100" r="20" fill="blue" fill-opacity="0.5" />
    <circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="120" r="20" fill="red" fill-opacity="0.5" />
  </g>

  <text x="70" y="190">saturate</text>

  <filter id="colorMeSaturate">
    <feColorMatrix in="SourceGraphic" type="saturate" values="0.2" />
  </filter>

  <g filter="url(#colorMeSaturate)">
    <circle cx="30" cy="170" r="20" fill="blue" fill-opacity="0.5" />
    <circle cx="20" cy="190" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" />
  </g>

  <text x="70" y="260">hueRotate</text>

  <filter id="colorMeHueRotate">
    <feColorMatrix in="SourceGraphic" type="hueRotate" values="180" />
  </filter>

  <g filter="url(#colorMeHueRotate)">
    <circle cx="30" cy="240" r="20" fill="blue" fill-opacity="0.5" />
    <circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="260" r="20" fill="red" fill-opacity="0.5" />
  </g>

  <text x="70" y="320">luminanceToAlpha</text>

  <filter id="colorMeLTA">
    <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />
  </filter>

  <g filter="url(#colorMeLTA)">
    <circle cx="30" cy="310" r="20" fill="blue" fill-opacity="0.5" />
    <circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" />
    <circle cx="40" cy="330" r="20" fill="red" fill-opacity="0.5" />
  </g>
</svg>
```


该示例渲染效果如下所示：

属性
--

### 全局属性

* 核心属性 »
* 外观属性 »
* 滤镜属性 »
* `class (en-US)`
* `style`
### 专有属性

* `in`
* `type`
* `values`
DOM 接口
------

该元素实现 `SVGFEColorMatrixElement` 接口。

参见
--

* `<filter>`
* `<animate>`
* `<set>`
* `<feBlend>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* SVG 教程：滤镜效果
<animate>
=========

动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。

示例
--
```

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



```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate
 attributeName="rx"
 values="0;5;0"
 dur="10s"
 repeatCount="indefinite" />
  </rect>
</svg>
```


属性
--

### 动画属性

动画时间属性
`begin`、`dur`、`end`、`min (en-US)`、`max (en-US)`、`restart (en-US)`、`repeatCount`、`repeatDur`、`fill`
动画取值属性
`calcMode (en-US)`、`values`、`keyTimes`、`keySplines (en-US)`、`from`、`to (en-US)`、`by (en-US)`
其他动画属性

最主要的有：`attributeName`、`additive (en-US)`、`accumulate`

动画事件属性

最主要的有：`onbegin`、`onend`、`onrepeat`

### 全局属性

核心属性 (en-US)

最主要的有：`id`

样式属性
`class (en-US)`、`style`
事件属性

全局事件属性 (en-US)、文档元素事件属性 (en-US)

用法
--

该元素实现了 `SVGAnimateElement` 接口。

无障碍说明
-----

对于存在认知问题（如，患有注意缺陷多动障碍 (ADHD)）的人来说，闪烁动画可能会引发一些问题。此外，某些动画可能会引起前庭相关疾病、癫痫、偏头痛和光敏综合征（Scotopic sensitivity）。

考虑提供一种暂停或禁用动画的机制，并配合使用偏好减少动画的媒体查询来为不喜欢动画的用户提供更舒适的体验。

* Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
* An Introduction to the Reduced Motion Media Query | CSS-Tricks
* Responsive Design for Motion | WebKit
* MDN Understanding WCAG, Guideline 2.2 explanations (en-US)
* Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
规范
--

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

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

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