recursal/MDN huggingface dataset:
SVG 字体
======

* « 上一页
* 下一页 »

当规定 SVG 时，在浏览器支持 web 字体并不流行。因为访问正确的字体文件对于正确呈现字体是有确定性的，SVG 中添加了一个字体描述技术，以提供这个能力。它并不是为了和别的格式比如说 PostScript 或 OTF 兼容，而是为了将字形信息嵌入 SVG 呈现的一个简单的方法。

**备注：** SVG 字体当前只在 Safari 和 Android 浏览器中受支持。

Chrome 38（和 Opera25）移除了这个功能，Firefox 已经无限期推迟实施它以专注于实现 WOFF。别的工具，如 Batik 和部分 Inkscape 支持 SVG 字体嵌入。

定义一个 SVG 字体的基础是 `<font>` 元素。

定义一个字体
------

在 SVG 中嵌入一个字体，有一些原料要求。让我们用一个示例演示它（来自规范文档的示例），并详细解释。


```html
<font id="Font1" horiz-adv-x="1000">
  <font-face
 font-family="Super Sans"
 font-weight="bold"
 font-style="normal"
 units-per-em="1000"
 cap-height="600"
 x-height="400"
 ascent="700"
 descent="300"
 alphabetic="0"
 mathematical="350"
 ideographic="400"
 hanging="500">
    <font-face-src>
      <font-face-name name="Super Sans Bold" />
    </font-face-src>
  </font-face>
  <missing-glyph><path d="M0,0h200v200h-200z" /></missing-glyph>
  <!-- Outline of exclamation point glyph -->
  <glyph unicode="!" horiz-adv-x="300"></glyph>
  <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
  <!-- more glyphs -->
</font>
```


我们从`<font>`元素开始。这个携带了一个 ID 属性，使它能够通过一个`URI`被引用（如下所示）。属性`horiz-adv-x`定义了相比之单一字形的路径定义，一个字符的平均宽度。值`1000`设置了一个起作用的合理值。有一些陪同的属性，帮助进一步定义基本的字形盒布局。

`<font-face>`元素在 SVG 中等同于 CSS 的 `@font-face` 声明。它定义了最终字体的基本属性，比如说 weight、style，等等。在上面这个示例中，最重要的是定义`font-family`，后面的 CSS 和 SVG `font-family`属性可以引用它的值。属性`font-weight`和`font-style`跟 CSS 中的描述符有同样的目的。所有后面的属性都是字体布局引擎的呈现指令，举个例子，字形的全部高度可以提升多少。

它的子元素，`<font-face-src>`元素，相对于 CSS 的`@font-face`描述符中的`src`描述符。你可以利用它的子元素 `<font-face-name>`和`<font-face-uri>`把字体声明指向外源。以上示例表达了如果渲染器有一个名为“Super Sans Bold”的本地字体可用，它将使用这个本地字体。

紧跟着`<font-face-src>`元素的是一个`<missing-glyph>`元素。它定义了如果一个特定的字形在字体中找不到，而且也没有回调机制的话，该如何显示。它同时还显示了如何创建字形：在里面简单添加任一个图形化 SVG 内容。你可以在这里使用任何其他的 SVG 元素，甚至是 `<filter>`元素、`<a>`元素或者 `<script>`元素。然而，为了简化字形，你可以简单添加一个属性`d`——它精确定义了字形的形状，就像标准 SVG 路径所做的那样。

真正的字形是用`<glyph>`元素定义的。它最重要的属性是`unicode`。它定义了表达这个字形的 unicode 代码点。如果你还在一个字形上指定了 `lang`属性，你可以更进一步专门限定它为特定的语言（由目标上的`xml:lang`属性表达）。而且，你可以使用任意的 SVG 来定义这个字形，它允许用户代理所支持的很多效果。

有两个进一步的元素，可以定义在`font`元素里面：`<hkern>`元素和`<vkern>`元素。这两个元素每个引用到至少两个字符（属性 u1 和属性 u2）以及一个属性 k。属性 k 决定了那些字符之间的距离应该减少多少。下面的示例指示用户代理把“A”和“V”字符放得比标准的字符间距更靠近一些。


```html
<hkern u1="A" u2="V" k="20" />
```

引用一个字体
------

如果你已经把你的字体声明如上放在一起，你可以使用一个单一的`font-family`属性以实现在 SVG 文本上应用字体：


```html
<font>
  <font-face font-family="Super Sans" />
  <!-- and so on -->
</font>

<text font-family="Super Sans">My text uses Super Sans</text>
```


然而，你可以自由组合一些方法，在如何定义字体方面有极大的自由度。

### 选项：使用 CSS @font-face

你可以使用`@font-face`以引用远程（或者非远程）字体：


```html
<font id="Super\_Sans">
  <!-- and so on -->
</font>

<style>
 @font-face {
 font-family: "Super Sans";
 src: url(#Super\_Sans);
 }
</style>

<text font-family="Super Sans">My text uses Super Sans</text>
```

### 选项：引用一个远程字体

上面提到的 `font-face-uri` 元素允许你引用一个外来字体，因此可以有很大的可重用性：


```html
<font>
  <font-face font-family="Super Sans">
    <font-face-src>
      <font-face-uri xlink:href="fonts.svg#Super\_Sans" />
    </font-face-src>
  </font-face>
</font>
```

* « 上一页
* 下一页 »
引言
==

* « 上一页
* 下一页 »

SVG 是一种 XML 语言，类似 XHTML，可以用来绘制矢量图形，例如下面展示的图形。SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。

![Mozilla dino logo](/zh-CN/docs/Web/SVG/Tutorial/Introduction/dino.svg)

SVG 诞生于 1999 年，之前有几个相互竞争的格式规范被提交到 W3C，但是都没有获得批准。主流浏览器均支持 SVG。加载慢是 SVG 的一个缺点。但是 SVG 也有自身的优点，比如它实现了 DOM 接口（比 Canvas 方便），不需要安装第三方扩展。当然，是否使用 SVG 还要取决于你要实现什么。

基本要素
----

HTML 提供了定义标题、段落、表格等等内容的元素。与此类似，SVG 也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线。一个简单的 SVG 文档由 `<svg>` 根元素和基本的形状元素构成。另外还有一个`g`元素，它用来把若干个基本形状编成一个组。

从这些开始，SVG 可以变得更加复杂。SVG 支持渐变、旋转、动画、滤镜效果、与 JavaScript 交互等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。

开始之前
----

包括 Inkscape在内的很多免费应用原生支持 SVG 格式的文件。但是本教程建议在学习过程中使用 XML 或文本编辑器，因为想要理解 SVG 内部的原理，最好的方法就是动手写一些 SVG 的标记。你需要注意到你的最终目标。各种 SVG 浏览器是有差异的，因此很可能你制作了一个 SVG 图形，并且用一个工具调试正常后，却在另外一个浏览器中无法正常显示。这是因为不同的浏览器支持 SVG 标准的程度不同，另外，如果你将其他技术和 SVG 一起使用（比如 JavaScript和 CSS），也会出现类似的情况。

所有的现代浏览器都支持 SVG，在某些情况下甚至几个版本都支持 SVG。Can I use上有一份比较详细的支持 SVG 的浏览器列表，Firefox 1.5 以后的版本支持 SVG 的部分内容，并且支持的程度越来越高。希望通过这份教程，MDN 能帮助开发者理解 Gecko 内核和其他一些主要编译器之间的差异。

正式开始之前，你需要基本掌握 XML 和其他标记语言比如说 HTML，如果你不是很熟悉 XML，这里有几个重点一定要记住：

* SVG 的元素和属性必须按标准格式书写，因为 XML 是区分大小写的（这一点和 HTML 不同）
* SVG 里的属性值必须用引号引起来，就算是数值也必须这样做。

SVG 是一个庞大的规范，本教程主要涵盖基础内容。掌握了这些内容之后，你就有能力使用元素参考和接口参考，学习其他你需要知道的内容。

SVG 的种类
-------

自从 2003 年成为 W3C 推荐标准以来，最接近的“完整版”SVG 版本是 1.1 版，它基于 1.0 版，并且增加了更多便于实现的模块化内容，SVG1.1 的第二个版本在 2011 年成为推荐标准，完整的 SVG1.2 本来是下一个标准版本，但它又被 SVG2.0 取代。SVG2.0 正在制定当中，它采用了类似 CSS3 的制定方法，通过若干松散耦合的组件形成一套标准。

除了完整的 SVG 推荐标准，W3C 工作组还在 2003 年推出了 SVG Tiny 和 SVG Basic。这两个配置文件主要瞄准移动设备。首先 SVG Tiny 主要是为性能低的小设备生成图元，而 SVG Basic 实现了完整版 SVG 里的很多功能，只是舍弃了难以实现的大型渲染（比如动画）。2008 年，SVG Tiny1.2 成为 W3C 推荐标准。

另外还有一些关于 SVG 打印规格的项目，增加对多页面和颜色管理的支持，但是这项工作已经终止。

* « 上一页
* 下一页 »
剪切和遮罩
=====

* « 上一页
* 下一页 »

擦除已经创建的元素的部分内容，最初看起来有点矛盾。但是如果你打算在 SVG 中创建一个半圆形，你将很快发现下面的属性的作用了。

* **Clipping** 用来移除在别处定义的元素的部分内容。在这里，任何半透明效果都是不行的。它只能要么显示要么不显示。
* **Masking** 允许使用透明度和灰度值遮罩计算得的软边缘。
创建剪切
----

我们在一个圆形的基础上创建上面提到的半圆形：


```html
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
  </defs>

  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>
```


在 (100,100) 创建一个圆形，半径是 100。属性`clip-path`引用了一个带单个 rect 元素的``<clipPath>``元素。它内部的这个矩形将把画布的上半部分涂黑。注意，`clipPath`元素经常放在一个`defs`元素内。

然而，该 rect 不会被绘制。它的象素数据将用来确定：圆形的哪些像素需要最终呈现出来。因为矩形只覆盖了圆形的上半部分，所以下半部分将消失了：

现在我们已经有了一个半圆形，不用处理弧形路径元素。对于这个剪切，`clipPath`内部的每个路径都会被检查到、与它的描边属性一起被估值、变形。然后目标的位于 clipPath 内容的结果的透明度区域的每一块都不会呈现。颜色、不透明度都没有这种效果，因为它们不能让一部分彻底消失。

遮罩
--

遮罩的效果最令人印象深刻的是表现为一个渐变。如果你想要让一个元素淡出，你可以利用遮罩效果实现这一点。


```html
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="Gradient">
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="Mask">
      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
    </mask>
  </defs>

  <rect x="0" y="0" width="200" height="200" fill="green" />
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>
```


你看到有一个绿色填充的矩形在底层，一个红色填充的矩形在上层。后者有一个`mask`属性指向一个`mask`元素。`mask`元素的内容是一个单一的`rect`元素，它填充了一个透明到白色的渐变。作为红色矩形继承`mark`内容的`alpha`值（透明度）的结果，我们看到一个从绿色到红色渐变的输出：

用 `opacity` 定义透明度
-----------------

有一个简单方法可以用来为整个元素设置透明度。它就是`opacity`属性：


```xml
<rect x="0" y="0" width="100" height="100" opacity=".5" />
```


上面的矩形将绘制为半透明。填充和描边还有两个属性是`fill-opacity`和`stroke-opacity`，分别用来控制填充和描边的不透明度。需要注意的是描边将绘制在填充的上面。因此，如果你在一个元素上设置了描边透明度，但它同时设有填充，则描边的一半应用填充色，另一半将应用背景色。


```html
<svg
 width="200"
 height="200"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="200" height="200" fill="blue" />
  <circle
 cx="100"
 cy="100"
 r="50"
 stroke="yellow"
 stroke-width="40"
 stroke-opacity=".5"
 fill="red" />
</svg>
```


你看到这个示例，红色的圆形在蓝色的背景上，黄色描边设置为 50% 不透明度，导到双色描边的效果。

利用广为人知的 CSS 技术
--------------

Web 开发工具箱中有一个很有用的工具是 `display:none`。因此，决定将此 CSS 属性与 CSS 2 中定义的 `visibility` 和 `clip` 属性一起纳入 SVG 并不奇怪。对于恢复以前设置的 `display:none`，重要的是知道所有的 SVG 元素的初始 `display` 值都是 `inline`。

* « 上一页
* 下一页 »
其他 SVG 内容
=========

* « 上一页
* 下一页 »

除了图形化原件，如矩形和圆形之外，SVG 还提供了一些元素用来在图片中嵌入别的类型的内容。

### 嵌入光栅图像

很像在 HTML 中的`img`元素，SVG 有一个`image`元素，用于同样的目的。你可以利用它嵌入任意光栅（以及矢量）图像。它的规格要求应用至少支持 PNG、JPG 和 SVG 格式文件。

嵌入的图像变成一个普通的 SVG 元素。这意味着，你可以在其内容上用剪切、遮罩、滤镜、旋转以及其他 SVG 工具：


```html
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="200"
 height="200">
  <image
 x="90"
 y="-65"
 width="128"
 height="146"
 transform="rotate(45)"
 xlink:href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/image/mdn\_logo\_only\_color.png" />
</svg>
```

### 嵌入任意 XML

因为 SVG 是一个 XML 应用，所以你**总是**可以在 SVG 文档的任何位置嵌入任意 XML。但是你没有必要定义周围的 SVG 需要怎样反作用于这个内容。实际上，在一个遵从的浏览者中，根本没有反作用的方法，数据将简单被忽略。因此特地在 SVG 中添加了`<foreignObject>` 元素。它的唯一的目的是作为其他标记的容器和 SVG 样式属性的载体（更突出的`width`和`height`用来定义该对象占用的空间。）。

foreignObject 元素是一个好办法，用来在 SVG 中嵌入 XHTML。如果你有更长的文本，该 HTML 布局比 SVG `text`元素更适合。另一个经常被引用的用例是用 MathML 写的方程式。对于 SVG 的科学应用，它是连接两个世界的一个很好的办法。

**备注：** 请记住，`foreignObject`元素的内容是能被浏览器加工的。一个独立的 SVG 浏览器不太可能呈现 HTML 或 MathML。

因为`foreignObject`是一个 SVG 元素，所以你可以像用图像那样，使用任何 SVG 的精华，它将被应用到它的内容。

* « 上一页
* 下一页 »
scale
=====

属性 `scale` 定义了用在 `<feDisplacementMap>` 滤镜上的置换缩放因子。它的总值表达在 `<filter>` 元素的属性 `primitiveUnits` 确定的坐标系统中。

如果这个属性的值是 **0**，则它的操作对源图像没有影响。

如果没有指定这个属性，则效果等同于它被指定了 **0** 值。

用法
--

| 类别 | *无* |
| --- | --- |
| 值 | <number> |
| 可变性 | Yes |

示例
--

元素
--

下列元素可以使用`scale`属性：

* `<feDisplacementMap>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fedisplacementmap-scale |
attributeType
=============

该属性指定目标属性和它相对应的值处于哪个命名空间里。

用法
--

| 类别 | 动画属性目标属性 |
| --- | --- |
| 值 | CSS | XML | **auto** |
| 可变性 | No |
| 规范文档 | SVG 1.1 (2nd Edition) |

这个属性可取下列值之一：

CSS

指定`attributeName`的值是一个 CSS 属性名。

XML

指定`attributeName`的值是一个 XML 属性名，在目标元素的默认 XML 命名空间里。

auto

编译器将把`attributeName`匹配到目标元素的一个属性。用户代理先搜索 CSS 属性列表以找出一个匹配的属性名，如果找不到，再为这个元素搜索默认 XML 命名空间。

示例
--

元素
--

下列元素可以使用`attributeType`属性：

* `<animate>`
* `<animateColor>`
* `<animateTransform>`
* `<set>`
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # AttributeTypeAttribute |
stroke-linecap
==============

`stroke-linecap` 属性制定了，在开放子路径被设置描边的情况下，用于开放自路径两端的形状。

作为一个展现属性，它也可以在一个 CSS 样式表内部，作为一个属性直接使用。

使用背景
----

| 分类 | 展现属性 |
| --- | --- |
| 属性值 | butt | round | square | inherit |
| 可动画化 | 是 |

示例
--


```html
<?xml version="1.0"?>
<svg
 width="120"
 height="120"
 viewPort="0 0 120 120"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg">
  <line
 stroke-linecap="butt"
 x1="30"
 y1="30"
 x2="30"
 y2="90"
 stroke="black"
 stroke-width="20" />

  <line
 stroke-linecap="round"
 x1="60"
 y1="30"
 x2="60"
 y2="90"
 stroke="black"
 stroke-width="20" />

  <line
 stroke-linecap="square"
 x1="90"
 y1="30"
 x2="90"
 y2="90"
 stroke="black"
 stroke-width="20" />

  <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90" stroke="white" />
</svg>
```

元素
--

以下元素可以使用`stroke-linecap` 属性

* 图形元素 »
* 文本内容元素 »
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LineCaps |
target
======

**`target`** 当结束资源有多个可能的目标时，例如，当父文档嵌入在 HTML 或 XHTML 文档中或使用选项卡式浏览器查看时，应使用该属性。此属性指定激活链接时要在其中打开文档的浏览上下文的名称（例如，浏览器选项卡或（X）HTML iframe 或 object 元素）：

只有一个元素正在使用此属性：`<a>`

示例
--
```

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

text {
  font:
    20px Arial,
    Helvetica,
    sans-serif;
  fill: blue;
  text-decoration: underline;
}
```



```html
<svg viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg">
  <a href="https://developer.mozilla.org" target="\_self">
    <text x="0" y="20">在 iframe 中打开链接</text>
  </a>
  <a href="https://developer.mozilla.org" target="\_blank">
    <text x="0" y="60">在新标签页或窗口中打开链接</text>
  </a>
  <a href="https://developer.mozilla.org" target="\_top">
    <text x="0" y="100">在此标签或窗口中打开链接</text>
  </a>
</svg>
```

使用说明
----

| 值 | `_self`| `_parent`| `_top`| `_blank`|`<XML-Name>` |
| --- | --- |
| 默认值 | `_self` |
| 可动画的 | 是 |

`_replace` 
已弃用

当前 SVG 图像被与当前 SVG 图像在同一帧中相同矩形区域中的链接内容替换。

**备注：** 这个值是从来没有很好的执行，之间的区别 `_replace`，并 `_self` 已通过在浏览上下文的 HTML 定义的变化变得多余。使用 `_self` 以取代目前的 SVG 文件。

`_self`

在与当前 SVG 图像相同的浏览上下文中，当前 SVG 图像被链接的内容替换。

`_parent`

SVG 图像的直接父浏览上下文将被链接的内容替换（如果存在），并且可以从此文档中安全地访问它。

`_top`

完整活动窗口或选项卡的内容将由链接的内容替换（如果存在），并且可以从此文档中安全地访问

`_blank`

如果此文档可以安全地显示，则需要一个新的未命名窗口或标签来显示链接的内容。如果用户代理不支持多个窗口/选项卡，则结果与\_top 相同。

`<XML-Name>`

指定用于显示链接内容的浏览上下文的名称（选项卡，内联框架，对象等）。如果具有该名称的上下文已经存在，并且可以从此文档中安全地访问，则可以重新使用该上下文，替换现有内容。如果不存在，则创建它（与'\_blank'相同，但现在有了一个名称）。该名称必须是有效的 XML 名称 [XML11]，并且不能以下划线（U + 005F LOW LINE 字符）开头，以满足来自 HTML 的有效浏览上下文名称的要求。

规范
--

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

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

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

`mask` 属性绑定的元素将应用给定的 `<mask>` 元素。

作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | <FuncIRI> | **none** | inherit |
| 可变性 | Yes |

<funcIRI>

对同一 SVG 文档片段内部别的图形对象的一个引用，这个图形对象将用作遮罩。这个引用的句法与`CSS URI` (en-US)的句法相同。

示例
--

元素
--

下列元素可以使用`mask`属性：

* 容器元素 »
* 图形元素 »
规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask |

相关内容
----

* `<mask>`
stroke
======

`stroke` 属性定义了给定图形元素的外轮廓的颜色。它的默认值是 **`none`**。

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | <paint> |
| 可变性 | 是 |

示例
--

SVG 描边的线
--------

### 示例 1：用 stroke 属性画一条绿色的直线


```html
<svg height="50" width="300">
  <path stroke="green" d="M5 20 1215 0" />
</svg>
```

### 示例 2：用 Stroke 属性画一个拥有蓝色边框的黑色的圆形


```html
<svg height="200" width="200">
  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" />
</svg>
```

元素
--

下列元素可以使用`stroke`属性：

* 形状元素 »
* 文本内容元素 »
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # SpecifyingStrokePaint |
order
=====

order 属性确定被用作 `<feConvolveMatrix>` 元素的矩阵的大小。

提供的值必须是大于 0 的<整数>. 第一个值<orderX>,确定矩阵的列数。第二个值<orderY>确定矩阵的行数。如果<orderY>没有指定，那么它的默认值相当于<orderX>的值。

一个典型的值是 order="3". 建议只使用较小的值 (例如 3); 大值可能会导致较高的 CPU 开销而且通常界面上并不能表现出高耗能造成的效果。

如果未指定该属性，则其效果就如同指定值为 3.

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

| Categories | None |
| --- | --- |
| Value | <number-optional-number> |
| Animatable | Yes |

Example
-------

Elements
--------

下列元素可以使用 order 属性

* `<feConvolveMatrix>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-order |
visibility
==========

`visibility`属性让你能够控制一个图形元素的可见性。用了值`hidden`或者值`collapse`，当前的图形元素将不可见。

**备注：** 如果 `<tspan>` 或 `<tref>` 元素上的 `visibility` 属性设置为 `hidden`，则文本变得不可见，但是依然占用文本布局计算的空间。

根据属性 `pointer-events` 的值，图形元素如果属性 `visibility` 值设置为 `hidden`，依然能够响应事件。

作为一个表现属性，它可以直接用作 CSS 样式表内部的属性。请阅读 `CSS visibility` 以了解更多信息。

用法
--

| 类别 | 表现属性 |
| --- | --- |
| 值 | **visible** | hidden | collapse | inherit |
| 可变性 | Yes |

示例
--

元素
--

下列元素楞以使用`visibility`属性：

* 图形元素 »
* 文本内容元素 »
规范
--

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

参见
--

* 属性`display`
* `CSS visibility`
radius
======

`radius` 属性代表了一个给定 `<feMorphology>` 滤镜上的操作。如果提供了两个 <number>，则第一个数代表了 x-radius，第二个数代表了 y-radius。如果只提供了一个数字，则值同时用于 x 和 y。值是在 `<filter>` 元素的属性 `primitiveUnits` 确定的坐标系统内。

如果没有指定该属性值，效果等同于指定了一个 **0** 值。

用法
--

| 类别 | *无* |
| --- | --- |
| 值 | <number-optional-number> |
| 可变性 | Yes |

示例
--

元素
--

以下元素可以使用`radius`属性：

* `<feMorphology>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-femorphology-radius |
cx
==

**`cx`** 属性定义一个中心点的 x 轴坐标。

有三个元素在使用此属性：`<circle>`, `<ellipse>`, 和 `<radialGradient>`

示例
--
```

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



```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cx="25%" id="myGradient">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="45" />
  <ellipse cx="150" cy="50" rx="45" ry="25" />
  <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
</svg>
```

圆
-

对于 `<circle>`，`cx` 用来定义图形中心的 x 轴坐标。

|  |  |
| --- | --- |
| 值 | `<length-percentage>` |
| 默认值 | `0` |
| 可变性 | Yes |

注：起始于 SVG2 `cx`，是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。

椭圆
--

对于 `<ellipse>`，`cx` 用来定义图形中心的 x 轴坐标。

|  |  |
| --- | --- |
| 值 | `<length-percentage>` |
| 默认值 | `0` |
| 可变性 | Yes |

**注：** 起始于 SVG2 `cx`，是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。

径向渐变
----

对于 `<radialGradient>`, `cx` 用来定义径向渐变终止圆的 x 轴坐标。

|  |  |
| --- | --- |
| 值 | `<length-percentage>` |
| 默认值 | `50%` |
| 可变性 | Yes |

#### 示例
```

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



```html
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cx="0" id="myGradient000">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cx="50%" id="myGradient050">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cx="100%" id="myGradient100">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect
 x="1"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient000)"
 stroke="black" />
  <rect
 x="13"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient050)"
 stroke="black" />
  <rect
 x="25"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient100)"
 stroke="black" />
</svg>
```

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CX |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCXAttribute |

参见
--

* `cy`
* `r`
x
=

**`x`** 属性在用户坐标系统中标识了一个 x 轴坐标。

你可以在以下 SVG 元素中使用该属性：

* `<cursor>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDropShadow>`
* `<feFlood>`
* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMergeNode>`
* `<feMorphology>`
* `<feOffset>`
* `<fePointLight>`
* `<feSpecularLighting>`
* `<feSpotLight>`
* `<feTile>`
* `<feTurbulence>`
* `<filter>`
* `<foreignObject>`
* `<glyphRef>`
* `<image>`
* `<mask>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<symbol>`
* `<text>`
* `<tref>`
* `<tspan>`
* `<use>`
示例
--
```

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



```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="60" height="60" />
  <rect x="120" y="20" width="60" height="60" />
  <rect x="220" y="20" width="60" height="60" />
</svg>
```

use
---

对于 `<use>` 元素，`x` 定义了引用元素的左上角的 x 坐标。

|  |  |
| --- | --- |
| 值 | **<length>**
 |
 **<percentage>** |
| 默认值 | `0` |
| 可变性 | 是 |

**备注：** 从 SVG2 开始，`x` 变为*几何属性*，这意味着该元素也可以用作使用的元素的 CSS 属性。

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-x |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-x |
| Filter Effects Module Level 1 # element-attrdef-fepointlight-x |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-x |
| CSS Masking Module Level 1 # element-attrdef-mask-x |
| Scalable Vector Graphics (SVG) 2 # X |
| Scalable Vector Graphics (SVG) 2 # PatternElementXAttribute |
| Scalable Vector Graphics (SVG) 2 # TextElementXAttribute |
repeatCount
===========

这个属性表示动画将发生的次数。

这个属性的值指定了重复的次数。它也可以包括用分数值表示。它的值必须大于 0。

示例
--

The following elements can use the `repeatCount` attribute

* Animation elements »
用法
--

|  |  |
| --- | --- |
| 值 | `<number>` | `indefinite` |
| 默认值 | *无* |
| 可变性 | 否 |

`<number>`

该值指定迭代次数。它可以使用分数值来表示部分迭代。分数值仅表示整个动画持续时间的一部分。值必须大于 `0`。

`indefinite`

该值表示动画将无限期地重复（即直到文档结束）。

规范
--

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

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

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

keyTimes 属性是一个以分号分隔的时间值列表，用于控制动画的执行步骤。列表中的每个值与 `values` 中的值一一对应，定义了 `values` 中的值在动画中何时执行，keyTimes 列表中的每一个值都是指定在 [0-1] 之间的浮点数，表示动画的完成时间。

如果指定了 keyTimes 列表，那么一定有与之完全对应的`values`列表。

每一个连续的时间值必须大于等于前一个时间值。

keyTimes 列表的语义取决于插值模式：

* 对于 linear(线性) 和 spline(样条) 动画，列表中的第一个时间值必须为 0，列表的最后一个时间值必须为 1。与每个 value 关联的时间值定义了何时设置该 value，该 value 在 keyTimes 的时间 值的中间插值。
* 对于 discrete(离线) 动画，列表中的第一个值必须为 0。与每个 value 关联的时间值定义了何时设置该 value，动画函数使用该 value，直到 keyTimes 中定义的下一个时间值。

如果插值模式是 paced（踏步），keyTimes 属性被忽略。

如果 duration（持续时间）不确定，则将忽略任何 keyTimes 规范。

用法
--

| 类别 | 动画值属性 |
| --- | --- |
| 值 | <list> |
| 可变性 | No |

示例
--


```html
<?xml version="1.0"?>
<svg
 width="120"
 height="120"
 viewPort="0 0 120 120"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
 attributeName="cx"
 attributeType="XML"
 dur="4s"
 values="60 ; 110 ; 60 ; 10 ; 60"
 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
 repeatCount="indefinite" />

    <animate
 attributeName="cy"
 attributeType="XML"
 dur="4s"
 values="10 ; 60 ; 110 ; 60 ; 10 "
 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
 repeatCount="indefinite" />
  </circle>
</svg>
```

元素
--

以下元素可以使用 `keyTimes 属性`

* `<animate>`
* `<animateColor>`
* `<animateMotion>`
* `<animateTransform>`
规范
--

| Specification |
| --- |
| SVG Animations Level 2 # KeyTimesAttribute |
stroke-width
============

`stroke-width` 属性指定了当前对象的轮廓的宽度。它的默认值是 **1**。如果使用了一个<percentage>，这个值代表当前视口的百分比。如果使用了 **0** 值，则将不绘制轮廓。

作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | <length> | <percentage> | inherit |
| 可变性 | Yes |

示例
--

元素
--

下列元素可以使用`stroke-width`属性：

* 形状元素 »
* 文本内容元素 »
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeWidth |
fill-opacity
============

该属性指定了填色的不透明度或当前对象的内容物的不透明度。

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | <opacity-value> | inherit |
| 初始值 | 1 |
| 可变性 | Yes |
| 规范文档 | SVG 1.1 (2nd Edition) |

示例
--

元素
--

下列元素可以使用`fill-opacity`属性：

* 元素元素 »
* 文本内容元素 »
规范
--

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

参见
--

* `stroke-opacity`
* `opacity`
preserveAspectRatio
===================

有时候，通常我们使用 `viewBox` 属性时，希望图形拉伸占据整个视口。在其他情况下，为了保持图形的长宽比，必须使用统一的缩放比例。

`preserveAspectRatio` 属性表示是否强制进行统一缩放。

对于支持该属性的所有元素（如上所示），除了 `<image>` 元素之外，preserveAspectRatio 只适用于在同一元素上为 `viewBox` 提供的值。对于这些元素，如果没有提供属性 `viewBox`，则忽略了 preserveAspectRatio。

对于 `<image>` 元素，preserveAspectRatio 指示引用的图像应该如何与参考矩形进行匹配，以及是否应该相对于当前用户坐标系保留参考图像的长宽比

上下文用法
-----

| Categories | None |
| --- | --- |
| Value | <align> [<meetOrSlice>] |
| Animatable | Yes |

<align>

`<align>` 属性值表示是否强制统一缩放，当 SVG 的 viewbox 属性与视图属性宽高比不一致时使用。`<align>` 属性的值一定是下列的值之一：

* **none** 不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。（注意：如果 `<align>` 的值是 `none` ，则 `<meetOrSlice>` 属性的值将会被忽略。）
* **xMinYMin** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
* **xMidYMin** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
* **xMaxYMin** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
* **xMinYMid** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
* **xMidYMid** (默认值) - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
* **xMaxYMid** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
* **xMinYMax** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
* **xMidYMax** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
* **xMaxYMax** - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。

<meetOrSlice>

`<meetOrSlice>` 是可选的，如果提供的话，与 `<align>` 间隔一个或多个的空格，参数所选值必须是以下值之一：

* **meet** (默认值) - 图形将缩放到：
    + 宽高比将会被保留
    + 整个 SVG 的 viewbox 在视图范围内是可见的
    + 尽可能的放大 SVG 的 viewbox，同时仍然满足其他的条件。在这种情况下，如果图形的宽高比和视图窗口不匹配，则某些视图将会超出 viewbox 范围（即 SVG 的 viewbox 视图将会比可视窗口小）。
* **slice** - 图形将缩放到：
    + 宽高比将会被保留
    + 整个视图窗口将覆盖 viewbox
    + SVG 的 viewbox 属性将会被尽可能的缩小，但是仍然符合其他标准。在这种情况下，如果 SVG 的 viewbox 宽高比与可视区域不匹配，则 viewbox 的某些区域将会延伸到视图窗口外部（即 SVG 的 viewbox 将会比可视窗口大）。

实例
--

元素
--

以下元素可使用 `preserveAspectRatio` 属性

* `<svg>`
* `<symbol>`
* `<image>`
* `<feImage>`
* `<marker>`
* `<pattern>`
* `<view>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feimage-preserveaspectratio |
| Scalable Vector Graphics (SVG) 2 # PreserveAspectRatioAttribute |
attributeName
=============

该属性标识了在一个动画动作环节中，父元素的需要被改变的属性名。

用法
--

| 类别 | 动画属性目标属性 |
| --- | --- |
| 值 | <attributeName> |
| 可变性 | No |
| 规范文档 | SVG 1.1 (2nd Edition) |

示例
--

下面的示例使用了 y 作为`attributeName`，通过改变一个矩形在 Y 轴上的位置来变动这个矩形。


```xml
<?xml version="1.0"?>
<svg width="250" height="250"
 viewPort="0 0 250 250" version="1.1"
 xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100">
    <animate attributeType="XML"
 attributeName="y"
 from="0" to="50"
 dur="5s"/>
  </rect>
</svg>
```

元素
--

下列元素可以使用`attributeName`属性：

* `<animate>`
* `<animateColor>`
* `<animateTransform>`
* `<set>`
规范
--

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