recursal/MDN huggingface dataset:
feDiffuseLighting
=================

滤镜光照一个图像，使用 alpha 通道作为隆起映射。结果图像，是一个 RGBA 不透明图像，取决于光的颜色、光的位置以及输入隆起映射的表面几何形状。

滤镜制造的光映射可以与一个纹理图像组合，使用`<feComposite>`滤镜的多重 `arithmetic` 操作。在应用纹理图案之前合加多个光映射可以模拟多重光源。

用法
--

|  |  |
| --- | --- |
| 类别 | 滤镜元素 |
| 允许的内容 | 任意数量的描述性元素以及不多不少一个光源元素，顺序不限。 |

示例
--

以下示例演示了一个圆上的`feDiffuseLighting`元素的效果，演示了每种可用的光源，光的方向来自左上角。


```html
<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg">
  <!-- No light is applied -->
  <text text-anchor="middle" x="60" y="22">No Light</text>
  <circle cx="60" cy="80" r="50" fill="green" />

  <!-- the light source is a fePointLight element -->
  <text text-anchor="middle" x="170" y="22">fePointLight</text>
  <filter id="lightMe1">
    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
      <fePointLight x="150" y="60" z="20" />
    </feDiffuseLighting>

    <feComposite
 in="SourceGraphic"
 in2="light"
 operator="arithmetic"
 k1="1"
 k2="0"
 k3="0"
 k4="0" />
  </filter>

  <circle cx="170" cy="80" r="50" fill="green" filter="url(#lightMe1)" />

  <!-- the light source is a feDistantLight element -->
  <text text-anchor="middle" x="280" y="22">feDistantLight</text>
  <filter id="lightMe2">
    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
      <feDistantLight azimuth="240" elevation="20" />
    </feDiffuseLighting>

    <feComposite
 in="SourceGraphic"
 in2="light"
 operator="arithmetic"
 k1="1"
 k2="0"
 k3="0"
 k4="0" />
  </filter>

  <circle cx="280" cy="80" r="50" fill="green" filter="url(#lightMe2)" />

  <!-- the light source is a feSpotLight source -->
  <text text-anchor="middle" x="390" y="22">feSpotLight</text>
  <filter id="lightMe3">
    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
      <feSpotLight
 x="360"
 y="5"
 z="30"
 limitingConeAngle="20"
 pointsAtX="390"
 pointsAtY="80"
 pointsAtZ="0" />
    </feDiffuseLighting>

    <feComposite
 in="SourceGraphic"
 in2="light"
 operator="arithmetic"
 k1="1"
 k2="0"
 k3="0"
 k4="0" />
  </filter>

  <circle cx="390" cy="80" r="50" fill="green" filter="url(#lightMe3)" />
</svg>
```


实时呈现：

属性
--

### 全局属性

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

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

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

参见
--

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

该滤镜为它的父`<feComponentTransfer>`元素的输入图形的绿色成分定义了变换函数。

用法
--

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

示例
--

属性
--

### 全局属性

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

* 变换函数属性 »
DOM 接口
------

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

参见
--

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

使用预定义的图形对一个对象进行填充或描边，就要用到`pattern`元素。`pattern`元素让预定义图形能够以固定间隔在 x 轴和 y 轴上重复（或平铺）从而覆盖要涂色的区域。先使用`pattern` 元素定义图案，然后在给定的图形元素上用属性 `fill` 或属性 `stroke` 引用用来填充或描边的图案。

用法
--

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

示例
--
```

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



```html
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
    </pattern>
  </defs>

  <circle cx="50" cy="50" r="50" fill="url(#star)" />
  <circle
 cx="180"
 cy="50"
 r="40"
 fill="none"
 stroke-width="20"
 stroke="url(#star)" />
</svg>
```

属性
--

### 全局属性

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

* `patternUnits (en-US)`
* `patternContentUnits (en-US)`
* `patternTransform (en-US)`
* `x`
* `y`
* `width`
* `height`
* `xlink:href (en-US)`
* `preserveAspectRatio`
DOM 接口
------

该元素实现了 `SVGPatternElement` 接口。
fePointLight
============

用法
--

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

示例
--

属性
--

### 全局属性

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

* `x`
* `y`
* `z (en-US)`
DOM 接口
------

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

参见
--

* `<filter>`
* `<animate>`
* `<set>`
* `<feDiffuseLighting>`
* `<feSpecularLighting>`
* `<feDistantLight>`
* `<feSpotLight>`
* SVG 教程：滤镜效果
line
====

`line`元素是一个 SVG 基本形状，用来创建一条连接两个点的线。

用法
--

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

示例
--
```

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



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />

  <!-- 如果不指定描边颜色，则无法看见线条 -->
</svg>
```

属性
--

### 全局属性

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

* `x1 (en-US)`
* `x2 (en-US)`
* `y1 (en-US)`
* `y2 (en-US)`
DOM 接口
------

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

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

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

参见
--

* `<polygon>`
* `<path>`
switch
======

`switch`元素对它的直接子元素上的属性`requiredFeatures (en-US)`、属性`requiredExtensions` 和 属性`systemLanguage (en-US)`按照顺序进行评估，然后处理和呈现第一个评估为`true`的子元素。其他子元素会被绕过不会被呈现。如果某个子元素是容器元素比如说是一个`<g>`元素，那么整个子树会被处理呈现或者全部绕过不呈现。

注意：属性`display`和属性`visibility`的值对`switch 元素处理是不起作用的。`特别是，在`switch 元素的子元素上`设置`display`为 none，对`switch` 元素的 true/false 测试处理不起作用。

用法
--

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

示例
--

属性
--

### 全局属性

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

* `allowReorder`
DOM 接口
------

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

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

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

一个渐变上的颜色坡度，是用`stop`元素定义的。`stop`元素可以是`<linearGradient>`元素或者`<radialGradient>`元素的子元素。

用法
--

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

示例
--


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 80 40"
 xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="MyGradient">
      <stop offset="5%" stop-color="#F60" />
      <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
  </defs>

  <!-- Outline the drawing area in black -->
  <rect fill="none" stroke="black" x="0.5" y="0.5" width="79" height="39" />

  <!-- The rectangle is filled using a linear gradient -->
  <rect
 fill="url(#MyGradient)"
 stroke="black"
 stroke-width="1"
 x="10"
 y="10"
 width="60"
 height="20" />
</svg>
```


示例输出：

属性
--

### 全局属性

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

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

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

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

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

参见
--

* `<linearGradient>`
* `<radialGradient>`
feSpotLight
===========

`feSpotLight`元素是一种光源元素，用于 SVG 文件。

用法
--

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

示例
--

属性
--

### 全局属性

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

* `x`
* `y`
* `z (en-US)`
* `pointsAtX (en-US)`
* `pointsAtY (en-US)`
* `pointsAtZ (en-US)`
* `specularExponent (en-US)`
* `limitingConeAngle (en-US)`
DOM 接口
------

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

参见
--

* `<filter>`
* `<animate>`
* `<set>`
* `<feDiffuseLighting>`
* `<feSpecularLighting>`
* `<feDistantLight>`
* `<fePointLight>`
* SVG 教程：滤镜效果
feFuncR
=======

该滤镜为它的父`<feComponentTransfer>`元素的输入图形的红色成分定义了变换函数。

用法
--

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

示例
--

属性
--

### 全局属性

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

* 变换函数属性 »
DOM 接口
------

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

参见
--

* `<filter>`
* `<animate>`
* `<set>`
* `<feComponentTransfer>`
* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* SVG 教程：滤镜效果
font-face-uri
=============

`font-face-uri`元素指向远程字义的当前字体。

用法
--

|  |  |
| --- | --- |
| 类别 | 字体元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：`<font-face-format>` |

示例
--

属性
--

### 全局属性

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

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

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

参见
--

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

`rect`元素是 SVG 的一个基本形状，用来创建矩形，基于一个角位置以及它的宽和高。它还可以用来创建圆角矩形。

用法
--

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

示例
--
```

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



```html
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rectangle -->
  <rect width="100" height="100" />

  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>
```

属性
--

### 全局属性

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

* `x`
* `y`
* `width`
* `height`
* `rx`
* `ry (en-US)`
DOM 接口
------

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

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

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

参见
--

* `<path>`
missing-glyph
=============

如果对于给定的字符，字体没有定义一个合适的 `<glyph>`，那么就会呈现`missing-glyph`元素的内容。

用法
--

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

示例
--

属性
--

### 全局属性

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

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

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

相关内容
----

* `<font>`
* `<glyph>`
* SVG 教程：SVG 字体
circle
======

**`<circle>`** SVG 元素是一个 SVG 的基本形状，用来创建圆，基于一个圆心和一个半径。

用法
--

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

示例
--
```

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



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>
```

属性
--

### 全局属性

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

* `cx`
* `cy`
* `r`
DOM 接口
------

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

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

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

相关内容
----

* `<ellipse>`
vkern
=====

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

在自上而下的字体中，`vkern` 元素可以精确地调整两个字符（glyph）间的垂直距离。这个处理被称为字距处理。

用法
--

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

属性
--

### 全局属性

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

* `u1 (en-US)`
* `g1 (en-US)`
* `u2 (en-US)`
* `g2 (en-US)`
* `k (en-US)`
示例
--

DOM 接口
------

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

规范
--

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

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

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

参见
--

* `<font>`
* `<glyph>`
* `<hkern>`
* SVG 教程：SVG 字体
hkern
=====

在自上而下的字体中，`hkern`元素可以精细调整两个雕刻文字的水平距离。这个处理就是”字距处理“

用法
--

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

示例
--

属性
--

### 全局属性

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

* `u1 (en-US)`
* `g1 (en-US)`
* `u2 (en-US)`
* `g2 (en-US)`
* `k (en-US)`
DOM 接口
------

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

参见
--

* `<font>`
* `<glyph>`
* `<hkern>`
* SVG 教程：SVG 字体
style
=====

`style`元素元素样式表直接在 SVG 内容中间嵌入。SVG 的`style`元素的属性与 HTML 中的相应的元素并无二致（请阅读 HTML 的 `<style>` 元素）。

用法
--

|  |  |
| --- | --- |
| 类别 | 无 |
| 允许的内容 | 任意元素或字符数据 |

示例
--


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 100 100"
 xmlns="http://www.w3.org/2000/svg">
  <style>
 /\* <![CDATA[ \*/
 circle {
 fill: orange;
 stroke: black;
 stroke-width: 10px; // Note that the value of a pixel depend on the viewBox
 }
 /\* ]]> \*/
 </style>

  <circle cx="50" cy="50" r="40" />
</svg>
```


示例输出

属性
--

### 全局属性

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

* `type`
* `media`
* `title`
DOM 接口
------

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

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

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

参见
--

* HTML 中的 `<style>` 元素
script
======

一个 SVG 脚本元素等同于 HTML 中的 `script` 元素，因此这个位置是面向脚本的（例如，ECMAScript）。

任何定义在`script`元素中的函数拥有一个跨当前文档的全局范围。

用法
--

|  |  |
| --- | --- |
| 类别 | 无 |
| 允许的内容 | 任意元素或字符数据 |

示例
--

下面的代码片段演示了 SVG `script`标签的作用。在代码中，我们使用 JavaScript 改变 SVG `<circle>` 元素的半径。


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 100 100"
 xmlns="http://www.w3.org/2000/svg">
  <script type="text/javascript">
 // <![CDATA[
 function change(evt) {
 var target = evt.target;
 var radius = target.getAttribute("r");

 if (radius == 15) {
 radius = 45;
 } else {
 radius = 15;
 }

 target.setAttribute("r", radius);
 }
 // ]]>
 </script>

  <circle cx="50" cy="50" r="45" fill="green" onclick="change(evt)" />
</svg>
```


示例输出：

属性
--

### 全局属性

* 核心属性 »
* Xlink 属性 »
* `externalResourcesRequired`
### 专有属性

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

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

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

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

参见
--

* HTML 中的 `script` 元素
mpath
=====

`<animateMotion>` 元素的`mpath`子元素使`<animateMotion>` 元素能够引用一个外部的`<path>`元素作为运动路径的定义。

用法
--

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

示例
--


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 500 300"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect
 x="1"
 y="1"
 width="498"
 height="298"
 fill="none"
 stroke="blue"
 stroke-width="2" />

  <!-- Draw the outline of the motion path in blue, along
 with three small circles at the start, middle and end. -->
  <path
 id="path1"
 d="M100,250 C 100,50 400,50 400,250"
 fill="none"
 stroke="blue"
 stroke-width="7.06" />
  <circle cx="100" cy="250" r="17.64" fill="blue" />
  <circle cx="250" cy="100" r="17.64" fill="blue" />
  <circle cx="400" cy="250" r="17.64" fill="blue" />

  <!-- Here is a triangle which will be moved about the motion path.
 It is defined with an upright orientation with the base of
 the triangle centered horizontally just above the origin. -->
  <path
 d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
 fill="yellow"
 stroke="red"
 stroke-width="7.06">
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
      <mpath xlink:href="#path1" />
    </animateMotion>
  </path>
</svg>
```


实时输出：

属性
--

### 全局属性

* 核心属性 »
* Xlink 属性 »
* `externalResourcesRequired`
### 专有属性

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

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

相关的内容
-----

* `<animateMotion>`
linearGradient
==============

`linearGradient`元素用来定义线性渐变，用于图形元素的填充或描边。

用法
--

|  |  |
| --- | --- |
| 类别 | 渐变元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：描述性元素`<animate>`、`<animateTransform>`、`<set>`、`<stop>` |

示例
--
```

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



```html
<svg
 viewBox="0 0 10 10"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
```

属性
--

### Global 属性

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

* `gradientUnits (en-US)`
* `gradientTransform (en-US)`
* `x1 (en-US)`
* `y1 (en-US)`
* `x2 (en-US)`
* `y2 (en-US)`
* `spreadMethod (en-US)`
* `xlink:href (en-US)`
DOM 接口
------

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

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

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

参见
--

* `<radialGradient>`
* `<stop>`
feMerge
=======

`feMerge`滤镜允许同时应用滤镜效果而不是按顺序应用滤镜效果。利用`result`存储别的滤镜的输出可以实现这一点，然后在一个 `<feMergeNode>`子元素中访问它。

用法
--

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

示例
--

属性
--

### Global 属性

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

*无。*

DOM 接口
------

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

参见
--

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

映射置换滤镜，该滤镜用来自图像中从`in2 (en-US)`到空间的像素值置换图像从`in`到空间的像素值。

用法
--

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

示例
--

属性
--

### 全局属性

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

* `in`
* `in2 (en-US)`
* `scale`
* `xChannelSelector (en-US)`
* `yChannelSelector (en-US)`
DOM 接口
------

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

参见
--

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

该输入图像作为一个整体，在属性`dx`和属性`dy (en-US)`的值指定了它的偏移量。

用法
--

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

示例
--

属性
--

### 全局属性

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

* `in`
* `dx`
* `dy (en-US)`
DOM 接口
------

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

参见
--

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

SVG 文档中的 SVG 元素包含图像信息。它表现为图像文件或者其他 SVG 文件。

SVG 图像格式转换软件支持 JPEG、PNG 格式，是否支持动图 GIF 不明确。

SVG 文件是这样的一种图像：不被当做外部资源加载，不可以用 :visited 样式，不能有交互。使用动态 SVG 元素，可以用<use>引入外部的 URL。使用 SVG 文件并添加 scripts 在里面，可以用<object> 放在 <foreignObject>中。

注意：HTML 规范中定义<image>和<img>在解析时是等效的。这种规范只适用于 SVG 文件或 SVG 区块内。

用法
--

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

属性
--

### 全局属性

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

* `x`：图像水平方向上到原点的距离
* `y`：图像竖直方向上到原点的距离
* `width`：图像宽度。和 HTML 的 <img> 不同，该属性是必须的
* `height`：图像高度。和 HTML 的 <img> 不同，该属性是必须的
* `href (en-US)` 或 `xlink:href (en-US)`：图像的 URL 指向
* `preserveAspectRatio`：控制图像比例
DOM 接口
------

该元素实现 `SVGImageElement` 接口。

示例
--

在 SVG 对象中基本呈现 PNG 图像：


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 100 100"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <image
 xlink:href="/files/2917/fxlogo.png"
 x="0"
 y="0"
 height="100"
 width="100" />
</svg>
```

规范
--

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

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

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

在 `<text>`元素中，利用内含的`tspan`元素，可以调整文本和字体的属性以及当前文本的位置、绝对或相对坐标值。

用法
--

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

示例
--
```

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



```html
<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg">
  <style>
 text {
 font: italic 12px serif;
 }
 tspan {
 font: bold 10px sans-serif;
 fill: red;
 }
 </style>

  <text x="10" y="30" class="small">
    你
    <tspan>不是</tspan>
    香蕉！
  </text>
</svg>
```

属性
--

### 全局属性

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

* `x`
* `y`
* `dx`
* `dy (en-US)`
* `rotate (en-US)`
* `textLength (en-US)`
* `lengthAdjust (en-US)`
DOM 接口
------

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

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

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

参见
--

* `<text>`
feDistantLight
==============

该滤镜定义了一个距离光源，可以用在灯光滤镜`<feDiffuseLighting>`元素或`<feSpecularLighting>`元素的内部。

用法
--

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

示例
--

属性
--

### 全局属性

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

* `azimuth (en-US)`
* `elevation (en-US)`
DOM 接口
------

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

参见
--

* `<filter>`
* `<animate>`
* `<set>`
* `<feDiffuseLighting>`
* `<feSpecularLighting>`
* `<fePointLight>`
* `<feSpotLight>`
* SVG 教程：滤镜效果
set
===

`set`元素可以用来设定一个属性值，并为该值赋予一个持续时间。它支持所有的属性类型，包括那些原理上不能插值的，例如值为字符串和布尔类型的属性。set 元素是非叠加的。无法在其上使用 additive 属性或 accumulate 属性，即使声明了这些属性也会自动被忽略。

用法
--

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

示例
--

属性
--

### 全局属性

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

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

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

参见
--

* `<animate>`
<feDropShadow>
==============

SVG **`<feDropShadow>`** 原语创建输入图像的阴影。它只能在 `<filter>` 元素内使用

**备注：** 可以使用 `flood-color (en-US)` 和 `flood-opacity (en-US)` 表现属性来改变阴影的颜色和不透明度。

示例
--
```

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



```html
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" />
    </filter>
    <filter id="shadow2">
      <feDropShadow dx="0" dy="0" stdDeviation="0.5" flood-color="cyan" />
    </filter>
    <filter id="shadow3">
      <feDropShadow
 dx="-0.8"
 dy="-0.8"
 stdDeviation="0"
 flood-color="pink"
 flood-opacity="0.5" />
    </filter>
  </defs>

  <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);" />

  <circle cx="15" cy="50%" r="4" style="fill:pink; filter:url(#shadow2);" />

  <circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);" />
</svg>
```

属性
--

`dx`

此属性定义了投影的 x 轴偏移量。*值类型*：**<number>**；*默认值*：`2`；*可用于动画*：**是**

`dy (en-US)`

此属性定义了投影的 y 轴偏移量。*值类型*：**<number>**；*默认值*：`2`；*可用于动画*：**是**

`stdDeviation`

此属性定义了投影的模糊操作的标准差。*值类型*：**<number>**；*默认值*：`2`；*可用于动画*：**是**

### 全局属性

核心属性 (en-US)

最应注意：`id`

样式属性
`class (en-US)`、`style`
滤镜原始属性
`height`、`in`、`result`、`x`、`y`、`width`
表现属性 (en-US)

最应注意：`flood-color (en-US)`、`flood-opacity (en-US)`

用法
--

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

规范
--

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

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

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