SVG 属性参考 - SVG：可缩放矢量图形

SVG 属性参考
========

SVG 元素可以通过属性来修改，这些属性指定有关如何处理或呈现元素的详细信息。下面列出了 SVG 中所有的可用属性以及参考文档的链接，以帮助你了解哪些元素支持它们，以及它们如何工作。

SVG 属性（从 A-Z 排序）
----------------

### A

* `accent-height`
* `accumulate`
* `additive (en-US)`
* `alignment-baseline`
* `allowReorder`
* `alphabetic (en-US)`
* `amplitude (en-US)`
* `arabic-form (en-US)`
* `ascent (en-US)`
* `attributeName`
* `attributeType`
* `autoReverse`
* `azimuth (en-US)`
### B

* `baseFrequency (en-US)`
* `baseline-shift`
* `baseProfile`
* `bbox (en-US)`
* `begin`
* `bias (en-US)`
* `by (en-US)`
### C

* `calcMode (en-US)`
* `cap-height (en-US)`
* `class (en-US)`
* `clip`
* `clipPathUnits (en-US)`
* `clip-path`
* `clip-rule (en-US)`
* `color`
* `color-interpolation (en-US)`
* `color-interpolation-filters (en-US)`
* `color-profile (en-US)`
* `color-rendering`
* `contentScriptType`
* `contentStyleType`
* `cursor (en-US)`
* `cx`
* `cy`
### D

* `d`
* `decelerate`
* `descent (en-US)`
* `diffuseConstant (en-US)`
* `direction (en-US)`
* `display`
* `divisor (en-US)`
* `dominant-baseline (en-US)`
* `dur`
* `dx`
* `dy (en-US)`
### E

* `edgeMode`
* `elevation (en-US)`
* `enable-background`
* `end`
* `exponent (en-US)`
* `externalResourcesRequired`
### F

* `fill`
* `fill-opacity`
* `fill-rule`
* `filter`
* `filterRes`
* `filterUnits`
* `flood-color (en-US)`
* `flood-opacity (en-US)`
* `font-family`
* `font-size (en-US)`
* `font-size-adjust (en-US)`
* `font-stretch (en-US)`
* `font-style (en-US)`
* `font-variant (en-US)`
* `font-weight (en-US)`
* `format`
* `from`
* `fr`
* `fx`
* `fy`
### G

* `g1 (en-US)`
* `g2 (en-US)`
* `glyph-name (en-US)`
* `glyph-orientation-horizontal (en-US)`
* `glyph-orientation-vertical (en-US)`
* `glyphRef`
* `gradientTransform (en-US)`
* `gradientUnits (en-US)`
### H

* `hanging (en-US)`
* `height`
* `href (en-US)`
* `hreflang`
* `horiz-adv-x (en-US)`
* `horiz-origin-x (en-US)`
### I

* `id`
* `ideographic (en-US)`
* `image-rendering`
* `in`
* `in2 (en-US)`
* `intercept (en-US)`
### K

* `k (en-US)`
* `k1 (en-US)`
* `k2 (en-US)`
* `k3 (en-US)`
* `k4 (en-US)`
* `kernelMatrix`
* `kernelUnitLength (en-US)`
* `kerning (en-US)`
* `keyPoints (en-US)`
* `keySplines (en-US)`
* `keyTimes`
### L

* `lang (en-US)`
* `lengthAdjust (en-US)`
* `letter-spacing (en-US)`
* `lighting-color (en-US)`
* `limitingConeAngle (en-US)`
* `local`
### M

* `marker-end`
* `marker-mid (en-US)`
* `marker-start`
* `markerHeight (en-US)`
* `markerUnits (en-US)`
* `markerWidth (en-US)`
* `mask`
* `maskContentUnits (en-US)`
* `maskUnits (en-US)`
* `mathematical (en-US)`
* `max (en-US)`
* `media`
* `method (en-US)`
* `min (en-US)`
* `mode`
### N

* `name (en-US)`
* `numOctaves (en-US)`
### O

* `offset`
* `opacity`
* `operator (en-US)`
* `order`
* `orient (en-US)`
* `orientation (en-US)`
* `origin`
* `overflow (en-US)`
* `overline-position (en-US)`
* `overline-thickness (en-US)`
### P

* `panose-1 (en-US)`
* `paint-order (en-US)`
* `path`
* `pathLength (en-US)`
* `patternContentUnits (en-US)`
* `patternTransform (en-US)`
* `patternUnits (en-US)`
* `ping`
* `pointer-events`
* `points`
* `pointsAtX (en-US)`
* `pointsAtY (en-US)`
* `pointsAtZ (en-US)`
* `preserveAlpha`
* `preserveAspectRatio`
* `primitiveUnits`
### R

* `r`
* `radius`
* `referrerPolicy`
* `refX (en-US)`
* `refY (en-US)`
* `rel`
* `rendering-intent`
* `repeatCount`
* `repeatDur`
* `requiredExtensions`
* `requiredFeatures (en-US)`
* `restart (en-US)`
* `result`
* `rotate (en-US)`
* `rx`
* `ry (en-US)`
### S

* `scale`
* `seed`
* `shape-rendering`
* `slope (en-US)`
* `spacing (en-US)`
* `specularConstant (en-US)`
* `specularExponent (en-US)`
* `speed`
* `spreadMethod (en-US)`
* `startOffset (en-US)`
* `stdDeviation`
* `stemh (en-US)`
* `stemv (en-US)`
* `stitchTiles (en-US)`
* `stop-color (en-US)`
* `stop-opacity (en-US)`
* `strikethrough-position (en-US)`
* `strikethrough-thickness (en-US)`
* `string (en-US)`
* `stroke`
* `stroke-dasharray`
* `stroke-dashoffset`
* `stroke-linecap`
* `stroke-linejoin`
* `stroke-miterlimit`
* `stroke-opacity`
* `stroke-width`
* `style`
* `surfaceScale (en-US)`
* `systemLanguage (en-US)`
### T

* `tabindex (en-US)`
* `tableValues (en-US)`
* `target`
* `targetX (en-US)`
* `targetY (en-US)`
* `text-anchor`
* `text-decoration`
* `text-rendering (en-US)`
* `textLength (en-US)`
* `to (en-US)`
* `transform`
* `type`
### U

* `u1 (en-US)`
* `u2 (en-US)`
* `underline-position (en-US)`
* `underline-thickness (en-US)`
* `unicode (en-US)`
* `unicode-bidi (en-US)`
* `unicode-range (en-US)`
* `units-per-em (en-US)`
### V

* `v-alphabetic (en-US)`
* `v-hanging (en-US)`
* `v-ideographic (en-US)`
* `v-mathematical (en-US)`
* `values`
* `vector-effect`
* `version`
* `vert-adv-y (en-US)`
* `vert-origin-x (en-US)`
* `vert-origin-y (en-US)`
* `viewBox`
* `viewTarget`
* `visibility`
### W

* `width`
* `widths (en-US)`
* `word-spacing (en-US)`
* `writing-mode (en-US)`
### X

* `x`
* `x-height (en-US)`
* `x1 (en-US)`
* `x2 (en-US)`
* `xChannelSelector (en-US)`
* `xlink:actuate`
* `xlink:arcrole (en-US)`
* `xlink:href (en-US)`
* `xlink:role`
* `xlink:show (en-US)`
* `xlink:title (en-US)`
* `xlink:type (en-US)`
* `xml:base (en-US)`
* `xml:lang (en-US)`
* `xml:space (en-US)`
### Y

* `y`
* `y1 (en-US)`
* `y2 (en-US)`
* `yChannelSelector (en-US)`
### Z

* `z (en-US)`
* `zoomAndPan (en-US)`
SVG 属性（按类别分类）
-------------

### 通用属性

#### 核心属性

`id`, `lang (en-US)`, `tabindex (en-US)`, `xml:base (en-US)`, `xml:lang (en-US)`, `xml:space (en-US)`
#### 样式属性

`class (en-US)`, `style`
#### 条件处理属性

`externalResourcesRequired`, `requiredExtensions`, `requiredFeatures (en-US)`, `systemLanguage (en-US)`.

### XLink 属性

`xlink:href (en-US)`, `xlink:type (en-US)`, `xlink:role`, `xlink:arcrole (en-US)`, `xlink:title (en-US)`, `xlink:show (en-US)`, `xlink:actuate`### 表现属性

**备注：** 所有 SVG 显示属性都可以作为 CSS 属性来使用。

`alignment-baseline`, `baseline-shift`, `clip`, `clip-path`, `clip-rule (en-US)`, `color`, `color-interpolation (en-US)`, `color-interpolation-filters (en-US)`, `color-profile (en-US)`, `color-rendering`, `cursor (en-US)`, `direction (en-US)`, `display`, `dominant-baseline (en-US)`, `enable-background`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `flood-color (en-US)`, `flood-opacity (en-US)`, `font-family`, `font-size (en-US)`, `font-size-adjust (en-US)`, `font-stretch (en-US)`, `font-style (en-US)`, `font-variant (en-US)`, `font-weight (en-US)`, `glyph-orientation-horizontal (en-US)`, `glyph-orientation-vertical (en-US)`, `image-rendering`, `kerning (en-US)`, `letter-spacing (en-US)`, `lighting-color (en-US)`, `marker-end`, `marker-mid (en-US)`, `marker-start`, `mask`, `opacity`, `overflow (en-US)`, `pointer-events`, `shape-rendering`, `stop-color (en-US)`, `stop-opacity (en-US)`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `text-anchor`, `transform`, `text-decoration`, `text-rendering (en-US)`, `unicode-bidi (en-US)`, `vector-effect`, `visibility`, `word-spacing (en-US)`, `writing-mode (en-US)`### 滤镜属性

#### 滤镜原始属性

`height`, `result`, `width`, `x`, `y`
#### 传递函数属性

`type`, `tableValues (en-US)`, `slope (en-US)`, `intercept (en-US)`, `amplitude (en-US)`, `exponent (en-US)`, `offset`### 动画属性

#### 动画属性目标属性

`attributeType`, `attributeName`
#### 动画时间属性

`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)`, `autoReverse`, `accelerate`, `decelerate`
#### 动画累加属性

`additive (en-US)`、`accumulate`### 事件属性

#### 动画事件属性

**`onbegin`**, **`onend`**, **`onrepeat`**

#### 文档事件属性

**`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`**

#### 全局事件属性

**`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragexit`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`**

#### 图像事件属性

**`onactivate`**, **`onfocusin`**, **`onfocusout`**

参见
--

* SVG 元素参考
* SVG 教程
* SVG 接口参考


作为图片的 SVG - SVG：可缩放矢量图形

作为图片的 SVG
=========

SVG 图像可以作为一种图片格式用在很多环境中。很多浏览器支持在下列环境中应用 SVG 图像：

* HTML 的 `<img>` 元素或 `<svg>` 元素
* CSS 的 `background-image` 属性
Gecko 专有的环境
-----------

另外，Gecko 2.0 引入了在以下环境中支持使用 SVG：

* CSS 的`list-style-image`属性
* SVG 的`<image>`元素
* SVG 的`<feImage>`元素
* Canvas 的 `drawImage` 函数
### 局限

如果 SVG 作为一个图像，出于安全目的，Gecko 在 SVG 环境上作了一些限制：

* 禁用了 JavaScript。
* 外部源（比如说：图像、样式表）不能载入，然而行内源可以使用（利用 BlobBuilder 对象 URL 或者 data: URI 属性）。
* 链接的`:visited`伪类不能呈现。
* 禁用了平台原生的小部件样式（基于操作系统主题）

注意上面的限制是对图像环境专有的；它们不能应用到直接看到的 SVG 上，也不能应用到嵌入在 HTML 的`<iframe>`元素、`<object>`元素和`<embed>`元素中的 SVG 上。

规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-image |


Namespaces Crash Course - SVG：可缩放矢量图形

Namespaces Crash Course
=======================

作为 XML 的一个方言，SVG 需要在一个命名空间内（is namespaced）。理解命名空间的概念，以及在你打算编辑 SVG 内容时，命名空间如何使用，是很重要的。SVG 查看器的版本早于 Firefox 1.5 的发布的，都几乎没有注意命名空间的问题，but they are essential to multi-XML dialect supporting user agents such as Gecko-based browsers which must be very strict. 现在，花一点时间来理解命名空间，这会让你以后避免各种麻烦。

### 背景

W3C 的长期目标是使不同类型的 XML 基本内容可以混合在同一个 XML 文件中。例如，SVG 和 MathML 可以直接并入基于 XHTML 的科学文档中。能够混合这样的内容类型有很多优点，但也需要解决一个非常实际的问题。

合理来说，每个 XML 语言定义其规范中描述的标记标签名称的含义。在单个 XML 文档中混合来自不同 XML 方言的内容的问题是，由一个方言定义的标签可能与另一个方言定义的标签具有相同的名称。例如，XHTML 和 SVG 都有一个<title>标签。专业使用者如何区分两者？其实当 XML 内容是它所知道的，而不仅仅是一个没有意义的包含任意标签名的 XML 文件时，专业使用者如何告诉它？

与大众想法相反，这个问题的答案不是“可以从 DOCTYPE 声明中得知”。DTDs 的设计不考虑混合内容，而过去尝试创建混合内容的 DTDs 现在被认为是失败的。XML 和一些 XML 方言 (包括 SVG), 不要求`DOCTYPE` 声明，SVG 1.2 更不会有。DOCTYPE 声明（通常）与单个内容类型文件中的内容匹配的事实只是巧合的。DTDs 仅用于验证，而不是内容的识别。使用其 DOCTYPE 声明欺骗和标识 XML 内容的使用者会造成危害（User agents that cheat and identify XML content using its DOCTYPE declaration cause harm）。

问题的真正答案是，XML 内容通过给明确的标签显示“命名空间声明”来告诉使用者哪个方言标签名称属于哪个。

### 声明命名空间

所以这些命名空间声明是什么样的呢，并且在什么地方用他们，如下的例子所示：
```

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- more tags here -->
</svg>
```

命名空间声明是通过 xmlns attribute 提供的。xmlns 属性意味着这个 <svg> 标签和它的子节点都属于 `http://www\.w3.org/2000/svg` 这个 SVG 命名空间。注意，这个命名空间声明只需要在根节点上声明一次。这个声明定义了默认的命名空间，所以用户代理知道所有的 <svg> 标签的子标签也属于相同的命名空间。用户代理如果能识别这个命名空间就决定他们如何处理这个标记。

请注意，命名空间仅仅只是一些字符串，所以 SVG 上那些看起来像 URI 的命名空间并不重要。因为 URIs 的唯一性从而被广泛使用，它的本意并不是要“链接”到某个地址。（实际上 URIs 被如此频繁地使用是“命名空间 URI"普遍使用而不是”命名空间的名字“被使用。）

#### 重新定义默认命名空间

如果根节点的所有子节点也被定义为默认命名空间，那么你如何混合使用另一种命名空间呢？很简单，你仅仅只需重新定义默认命名空间即可。这里是一个简单的例子。
```

<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <!-- 在这里放置一些 XHTML 标签 -->
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
      <!-- 在这里放置一些 SVG 标签 -->
    </svg>
    <!-- 在这里放置一些 XHTML 标签 -->
  </body>
</html>
```

在这个例子中根节点`<html>` 的 `xmlns` 属性定义了 XHTML 为默认命名空间。结果就是它和它所有的子节标签，除了 `<svg>` 标签，都被用户代理解释为属于 XHTML 命名空间。 `<svg>` 标签拥有它自己的`xmlns`属性，通过重新定义默认的命名空间，告诉用户代理 `<svg>` 标签以及他所包含的标签（除非他们也重新定义了默认名称空间）属于 SVG.

看到没，命名空间其实没有那么难以理解。

#### Declaring namespace prefixes

XML dialects not only define their own tags, but also their own attributes. By default, attributes don't have a namespace at all, and are only known to be unique because they appear on an element that itself has a unique name. However, sometimes it is necessary to define attributes so that they can be reused on many different elements and still be considered to be the same attribute, independently of the element with which they are used. A very good example of this is the `href` attribute defined by the XLink specification. This attribute is commonly used by other XML dialects as a means to link to external resources. But how do you tell the user agent which dialect the attribute belongs to, in this case XLink? Consider the following example.
```

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <script xlink:href="cool-script.js" type="text/ecmascript"/>
</svg>
```

This example has the rather unusual looking attribute `xmlns:xlink`. As you may guess from the first 'xmlns' part, this is another namespace declaration. However, instead of setting the default namespace, this namespace declaration sets the namespace for something called a "namespace prefix". In this case, we have chosen to use the prefix `xlink` (the second part) since the prefix will be used to tell the user agent about attributes that belong to XLink.

As their name suggests, namespace prefixes are used to prefix attribute names and tag names. This is done by putting the namespace prefix and a colon before the attribute name as shown on the `<script>` tag in the example above. This tells the user agent that that particular attribute belongs to the namespace assigned to the namespace prefix (XLink), and is an attribute that can be used with the same meaning on other tags.

Note that it is an XML error to use a prefix that hasn't been bound to a namespace name. The binding created by the `xmlns:xlink` attribute in the example above is absolutely essential if the `xlink:href` attribute isn't to cause an error. This XLink attribute is also frequently used in SVG on the `<a>`, `<use>` and `<image>` tags among others, so it's a good idea to always include the XLink declaration in your documents.

As an aside, it's useful to know that namespace prefixes can also be used for tag names. This tells the user agent that that particular tag (but not its children this time!) belongs to the namespace assigned to the prefix. Knowing this will save you some confusion if you come across markup like that in the following example:
```

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg">
  <body>
    <h1>SVG embedded inline in XHTML</h1>
    <svg:svg width="300px" height="200px">
      <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/>
    </svg:svg>
  </body>
</html>
```

Note that because a namespace prefix is used for the `<svg:svg>` tag and its child `<svg:circle>`, it wasn't necessary to redeclare the default namespace. In general though it is better to redeclare the default namespace rather than prefix lots of tags in this way.

### Scripting in namespaced XML

Namespaces affect not only markup, but also scripting. If you write scripts for namespaced XML such as SVG, read on.

The DOM Level 1 recommendation was created before the original Namespaces in XML recommendation was released; therefore, DOM1 isn't namespace aware. This causes problems for namespaced XML such as SVG. To resolve these problems, DOM Level 2 Core added namespace aware equivalents of all the applicable DOM Level 1 methods. When scripting SVG, it is important to use the namespace aware methods. The table below lists the DOM1 methods that shouldn't be used in SVG, along with their equivalent DOM2 counterparts that should be used instead.

| DOM1 (don't use) | DOM2 (use these instead!) |
| --- | --- |
| createAttribute | createAttributeNS |
| createElement | createElementNS |
| getAttributeNode | getAttributeNodeNS |
| getAttribute | getAttributeNS |
| getElementsByTagName | getElementsByTagNameNS (also added to Element) |
| getNamedItem | getNamedItemNS |
| hasAttribute | hasAttributeNS |
| removeAttribute | removeAttributeNS |
| removeNamedItem | removeNamedItemNS |
| setAttribute | setAttributeNS |
| setAttributeNode | setAttributeNodeNS |
| setNamedItem | setNamedItemNS |

The first argument for all the DOM2 namespace aware methods must be the namespace name (also known as the namespace URI) of the element or attribute in question. For SVG **elements** this is `http://www.w3.org/2000/svg`. However, note carefully: the Namespaces in XML 1.1 recommendation states that the namespace name for attributes without a prefix does not have a value. In other words, although the attributes belong to the namespace of the tag, you do not use the tag's namespace name. Instead, **you must use null as the namespace name for unqualified (prefixless) attributes**. So, to create an SVG `rect` *element* using `document.createElementNS()`, you must write:
```

document.createElementNS('http://www.w3.org/2000/svg', 'rect');
```

But to retrieve the value of the `x` *attribute* on an SVG `rect` element, you must write:
```

rect.getAttributeNS(null, 'x');
```

Note that this isn't the case for attributes *with* a namespace prefix (attributes that don't belong to the same XML dialect as the tag). Attributes such as the `xlink:href` attribute require the namespace name that was assigned to that prefix (`http://www.w3.org/1999/xlink` for XLink). Hence to get the value of the `xlink:href` attribute of an `<a>` element in SVG you would write:
```

elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
```

For setting attributes that have a namespace, it is recommended (but not required) that you also include their prefix in the second argument so that the DOM can later be more easily converted back to XML (if for instance you want to send it back to the server). For example:
```

elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');
```

As a final example, here's a demonstration of how you should dynamically create an `<image>` element using script:
```

var SVG_NS = 'http://www.w3.org/2000/svg';
var XLink_NS = 'http://www.w3.org/1999/xlink';
var image = document.createElementNS(SVG_NS, 'image');
image.setAttributeNS(null, 'width', '100');
image.setAttributeNS(null, 'height', '100');
image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png');
```

### Conclusion

Make sure you always declare the namespaces you use in your XML files. If you don't, user agents such as Firefox won't recognize your content and will simply show the XML markup or inform the user that there's an error in the XML. It's a good idea to use a template that includes all the commonly used namespace declarations when creating new SVG files. If you don't already have one, make one up starting with the following code:
```

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events">
</svg>
```

Even if you don't use all those namespaces in a particular document, there's no harm in including the namespace declarations. It may save you from some annoying errors if you end up adding content from one of the unused namespaces at a later date.

### A full example

For a full example see SVG: Namespaces Crash Course: Example (en-US).


Linking - SVG：可缩放矢量图形

Linking
=======

SVG 标签内的 "a" 元素上的“target”属性在 Mozilla Firefox 1.5 中不起作用。使用标记将 SVG 文档嵌入父 HTML 文档时：

page1.html:

```html
<html>
  <body>
    <p>This is a SVG button:</p>
    <object width="100" height="50" type="image/svg+xml" data="button.svg" />
  </body>
</html>
```

button.svg:

```xml
<?xml version="1.1" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="page2.html" target="\_top">
    <g>
      <!-- button graphical elements here -->
    </g>
  </a>
</svg>
```

规范规定，当单击按钮图形时，浏览器应导航到 HTML document page2.html。但是，target 不能与 Mozilla 在 Firefox 1.5 中实现的 SVG <a> 元素协同工作。（问题将在 Firefox 2.0 中解决。）

无论如何，Moz SVG 中的结果行为是 page2.html 将被加载到 SVG 按钮所在的帧中（即，你现在将 page2.html 嵌入到 page1.html 中的 100x50 像素帧中）。

要解决这个问题，需要一点难看的 JavaScript 编程：

button.svg:

```xml
<?xml version="1.1" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <g onclick="top.document.href='page2.html'" cursor="pointer">
    <!-- button graphical elements here -->
  </g>
</svg>
```

例子
--

有关此解决方案在工作中的示例，请参见 www.codedeard.com。


SVG 元素参考 - SVG：可缩放矢量图形

SVG 元素参考
========

SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。在这里，你可以找到每个 SVG 元素的参考文档。

SVG 元素（从 A-Z 排序）
----------------

### A

* `<a>`
* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
### C

* `<circle>`
* `<clipPath>`
* `<color-profile>`
### D

* `<defs>`
* `<desc>`
### E

* `<ellipse>`
### F

* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDistantLight>`
* `<feDropShadow>`
* `<feFlood>`
* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMergeNode>`
* `<feMorphology>`
* `<feOffset>`
* `<fePointLight>`
* `<feSpecularLighting>`
* `<feSpotLight>`
* `<feTile>`
* `<feTurbulence>`
* `<filter>`
* `<foreignObject>`
### G

* `<g>`
### H

* `<hatch>`
* `<hatchpath>`
### I

* `<image>`
### L

* `<line>`
* `<linearGradient>`
### M

* `<marker>`
* `<mask>`
* `<mesh>`
* `<meshgradient>`
* `<meshpatch>`
* `<meshrow>`
* `<metadata>`
* `<mpath>`
### P

* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
### R

* `<radialGradient>`
* `<rect>`
### S

* `<script>`
* `<set>`
* `<solidcolor>`
* `<stop>`
* `<style>`
* `<svg>`
* `<switch>`
* `<symbol>`
### T

* `<text>`
* `<textPath>`
* `<title>`
* `<tspan>`
### U

* `<unknown>`
* `<use>`
### V

* `<view>`
SVG 元素（按类别分类）
-------------

### 动画元素

`<animate>`、`<animateColor>`、`<animateMotion>`、`<animateTransform>`、`<mpath>`、`<set>`### 基本形状元素

`<circle>`、`<ellipse>`、`<line>`、`<polygon>`、`<polyline>`、`<rect>`### 容器元素

`<a>`、`<defs>`、`<g>`、`<marker>`、`<mask>`、`<missing-glyph>`、`<pattern>`、`<svg>`、`<switch>`、`<symbol>`、`<unknown>`### 描述性元素

`<desc>`、`<metadata>`、`<title>`### 滤镜元素

`<feBlend>`、`<feColorMatrix>`、`<feComponentTransfer>`、`<feComposite>`、`<feConvolveMatrix>`、`<feDiffuseLighting>`、`<feDisplacementMap>`、`<feDropShadow>`、`<feFlood>`,`<feFuncA>`、`<feFuncB>`、`<feFuncG>`、`<feFuncR>`,`<feGaussianBlur>`、`<feImage>`、`<feMerge>`、`<feMergeNode>`、`<feMorphology>`、`<feOffset>`、`<feSpecularLighting>`、`<feTile>`、`<feTurbulence>`### 字体元素

`<font>`、`<font-face>`、`<font-face-format>`、`<font-face-name>`、`<font-face-src>`、`<font-face-uri>`、`<hkern>`、`<vkern>`### 渐变元素

`<linearGradient>`、`<meshgradient>`、`<radialGradient>`、`<stop>`### 图形元素

`<circle>`、`<ellipse>`、`<image>`、`<line>`、`<mesh>`、`<path>`、`<polygon>`、`<polyline>`、`<rect>`、`<text>`、`<use>`### 图像渲染元素

`<mesh>`、`<use>`### 光源元素

`<feDistantLight>`、`<fePointLight>`、`<feSpotLight>`### 非渲染元素

`<clipPath>`、`<defs>`、`<hatch>`、`<linearGradient>`、`<marker>`、`<mask>`、`<meshgradient>`、`<metadata>`、`<pattern>`、`<radialGradient>`、`<script>`、`<style>`、`<symbol>`、`<title>`### 绘制服务器元素

`<hatch>`、`<linearGradient>`、`<meshgradient>`、`<pattern>`、`<radialGradient>`、`<solidcolor>`### 可渲染元素

`<a>`、`<circle>`、`<ellipse>`、`<foreignObject>`、`<g>`、`<image>`、`<line>`、`<mesh>`、`<path>`、`<polygon>`、`<polyline>`、`<rect>`、`<svg>`、`<switch>`、`<symbol>`、`<text>`、`<textPath>`、`<tspan>`、`<unknown>`、`<use>`### 形状元素

`<circle>`、`<ellipse>`、`<line>`、`<mesh>`、`<path>`、`<polygon>`、`<polyline>`、`<rect>`### 结构元素

`<defs>`、`<g>`、`<svg>`、`<symbol>`、`<use>`### 文本内容元素

`<glyph>`、`<glyphRef>`、`<textPath>`、`<text>`、`<tref>`、`<tspan>`### 文本子内容元素

`<textPath>`、`<tref>`、`<tspan>`### 未分类元素

`<clipPath>`、`<color-profile>`、`<cursor>`、`<filter>`、`<foreignObject>`、`<hatchpath>`、`<meshpatch>`、`<meshrow>`、`<script>`、`<style>`、`<view>`过时和弃用的元素
--------

**警告：** 这些是旧的 SVG 元素，已弃用且不应使用。**你绝不应在新项目中使用它们，并应尽快在旧项目中替换它们**。在此列出，仅供参考。

### C

`<cursor>`### F

`<font>`、`<font-face>`、`<font-face-format>`、`<font-face-name>`、`<font-face-src>`、`<font-face-uri>`### G

`<glyph>`、`<glyphRef>`### H

`<hkern>`### M

`<missing-glyph>`### T

`<tref>`### V

`<vkern>`参见
--

* SVG attribute reference
* SVG Tutorial
* SVG interface reference


feTile - SVG：可缩放矢量图形

feTile
======

输入图像是平铺的，结果用来填充目标。它的效果近似于一个`<pattern>`图案对象。

用法
--

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

示例
--

属性
--

### 全局属性

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

* `in`
DOM 接口
------

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

参见
--

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


feComposite - SVG：可缩放矢量图形

feComposite
===========

该滤镜执行两个输入图像的智能像素组合，在图像空间中使用以下 Porter-Duff 合成操作之一：over、in、atop、xor。另外，还可以应用一个智能组件`arithmetic` 操作（结果被压到 `[0,1]` 范围内）。

`该 arithmetic 操作对组合来自``<feDiffuseLighting>`滤镜和来自`<feSpecularLighting>` 滤镜的`输出以及组合纹理数据很有用`。如果选择了`arithmetic`操作，每个结果像素都要经过下面的方程式的计算：
```

result = k1*i1*i2 + k2*i1 + k3*i2 + k4
```

在这里：

* `i1` 和 `i2` 标`示了输入图像相应的像素通道值，分别映射到`in`和`in2 (en-US)`。
* `k1`、`k2`、`k3` 和 `k4` 标示了同名的属性值。
用法
--

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

示例
--

属性
--

### 全局属性

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

* `in`
* `in2 (en-US)`
* `operator (en-US)`
* `k1 (en-US)`
* `k2 (en-US)`
* `k3 (en-US)`
* `k4 (en-US)`
DOM 接口
------

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

参见
--

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


feGaussianBlur - SVG：可缩放矢量图形

feGaussianBlur
==============

该滤镜对输入图像进行高斯模糊，属性`stdDeviation`中指定的数量定义了钟形。

用法
--

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

示例
--

### 简单示例

```html
<svg
 width="230"
 height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <circle cx="60" cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>
```

该示例的结果如下所示：

### 投影示例

```html
<svg
 width="120"
 height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="dropShadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
    <feOffset dx="2" dy="4" />
    <feMerge>
      <feMergeNode />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>

  <circle cx="60" cy="60" r="50" fill="green" filter="url(#dropShadow)" />
</svg>
```

该示例的结果如下所示：

属性
--

### 全局属性

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

* `in`
* `stdDeviation`
DOM 接口
------

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

参见
--

* `<filter>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feFlood>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* SVG 教程：滤镜效果 (en-US)


filter - SVG：可缩放矢量图形

filter
======

`filter`元素作用是作为原子滤镜操作的容器。它不能直接呈现。可以利用目标 SVG 元素上的`filter`属性引用一个滤镜。

用法
--

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

属性
--

### 全局属性

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

* `x`
* `y`
* `width`
* `height`
* `filterRes`
* `filterUnits`
* `primitiveUnits`
* `xlink:href (en-US)`
DOM 接口
------

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

示例
--

#### SVG

```html
<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
  <filter id="blurMe">
    <feGaussianBlur stdDeviation="5" />
  </filter>

  <circle cx="60" cy="60" r="50" fill="green" />

  <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>
```

#### 结果

规范
--

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

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

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

参见
--

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


feMorphology - SVG：可缩放矢量图形

feMorphology
============

该滤镜用来侵蚀或扩张输入的图像。它在增肥或瘦身效果方面特别有用。

用法
--

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

示例
--

属性
--

### 全局属性

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

* `in`
* `operator (en-US)`
* `radius`
DOM 接口
------

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

参见
--

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


feMergeNode - SVG：可缩放矢量图形

feMergeNode
===========

`feMergeNode 元素拿另一个滤镜的结果，让它的父``<feMerge>`元素处理。

用法
--

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

示例
--

属性
--

### 全局属性

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

* `in`
DOM 接口
------

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

参见
--

* `<filter>`
* `<animate>`
* `<set>`
* `<feMerge>`
* SVG 教程：滤镜效果


mask - SVG：可缩放矢量图形

mask
====

在 SVG 中，你可以指一个透明的遮罩层和当前对象合成，形成背景。透明遮罩层可以是任何其他图形对象或者`<g>`元素。`mask`元素用于定义这样的遮罩元素。属性`mask`用来引用一个遮罩元素。

使用场景
----

|  |  |
| --- | --- |
| 类别 | 容器元素 |
| 允许的内容 | 任意数量、任意顺序的下列元素：动画元素描述性元素形状元素结构化元素渐变元素`<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="-10 -10 120 120">
  <mask id="myMask">
    <!-- 白色像素下的所有内容都将可见 -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- 黑色像素下的所有内容都将不可见 -->
    <path
 d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
 fill="black" />
  </mask>

  <polygon points="-10,110 110,110 110,-10" fill="orange" />

  <!-- 应用此蒙版后，我们在圆圈中“打”一个心形孔 -->
  <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
</svg>
```

属性
--

### 全局属性

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

* `maskUnits (en-US)`
* `maskContentUnits (en-US)`
* `x`
* `y`
* `width`
* `height`
DOM 接口
------

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

参见
--

* `<clipPath>`


view - SVG：可缩放矢量图形

view
====

`view`元素是查看图片的一个限定方法，就像一个缩放级别或者一个详细视图。

用法
--

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

示例
--

属性
--

### 全局属性

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

* `viewBox`
* `preserveAspectRatio`
* `zoomAndPan (en-US)`
* `viewTarget`
DOM 接口
------

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


metadata - SVG：可缩放矢量图形

metadata
========

`metadata`是数据的结构化数据。SVG 内容里面包含的元数据必须放在`metadata`元素里面。`medatata`的内容物必须是来自其他 XML 命名空间的元素，比如说 RDF、FOAT，等等。

用法
--

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

示例
--

属性
--

### 全局属性

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

*没有专有属性。*

DOM 接口
------

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

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

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


desc - SVG：可缩放矢量图形

desc
====

SVG 绘画中的每个容器元素或图形元素都可以提供一个`desc`描述性字符串，这些描述只是纯文本的。如果当前的 SVG 文档片段在视媒体中呈现，desc 元素不会呈现为图形的一部分。替代性提词既可以看到也可以听到，它显示了 desc 元素但是不会显示路径元素或者别的图形元素。`desc`元素提升了 SVG 文档的无障碍。

用法
--

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

示例
--

属性
--

### 全局属性

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

*没有专有属性。*

DOM 接口
------

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

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

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

参见
--

* `<title>`


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

font-face
=========

font-face 元素相当于 (corresponds to) CSS 的 @font-face 规则声明，font-face 元素定义了一个字体的外部属性 (a font's outer properties)。

使用上下文
-----

|  |  |
| --- | --- |
| 类别 | 字体元素 |
| 允许的内容 | Any number of descriptive elements » and at most one `<font-face>` element, in any order. |

例子
--

属性 Attributes
-------------

### 全局属性 Global attributes

* Core attributes »
### 特定属性 Specific attributes

* `font-family`
* `font-style (en-US)`
* `font-variant (en-US)`
* `font-weight (en-US)`
* `font-stretch (en-US)`
* `font-size (en-US)`
* `unicode-range (en-US)`
* `units-per-em (en-US)`
* `panose-1 (en-US)`
* `stemv (en-US)`
* `stemh (en-US)`
* `slope (en-US)`
* `cap-height (en-US)`
* `x-height (en-US)`
* `accent-height`
* `ascent (en-US)`
* `descent (en-US)`
* `widths (en-US)`
* `bbox (en-US)`
* `ideographic (en-US)`
* `alphabetic (en-US)`
* `mathematical (en-US)`
* `hanging (en-US)`
* `v-ideographic (en-US)`
* `v-alphabetic (en-US)`
* `v-mathematical (en-US)`
* `v-hanging (en-US)`
* `underline-position (en-US)`
* `underline-thickness (en-US)`
* `strikethrough-position (en-US)`
* `strikethrough-thickness (en-US)`
* `overline-position (en-US)`
* `overline-thickness (en-US)`
DOM 接口
------

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

另见
--

* `<font>`
* `<font-face-src>`
* SVG tutorial: SVG fonts


text - SVG：可缩放矢量图形

text
====

`text`元素定义了一个由文字组成的图形。注意：我们可以将渐变、图案、剪切路径、遮罩或者滤镜应用到 text 上。

使用上下文
-----

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

示例
--

```xml
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
 width="100px" height="30px" viewBox="0 0 1000 300">

  <text x="250" y="150"
 font-family="Verdana"
 font-size="55">
    Hello, out there
  </text>

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

<text>元素用来绘制文本。下面这段代码展示了如何在坐标系中绘制一段文本。

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
  <text x="10" y="20">SVG Text Example</text>
</svg>
```

可以旋转 SVG 文本。下面的代码做了一个演示。

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
  <text x="10" y="20"
 transform="rotate(30 20,40)">
    SVG Text Rotation example
  </text>
</svg>
```

SVG 文本还可以应用样式。

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
  <text x="10" y="20"
 style="font-family: Times New Roman;
 font-size : 24;
 stroke : #00ff00;
 fill : #0000ff;">
    SVG text styling
  </text>
</svg>
```

属性
--

### 全局属性

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

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

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

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

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

参见
--

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


feConvolveMatrix - SVG：可缩放矢量图形

feConvolveMatrix
================

`feConvolveMatrix`元素应用了一个矩阵卷积滤镜效果。一个卷积在输入图像中把像素与邻近像素组合起来制作出结果图像。通过卷积可以实现各种成像操作，包括模糊、边缘检测、锐化、压花和斜角。

一个矩阵卷积是基于一个 nxm 矩阵 (卷积内核)，用来描述如何将给定的输入图像的像素值与相邻像素合并为一个输出像素值。每个输出像素是由应用的内核矩阵来处理相应的源像素和它的相邻像素。基本的卷积公式是对给定的每个像素进行如下应用：

 COLORX,Y = (
 SUM I=0 to [orderY-1] {
 SUM J=0 to [orderX-1] {
 SOURCE X-targetX+J, Y-targetY+I \* kernelMatrixorderX-J-1, orderY-I-1
 }
 }
 ) / divisor + bias \* ALPHAX,Y

其中“orderX”和"orderY"表示‘order’ 的 x 和 y 值，"targetX"表示‘targetX’ 属性的值，"targetY"表示‘targetY’ 的值，"kernelMatrix" 表示 ‘kernelMatrix’属性的值，"divisor"表示 ‘divisor’属性的值， "bias" 表示 ‘bias’属性的值。

注意上述公式中内核矩阵的值是被旋转 180 度后被使用，这是为了符合许多计算机图形学教科书中的理论。

这里举例说明，假设你有一个 5x5 像素的输入图像，其中一个颜色通道的色值如下：
```

  0  20  40 235 235
  100 120 140 235 235
  200 220 240 235 235
  225 225 255 255 255
  225 225 255 255 255
```

你定义一个 3\*3 卷积核如下：
```

 1 2 3
  4 5 6
  7 8 9
```

让我们专注于图像的第二行和第二列的颜色值（源像素值为 120）。最简单的情况（输入图像的像素网格与内核像素网格完全对齐）,‘divisor’, ‘targetX’ 和‘targetY’都是默认值，那么输出色值将是：
```

(9*  0 + 8* 20 + 7* 40 +
6*100 + 5*120 + 4*140 +
3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)
```

用法
--

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

示例
--

### SVG
```

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="emboss">
      <feConvolveMatrix
          kernelMatrix="3 0 0
                        0 0 0
                        0 0 -3"/>
    </filter>
  </defs>

  <image xlink:href="/files/12668/MDN.svg" x="0" y="0"
      height="200" width="200" style="filter:url(#emboss);" />
</svg>
```

属性
--

### 全局属性

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

* `in`
* `order`
* `kernelMatrix`
* `divisor (en-US)`
* `bias (en-US)`
* `targetX (en-US)`
* `targetY (en-US)`
* `edgeMode`
* `kernelUnitLength (en-US)`
* `preserveAlpha`
DOM 接口
------

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

参见
--

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


tref - SVG：可缩放矢量图形

tref
====

`<text>` 的文本内容既可以是直接嵌入在`<text>`元素中的的字符数据，也可以是引用元素的字符数据内容，`tref`元素用来指定的包含文本内容的引用元素。

用法
--

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

示例
--

```xml
<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>
    <text id="ReferencedText">
      Referenced character data
    </text>
  </defs>

  <text x="100" y="100" font-size="45" >
    Inline character data
  </text>

  <text x="100" y="200" font-size="45" fill="red" >
    <tref xlink:href="#ReferencedText"/>
  </text>

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

属性
--

### 全局属性

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

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

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

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

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

参见
--

* `<text>`


a - SVG：可缩放矢量图形

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 - SVG：可缩放矢量图形

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 - SVG：可缩放矢量图形

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

**起步**
 本教程将教你开始使用 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 - SVG：可缩放矢量图形

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 - 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 - 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 - SVG：可缩放矢量图形

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

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 - SVG：可缩放矢量图形

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 教程：滤镜效果


<marker> - SVG：可缩放矢量图形

<marker>
========

**`<marker>`** 元素定义了在给定 `<path>`、`<line>`、`<polyline>` 或 `<polygon>` 元素上绘制箭头或者多边标记所使用的图形。

可以使用 `marker-start`、`marker-mid (en-US)` 和 `marker-end` 属性将标记附着到形状上。

示例
--

### 绘制箭头

以下示例展示如何在直线或者曲线路径上绘制箭头。对于曲线路径，每个点都用 `marker-mid (en-US)` 标记绘制一个箭头。
```

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

```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 用作箭头的 marker -->
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>

  <!-- 带标记的线 -->
  <line
 x1="10"
 y1="10"
 x2="90"
 y2="90"
 stroke="black"
 marker-end="url(#arrow)" />

  <!-- 带标记的曲线-->
  <path
 d="M 110 10
 C 120 20, 130 20, 140 10
 C 150 0, 160 0, 170 10
 C 180 20, 190 20, 200 10"
 stroke="black"
 fill="none"
 marker-start="url(#arrow)"
 marker-mid="url(#arrow)"
 marker-end="url(#arrow)" />
</svg>
```

### 绘制多边标记
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 箭头 marker 定义 -->
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <!-- 点 marker 定义 -->
    <marker
 id="dot"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="5"
 markerHeight="5">
      <circle cx="5" cy="5" r="5" fill="red" />
    </marker>
  </defs>

  <!-- 在两个方向上都带有箭头的坐标轴 -->
  <polyline
 points="10,10 10,90 90,90"
 fill="none"
 stroke="black"
 marker-start="url(#arrow)"
 marker-end="url(#arrow)" />

  <!-- 多边标记数据线 -->
  <polyline
 points="15,80 29,50 43,60 57,30 71,40 85,15"
 fill="none"
 stroke="grey"
 marker-start="url(#dot)"
 marker-mid="url(#dot)"
 marker-end="url(#dot)" />
</svg>
```

### 使用 context fill 和 stroke

以下示例展示了如何使用 `context-fill` 和 `context-stroke` 值可以让一个 marker 使用与其附加到的形状相同的填充和描边。

```html
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <marker
 id="circle"
 markerWidth="6"
 markerHeight="6"
 refX="3"
 refY="3"
 markerUnits="strokeWidth">
    <circle cx="3" cy="3" r="2" stroke="context-stroke" fill="context-fill" />
  </marker>

  <style>
 path {
 marker: url(#circle);
 }
 </style>

  <path d="M 10,10 30,10 h 10" stroke="black" />
  <path d="M 10,20 30,20 h 10" stroke="blue" fill="red" />
  <path d="M 10,30 30,30 h 10" stroke="red" fill="none" />
  <path d="M 10,40 30,40 h 10" stroke="gray" fill="blue" stroke-width="1.5" />
</svg>
```

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

属性
--

`markerHeight (en-US)`

该属性定义了 marker 视口的高度。*值的类型*：**<length>**；*默认值*：`3`；*动画性*：**有**

`markerUnits (en-US)`

该属性为 `markerWidth`、`markerHeight` 和 `<marker>` 的内容定义了坐标系。*值的类型*：`userSpaceOnUse`|`strokeWidth` ；*默认值*：`strokeWidth`；*动画性*：**有**

`markerWidth (en-US)`

该属性定义了 marker 视图的宽度。*值的类型*：**<length>** ；*默认值*：`3`；*动画性*：**有**

`orient (en-US)`

该属性定义了 marker 相对于它所附着到形状的方向。*值的类型*：`auto`|`auto-start-reverse`|**<angle>** ；*默认值*：`0`；*动画性*：**有**

`preserveAspectRatio`

该属性定义了 svg 片段在嵌入具有不同宽高比例的容器中应该如何变形。*值的类型*：(`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ；*默认值*：`xMidYMid meet`；*动画性*：**有**

`refX (en-US)`

 该属性定义了标记参考点的 x 的坐标。
 *值的类型*：`left`|`center`|`right`|**<coordinate>** ；*默认值*：`0`；*动画性*：**有**

`refY (en-US)`

 该属性定义了标记参考点的 y 的坐标。
 *值的类型*：`top`|`center`|`bottom`|**<coordinate>** ；*默认值*：`0`；*动画性*：**有**

`viewBox`

 该属性定义了当前 SVG 片段的 SVG 视口边界。
 *值的类型*：**<list-of-numbers>** ；*默认值*：none；*动画性*：**有**

### 全局属性

核心属性 (en-US)

最重要的：`id`、`tabindex (en-US)`

样式属性
`class (en-US)`、`style`
条件处理属性 (en-US)

最重要的：`requiredExtensions`、`systemLanguage (en-US)`

表现属性 (en-US)

最重要的：`clip-path`、`clip-rule (en-US)`、`color`、`color-interpolation (en-US)`、`color-rendering`、`cursor (en-US)`、`display`、`fill`、`fill-opacity`、`fill-rule`、`filter`、`mask`、`opacity`、`pointer-events`、`shape-rendering`、`stroke`、`stroke-dasharray`、`stroke-dashoffset`、`stroke-linecap`、`stroke-linejoin`、`stroke-miterlimit`、`stroke-opacity`、`stroke-width`、`transform`、`vector-effect`、`visibility`

ARIA 属性

`aria-activedescendant`、`aria-atomic`、`aria-autocomplete`、`aria-busy`、`aria-checked`、`aria-colcount`、`aria-colindex`、`aria-colspan`、`aria-controls`、`aria-current`、`aria-describedby`、`aria-details`、`aria-disabled`、`aria-dropeffect`、`aria-errormessage`、`aria-expanded`、`aria-flowto`、`aria-grabbed`、`aria-haspopup`、`aria-hidden`、`aria-invalid`、`aria-keyshortcuts`、`aria-label`、`aria-labelledby`、`aria-level`、`aria-live`、`aria-modal`、`aria-multiline`、`aria-multiselectable`、`aria-orientation`、`aria-owns`、`aria-placeholder`、`aria-posinset`、`aria-pressed`、`aria-readonly`、`aria-relevant`、`aria-required`、`aria-roledescription`、`aria-rowcount`、`aria-rowindex`、`aria-rowspan`、`aria-selected`、`aria-setsize`、`aria-sort`、`aria-valuemax`、`aria-valuemin`、`aria-valuenow`、`aria-valuetext`、`role`

使用说明
----

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

规范
--

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

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

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

参见
--

* 与 marker 相关的属性：`marker-start`、`marker-mid (en-US)` 和 `marker-end`


font-face-format - SVG：可缩放矢量图形

font-face-format
================

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

用法
--

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

示例
--

属性
--

### 全局属性

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

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

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

参见
--

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


feTurbulence - SVG：可缩放矢量图形

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

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：可缩放矢量图形

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 - SVG：可缩放矢量图形

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 - SVG：可缩放矢量图形

font-face-name
==============

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

用法
--

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

示例
--

属性
--

### 全局属性

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

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

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

相关内容
----

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


polyline - 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`元素里面。这样做可以增加 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 - SVG：可缩放矢量图形

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 - SVG：可缩放矢量图形

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


feDiffuseLighting - SVG：可缩放矢量图形

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 - SVG：可缩放矢量图形

feFuncG
=======

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

用法
--

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

示例
--

属性
--

### 全局属性

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

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

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

参见
--

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


pattern - 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 - SVG：可缩放矢量图形

fePointLight
============

用法
--

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

示例
--

属性
--

### 全局属性

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

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

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

参见
--

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


line - 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 - SVG：可缩放矢量图形

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 - SVG：可缩放矢量图形

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 - SVG：可缩放矢量图形

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 - SVG：可缩放矢量图形

feFuncR
=======

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

用法
--

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

示例
--

属性
--

### 全局属性

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

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

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

参见
--

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


font-face-uri - SVG：可缩放矢量图形

font-face-uri
=============

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

用法
--

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

示例
--

属性
--

### 全局属性

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

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

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

参见
--

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


rect - 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 - SVG：可缩放矢量图形

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 - 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 - SVG：可缩放矢量图形

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 - 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 - 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：可缩放矢量图形

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 - SVG：可缩放矢量图形

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 - SVG：可缩放矢量图形

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 - SVG：可缩放矢量图形

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 - 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 - 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：可缩放矢量图形

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 - SVG：可缩放矢量图形

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 - SVG：可缩放矢量图形

feDistantLight
==============

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

用法
--

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

示例
--

属性
--

### 全局属性

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

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

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

参见
--

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


set - SVG：可缩放矢量图形

set
===

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

用法
--

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

示例
--

属性
--

### 全局属性

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

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

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

参见
--

* `<animate>`


foreignObject - SVG：可缩放矢量图形

foreignObject
=============

SVG中的 **`<foreignObject>`** 元素允许包含来自不同的 XML 命名空间的元素。在浏览器的上下文中，很可能是 XHTML / HTML。

示例
--
```

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

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
 polygon {
 fill: black;
 }

 div {
 color: white;
 font: 18px serif;
 height: 100%;
 overflow: auto;
 }
 </style>

  <polygon points="5,5 195,10 185,185 10,195" />

  <!-- Common use case: embed HTML text into SVG -->
  <foreignObject x="20" y="20" width="160" height="160">
    <!--
 In the context of SVG embeded into HTML, the XHTML namespace could
 be avoided, but it is mandatory in the context of an SVG document
 -->
    <div xmlns="http://www.w3.org/1999/xhtml">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis
      mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum
      imperdiet eros. Aliquam erat volutpat.
    </div>
  </foreignObject>
</svg>
```

属性
--

`height`

 设置 foreignObject 的高度。
 值得类型：**<length>**|**<percentage>** ; *默认值*: `auto`; *是否可设置动画*: **yes**

`width`

 设置 foreignObject 的宽度。
 值得类型：**<length>**|**<percentage>** ; *默认值*: `auto`; *是否可设置动画*: **yes**

`x`

 设置 foreignObject 的 x 坐标。
 值得类型：**<length>**|**<percentage>** ; *默认值*: `0`; *是否可设置动画*: **yes**

`y`

 设置 foreignObject 的 y 坐标。
 值得类型：**<length>**|**<percentage>** ; *默认值*: `0`; *是否可设置动画*: **yes**

**备注：** 从 SVG2 开始，x、y、宽度和高度都是几何属性，这意味着这些属性也可以用作该元素的 CSS 属性。

### Global attributes

Core Attributes (en-US)

Most notably: `id`, `tabindex (en-US)`

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

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

Event Attributes

Global event attributes (en-US), Graphical event attributes (en-US), Document event attributes (en-US), Document element event attributes (en-US)

Presentation Attributes (en-US)

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

Aria Attributes

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

用法
--

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

规范
--

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

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

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


<feDropShadow> - SVG：可缩放矢量图形

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


<radialGradient> - SVG：可缩放矢量图形

<radialGradient>
================

**`<radialGradient>`** 用来定义径向渐变，以对图形元素进行填充或描边。

**备注：** 不要与 CSS `radial-gradient()` (en-US) 搞混了，CSS 渐变只能应用在 HTML 元素上，而 SVG 渐变只能运用在 SVG 元素上。

示例
--
```

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>
    <radialGradient id="myGradient">
      <stop offset="10%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </radialGradient>
  </defs>

  <!-- 使用自定义的径向渐变 -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
```

属性
--

`cx`

这个属性定义了径向渐变的终点圆的 X 坐标。*值类型*：**<length>**；*默认值*：`50%`；*动画性*：**有**

`cy`

这个属性定义了径向渐变的终点圆的 Y 坐标。*值类型*：**<length>**；*默认值*：`50%`；*动画性*：**有**

`fr`

这个属性定义了径向梯度的起点圆的半径。渐变的绘制将使 0% `<stop>` 被映射到起始圆的周长。*值类型*：**<length>**；*默认值*：`0%`；*动画性*：**有**

`fx`

这个属性定义了径向渐变的起点圆的 X 坐标。*值类型*：**<length>**；*默认值*：与 `cx` 相同；*动画性*：**有**

`fy`

这个属性定义了径向渐变的起点圆的 Y 坐标。*值类型*：**<length>**；*默认值*：与 `cy` 相同；*动画性*：**有**

`gradientUnits (en-US)`

这个属性定义了 `cx`、`cy`、`r`、`fx`、`fy`、`fr` 属性的坐标系统；*值类型*：`userSpaceOnUse`|`objectBoundingBox`；*默认值*：`objectBoundingBox`；*动画性*：**有**

`gradientTransform (en-US)`

这个属性为梯度坐标系提供了额外的变换。*值类型*：**<transform-list>** ；*默认值*：*identity transform*；*动画性*：**有**

`href (en-US)`

这个属性定义了对另一个将被用作模板 `<radialGradient>` 元素的引用。*值类型*：**<URL>**；*默认值*：none；*动画性*：**有**

`r`

这个属性定义了径向渐变的终点圆的半径。梯度的绘制将使 100% 的`<stop>` 被映射到终点圆的周长。*值类型*：**<length>**；*默认值*：`50%`；*动画性*：**有**

`spreadMethod (en-US)`

这个属性表明，如果渐变在包含渐变的形状的边界内开始或结束，它将如何表现。*值类型*：`pad`|`reflect`|`repeat`；*默认值*：`pad`；*动画性*：**有**

`xlink:href (en-US)`

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

对另一个将被用作模板的 `<radialGradient>` 元素的 <IRI> 引用。*值类型*：**<IRI>**；*默认值*：none；*动画性*：**有**

### 全局属性

核心属性 (en-US)

最重要的：`id`

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

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

表现属性 (en-US)

最重要的：`clip-path`、`clip-rule (en-US)`、`color`、`color-interpolation (en-US)`、`color-rendering`、`cursor (en-US)`、`display`、`fill`、`fill-opacity`、`fill-rule`、`filter`、`mask`、`opacity`、`pointer-events`、`shape-rendering`、`stroke`、`stroke-dasharray`、`stroke-dashoffset`、`stroke-linecap`、`stroke-linejoin`、`stroke-miterlimit`、`stroke-opacity`、`stroke-width`、`transform`、`vector-effect`、`visibility`

XLink 属性
`xlink:href (en-US)`、`xlink:title (en-US)`
使用说明
----

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

规范
--

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

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

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


use - SVG：可缩放矢量图形

use
===

`use` 元素在 SVG 文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的 DOM 中，然后将其粘贴到 `use` 元素的位置，很像 HTML5 中的克隆模板元素。因为克隆的节点是不可见的，所以当使用 CSS 样式化一个 `use` 元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的 DOM 不能保证继承 CSS 属性，除非你显式设置使用 CSS 继承。

出于安全原因，一些浏览器可能在 use 元素上应用同源策略，还有可能拒绝载入 xlink:href 属性内的跨源 URI。

用法
--

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

示例
--

```xml
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    .classA { fill:red }
  </style>
  <defs>
    <g id="Port">
      <circle style="fill:inherit" r="10"/>
    </g>
  </defs>

  <text y="15">black</text>
  <use x="50" y="10" xlink:href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" xlink:href="#Port" class="classA"/>
  <text y="55">blue</text>
  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
 </svg>
```

属性
--

### 全局属性

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

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

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

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

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