recursal/MDN huggingface dataset:
Data URL
========

**Data URL**，即前缀为 `data:` 协议的 URL，其允许内容创建者向文档中嵌入小文件。它们之前被称作“data URI”，直到这个名字被 WHATWG 弃用。

**备注：** 现代浏览器将 Data URL 视作唯一的不透明来源，而不是可以用于导航的 URL。

语法
--

Data URL 由四个部分组成：前缀（`data:`）、指示数据类型的 MIME 类型、如果非文本则为可选的 `base64` 标记、数据本身：
```

data:[<mediatype>][;base64],<data>
```


`mediatype` 是个 MIME 类型的字符串，例如 `'image/jpeg'` 表示 JPEG 图像文件。如果被省略，则默认值为 `text/plain;charset=US-ASCII`。

如果数据包含 RFC 3986 中定义为保留字符的字符或包含空格符、换行符或者其他非打印字符，这些字符必须进行百分号编码（又名“URL 编码”）。

如果数据是文本类型，你可以直接将文本嵌入（根据文档类型，使用合适的实体字符或转义字符）。否则，你可以指定 `base64` 来嵌入 base64 编码的二进制数据。你可以在这里和这里找到更多关于 MIME 类型的信息。

下面是一些示例：

`data:,Hello%2C%20World!`

简单的 text/plain 类型数据。注意逗号如何百分号编码为 `%2C`，空格字符如何编码为 `%20`。

`data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D`

上一条示例的 base64 编码版本

`data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E`

一个 HTML 文档源代码 `<h1>Hello, World</h1>`

`data:text/html,%3Cscript%3Ealert%28%27hi%27%29%3B%3C%2Fscript%3E`

带有`<script>alert('hi');</script>` 的 HTML 文档，用于执行 JavaScript 警告。注意，需要闭合的 script 标签。

给数据作 base64 编码
--------------

Base64 是一组二进制到文本的编码方案，通过将其转换为 radix-64 表示形式，以 ASCII 字符串格式表示二进制数据。通过仅由 ASCII 字符组成，base64 字符串通常是 url 安全的，这就是为什么它们可用于在 Data URL 中编码数据。

### 在 JavaScript 中编码

Web API 已经有对 base64 进行编码解码的方法：Base64 编码和解码。

### 在 Unix 系统编码

在 Linux 和 macOS 系统中使用命令行 `base64` 完成对文件或者字符串的编码（或者，另一种方案是，使用带有 `-m` 参数的 `uuencode` 工具）。


```bash
echo -n hello|base64
# outputs to console: aGVsbG8=
echo -n hello>a.txt
base64 a.txt
# outputs to console: aGVsbG8=
base64 a.txt>b.txt
# outputs to file b.txt: aGVsbG8=
```

### 在 Microsoft Windows 中编码

在 Windows 中，PowerShell 的 Convert.ToBase64String 可用于执行 Base64 编码：
```

[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello"))
# outputs to console: aGVsbG8=
```


另一种方案是：使用 GNU/Linux shell (例如 WSL）提供的使用工具 `base64`:


```bash
bash$ echo -n hello | base64
# outputs to console: aGVsbG8=
```

常见问题
----

下文介绍一些在创建和使用 `data` URL 时遇到的常见问题：
```

data:text/html,lots of text…<p><a name%3D"bottom">bottom</a>?arg=val</p>
```


这表示 HTML 资源，其内容是：


```html
lots of text…
<p><a name="bottom">bottom</a>?arg=val</p>
```


语法

`data` URL 的格式很简单，但很容易会忘记把逗号加在“data”协议名后面，在对数据进行 base64 编码时也很容易发生错误。

HTML 代码格式化

一个 `data` URL 是一个文件中的文件，相对于文档来说这个文件可能就非常的长。因为 data URL 也是 URL，所以 data 会用空白符（换行符、制表符或空格）来对它进行格式化，但使用 base64 编码时会出现一些实际问题。

长度限制

浏览器不需要支持任何规定的最大数据长度。比如，Opera 11 浏览器限制 URL 最长为 65535 个字符，这意味着 `data` URL 最长为 65529 个字符（如果你使用纯文本 `data:`，而不是指定一个 MIME 类型的话，那么 65529 字符长度是编码后的长度，而不是源文件）。Firefox 97 及更高版本支持高达 32MB 的数据 URL（在 97 之前，限制接近 256MB）。Chromium 支持到超过 512MB 的 URL，Webkit（Safari）支持到超过 2048MB 的 URL。

缺乏错误处理

媒体中的无效参数或指定 `'base64'` 时的错别字被忽略，但不会提供相关错误提示。

不支持查询字符串

一个 data URL 的数据字段是没有结束标记的，所以尝试在一个 data URL 后面添加查询字符串（特定于页面的参数，语法为 `<url>?parameter-data`）会导致查询字符串也一并被当作数据字段。

安全问题

许多安全问题（例如，钓鱼网站）已与 data URL 相关联，并在浏览器的顶层导航到它们。为了缓和这样的问题，在所有现代浏览器中，在顶层导航到 `data:` URL 是被禁止的。更多细节，请参见 Mozilla 安全团队的这篇博客。

规范
--

| Specification |
| --- |
| The "data" URL scheme # section-2 |

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

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

参考
--

* Base64 编码和解码 (en-US)
* 百分号编码
* `atob()`
* `btoa()`
* CSS `url()` (en-US)
* URI (en-US)
选择 www 或非 www URL
=================

网站所有者经常会问的一个问题是选择非 www 的还是 www 的 URL。本文提供了选择建议。

什么是域名？
------

在一个 HTTP 网址中，在开头 `http://` 或 `https://` 后的第一个子字符串称为域名。该域名被托管到了文档所在的服务器。

一个服务器不一定是一个独立的物理机：几个服务器可以驻留在同一台物理机器上。此外，一个服务器可以通过多台机器进行处理，协作处理响应或平衡它们之间的请求负载。重点在于，从语义上去理解，*一个域名代表一个单独的服务器*。

那么，我只能选择其中一个做为我的网站的网址？
----------------------

* **是的**，你必须选择其中之一，且一直使用。你可以任选一个作为规范域名，但选好后就要保持下去。这样，无论是对用户，还是对搜索引擎，你的网站能保持更好的一致性。这包括始终链接到所选域名（如果你在网站中使用相对网址，这不应该很难），以及在分享链接时（比如通过电子邮件/社交网络等）始终使用同一个域名。
* **不必**，你可以两个都采用。关键是，你要明确且始终将其中一个作为官方域名，**这个官方域名被称为*规范*名称**。你所有的绝对链接应该使用它。但即便如此，另一个域名仍可以起作用：HTTP 有两种可用的技术，它们可以向你的用户——或是搜索引擎——说明哪一个是规范域名，同时也能让非规范域名起作用并提供用户期待的页面。

所以，选择其中一个作为你的规范域名！下面有两种技术允许非规范域名仍然起作用。

规范网址方式
------

下面有不同的方式来指定哪个网址是*规范的*。

### 使用 HTTP 301 重定向

在这种情况下，你需要配置接收 HTTP 请求的那台服务器（一般来说 www 和非 www 网址在同一台），让其用恰当的 HTTP `301` 响应来应答所有发往非规范的域名的请求。这会将尝试使访问非规范网址的浏览器重定向到其规范的等效网址。例如，选择了非 www 网址作为规范网址后，所有向 www 网址的请求，都应该被重定向到不含 www 的等效网址。

例如：

1. 服务器收到向 `http://www.example.org/whaddup` 的请求（当规范域名是 example.org 时）。
2. 服务器回应代码 `301`，以及标头 ``Location`: http://example.org/whaddup`。
3. 该客户端向规范域名下的地址——`http://example.org/whaddup`——发送请求。

HTML5 boilerplate project 中的一个例子演示了如何配置一台 Apache 服务器将一个域名重定向到另一个。

### 使用 <link rel="canonical">

将一个特殊的 HTML `<link>` 元素添加到网页，就能指明网页的规范地址。它对页面的普通读者没有影响，但会告诉搜索引擎爬虫这个页面实际在哪。这样一来，搜索引擎不会对同一页面索引多次——这可能导致页面被视为重复内容或垃圾内容，甚至于搜索引擎结果中会删除你的页面或者降低你的排名。

当加入这个标签，在两个域名中提供相同的内容，会告诉搜索引擎哪个域名是规范的。以前面的例子为例，`http://www.example.org/whaddup` 将提供与 `http://example.org/whaddup` 相同的内容，但有一个额外的 `<link>` 头部元素：


```html
<link href="http://example.org/whaddup" rel="canonical" />
```


与前一种方法不同的是，在浏览器历史记录中非 www 和 www 的网址是独立的条目。

使你页面都有效
-------

有了这些技术，你可以配置服务器对 www 前缀和非 www 前缀的域名进行正确的响应。你无法预测用户会在浏览器地址栏输入哪个 URL，你需要做的就是选择一个作为你的规范地址，然后将另一个地址重定向到它。

根据情况决定
------

可以认为这是一个非常主观的自行车棚效应。如果你想更深入地阅读，这里有一些资源：

* www.netlify.com 上的使用裸域名的选项（2020）
* www.wpbeginner.com 上的 WWW 和非 WWW——哪个更适合 WordPress 的 SEO？（2023）
参见
--

* 有关人们在地址栏中输入内容的统计信息（2011）
使用 SMIL 的 SVG 动画
================

**警告：** 虽然 Chrome 45 弃用了 SMIL 而偏向于 CSS 动画和 Web 动画，但之后 Chrome 开发者中止了对 SMIL 的弃用。

Firefox 4 利用 Synchronized Multimedia Integration Language（SMIL）引入了对 SVG 动画的支持。SMIL 允许你：

* 变动一个元素的数字属性（x、y……）
* 变动变形属性（translation 或 rotation）
* 变动颜色属性
* 物件方向与运动路径方向同步

只要在一个 SVG 元素内添加一个 SVG 元素比如说 `<animate>`，就能实现让元素动起来。下面是四个不同方法的示例。

元素的动画属性
-------

下面的示例变动了一个圆的 **cx** 属性。为了做到这，我们在 `<circle>` 元素里面添加了一个 `<animate>` 元素。对 `<animate>` 元素来说，重要的属性有：

**attributeName**

变动属性的属性名。

from

变动的初始值。

to

结束值。

dur

动画的持续时间（例如，写“5s”代表 5 秒钟）。

如果你想在同一个元素里变动更多的属性，只要添加更多的 `<animate>` 元素。


```html
<svg width="300" height="100">
  <title>Attribute Animation with SMIL</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
    <animate
 attributeName="cx"
 from="0"
 to="500"
 dur="5s"
 repeatCount="indefinite" />
  </circle>
</svg>
```

变动 transform 属性
---------------

`<animateTransform>` 元素用于变动 **transform** 属性。这个新元素是必要的，否则我们就不能让一个简单的、仅仅是一个数字的属性比如说 **x** 动起来。旋转属性看起来是这样的：`rotation(theta, x, y)`，这里 `theta` 是以角度数计量的角度，`x` 和 `y` 都是绝对位置。在下面的示例中，将变动旋转的中心以及角度。


```html
<svg width="300" height="100">
  <title>SVG SMIL Animate with transform</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <rect
 x="0"
 y="50"
 width="15"
 height="34"
 fill="blue"
 stroke="black"
 stroke-width="1">
    <animateTransform
 attributeName="transform"
 begin="0s"
 dur="20s"
 type="rotate"
 from="0 60 60"
 to="360 100 60"
 repeatCount="indefinite" />
  </rect>
</svg>
```

沿着路径动画
------

`<animateMotion>` 元素使一个元素的位置动起来，并顺着路径同步旋转。定义这个路径是与在 `<path>` 元素中定义路径的方法相同。你可以设置这个属性以定义对象是否与跟着路径的正切值旋转。

### 示例 1：线性运动

在这个示例中，一个蓝色的圆球在左右边界之间弹动，一次又一次，永不停息。这个动画是用 `<animateMotion>` 元素操纵的。在这个例子中，我们建立了一个由 **MoveTo** 命令和 **Horizontal-line** 命令、**Z** 命令构成的路径，**MoveTo** 命令命令指定动画路径的起始点，而 **Horizontal-line** 命令把圆移到右边 300 像素处，**Z** 命令闭合路径，建立一个回到起始点的回路。把 **repeatCount** 属性的值设置为 `indefinite`，我们指明了反复循环的动画，只要 SVG 图像还存在就会一直循环下去。


```html
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
  <title>SVG SMIL Animate with Path</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
    <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>
```


查看示例

### 示例 2：曲线运动

略有改变的示例，其运动路径是一条曲线，沿着路径的方向运动。


```html
<svg width="300" height="100">
  <title>SVG SMIL Animate with Path</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <rect
 x="0"
 y="0"
 width="20"
 height="20"
 fill="blue"
 stroke="black"
 stroke-width="1">
    <animateMotion
 path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z"
 dur="3s"
 repeatCount="indefinite"
 rotate="auto" />
  </rect>
</svg>
```

参见
--

* SVG
* SVG 动画规范
* SMIL 规范
SVG 教程
======

可缩放矢量图形，即 SVG，是 W3C XML 的分支语言之一，用于标记可缩放的矢量图形。目前 SVG 在 Firefox、Opera、Webkit 浏览器、IE 等浏览器中已经部分实现。

本教程旨在解释 SVG 内部的技术细节。如果你希望绘制非常漂亮的图形，你可以在 Inkscape 的文档页面上获取更多有用的资源。另外还有一个比较好的 SVG 介绍：W3C 的 SVG 入门。

**备注：** 本教程还在初期阶段，如果你有能力，可以来增加扩展一两段，写一整页的话会给加分！

##### 从头开始介绍 SVG

* 引言
* 入门
* 坐标定位
* 基本形状
* 路径
* 填充与边框
* 渐变
* 图案
* 文字
* 基本变换
* 裁剪和遮罩
* 其他 SVG 内容
* 滤镜效果
* SVG 字体
* SVG 的 Image 标签
* SVG 工具

下面罗列的主题更高级，所以需要单独列出教程。

##### JavaScript 脚本化 SVG

待定（TBD：To be determined）

##### SVG 滤镜教程

待定

##### SVG 的 SMIL 动画

待定

##### 在 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 |
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。
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
===========

该滤镜执行两个输入图像的智能像素组合，在图像空间中使用以下 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
==============

该滤镜对输入图像进行高斯模糊，属性`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
======

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

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

用法
--

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

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

用法
--

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

示例
--

属性
--

### 全局属性

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

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

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

参见
--

* `<filter>`
* `<animate>`
* `<set>`
* `<feMerge>`
* 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
====

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

用法
--

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

示例
--

属性
--

### 全局属性

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

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

该元素实现了 `SVGViewElement` 接口。
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 元素不会呈现为图形的一部分。替代性提词既可以看到也可以听到，它显示了 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
=========

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

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

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

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