recursal/MDN huggingface dataset:
style
=====

**`style`** 属性指定了指定其元素的样式信息。它的功能与 HTML 中的 style 属性相同。

使用环境
----

| Categories | Presentation attribute |
| --- | --- |
| Value | <style> |
| Animatable | No |

<style>

样式数据的语法取决于样式表语言。默认情况下，如果未指定 `contentStyleType`，样式表语言为 CSS。

示例
--

以下示例展示了使用 CSS 作为样式表语言来使用 style 属性，为一个矩形框添加样式。


```html
<svg version="1.1" viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg">
  <rect
 height="300"
 width="600"
 x="200"
 y="100"
 style="fill: red; stroke: blue; stroke-width: 3" />
</svg>
```

元素
--

以下元素可以使用 style 属性

* Container elements »
* Filter primitive elements »
* Gradient elements »
* Graphics elements »
* Structural elements »
* Text content elements »
* `<clipPath>`
* `<filter>`
* `<font>`
* `<foreignObject>`
* `<glyphRef>`
* `<stop>`
* `<glyph>`
规范
--

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

相关
--

* `<style>`
points
======

`points` 属性定义了用来画一个 `<polyline>` 元素或画一个 `<polygon>` 元素的点的数列。

每个点用用户坐标系统中的一个 X 坐标和 Y 坐标定义。用逗号分开每个点的 X 和 Y 坐标标记是一个常用实践（但是并非必要），使用空间标注每个点。

用法
--

| 类别 | 无 |
| --- | --- |
| 值 | <list-of-points> |
| 可变性 | Yes |

示例
--


```xml
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 250,150 200,110"
 style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
```

元素
--

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

* `<polyline>`
* `<polygon>`
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PolygonElementPointsAttribute |
| Scalable Vector Graphics (SVG) 2 # PolylineElementPointsAttribute |
preserveAlpha
=============

`preserveAlpha` 属性表示`<feConvolveMatrix>` 元素怎样处透明度。

取值为 `false` 表示 feConvolveMatrix 元素将应用在包括透明度通道的所有的通道。这是默认的选项。

取值为 `true` 表示 feConvolveMatrix 仅应用在颜色通道。

用法
--

| 类别 | None |
| --- | --- |
| 值 | `true` | `false` |
| 可变性 | Yes |

示例
--

元素
--

下列元素可以使用 `preserveAlpha` 属性

* `<feConvolveMatrix>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feconvolvematrix-preservealpha |
stroke-miterlimit
=================

如果两条线交汇在一起形成一个尖角，而且属性 `stroke-linejoin` 指定了 `miter`，斜接有可能扩展到远远超过出路径轮廓线的线宽。属性 `stroke-miterlimit` 对斜接长度和 `stroke-width` 的比率强加了一个极限。当极限到达时，交汇处由斜接变成倒角。

斜接长度（斜接的外尖角和内夹角之间的距离）与 `stroke-width` 的比率，直接跟两条线之间的角度（θ）有关，用如下方程表示：
```

miterLength / stroke-width = 1 / sin ( theta / 2 )
```


举个例子，一个极限为 1.414 斜接，θ 小于 90 度的把斜接会转换成倒角，一个极限为 4.0 的斜接，θ 小于 29 度的斜接会转换成倒角，一个极限为 10.0 的斜接，θ 小于大约 11.5 度的斜接会转换成倒角。

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | <miterlimit> | inherit |
| 初始值 | 4 |
| 可动性 | Yes |

<miterlimit>

对斜角长度与`stroke-width`的比率的限制。<miterlimit>的值必须是一个大于或等于 1 的<number>。

示例
--

元素
--

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

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeMiterlimitProperty |
text-decoration
===============

`text-decoration` 属性的作用跟 `CSS Text Decoration` 特性差不多，当然除了它是一个 CSS 属性。浏览 `CSS Text Decoration` 获取进一步的信息。

使用环境
----

| 分类 | 外观属性 |
| --- | --- |
| 值 | none | underline | overline | line-through | blink | **inherit** |
| 是否可用于动画 | Yes |

元素
--
```

后代元素可以继承 text-decoration 这个属性
```


* Text content elements »
规范
--

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-property |
| Scalable Vector Graphics (SVG) 2 # TextDecorationProperties |

相关
--

* `CSS Text Decoration`
rx
==

**`rx`** 属性用于定义水平轴向的圆角半径尺寸。

`<ellipse>` 和 `<rect>` 两个基本图形使用了这个属性。

示例
--
```

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



```html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="50" cy="50" rx="0" ry="25" />
  <ellipse cx="150" cy="50" rx="25" ry="25" />
  <ellipse cx="250" cy="50" rx="50" ry="25" />

  <rect x="20" y="120" width="60" height="60" rx="0" ry="15" />
  <rect x="120" y="120" width="60" height="60" rx="15" ry="15" />
  <rect x="220" y="120" width="60" height="60" rx="150" ry="15" />
</svg>
```

椭圆
--

对于 `<ellipse>`，`rx` 属性定义了水平方向的半径尺寸。如果使用了负值或者零，那么椭圆就不会被绘制。

| 取值 | **<length>** | **<percentage>** | `auto` |
| --- | --- |
| 默认值 | `auto` |
| 是否支持动画 | 是 |

**注释：** 从 SVG2 开始， `rx` 是一个几何属性，也就是说，这个属性也可以用作椭圆的 CSS 属性。

矩形
--

对于 `<rect>`，`rx` 定义了水平方向的圆角尺寸。

`rx` 属性的实际效果取决于矩形的 `ry (en-US)` 属性和宽度：

* 如果你为 `rx` 属性指定了正确的值，但是没有定义 `ry (en-US)` 属性的值，那么浏览器会让 `ry (en-US)` 取 `rx` 属性被指定的相等的值。（反之亦然）
* 如果 `rx` 和 `ry (en-US)` 都没有被正确的赋值，那么浏览器会绘制一个带有直角尖角的矩形。
* `rx` 属性的有效值为矩形宽度的一半（即，如果为 `rx` 指定的值大于矩形宽度的一半，那么浏览器会视为 `rx` 的值为矩形宽度的一半）。

| 取值 | **<length>** | **<percentage>** | `auto` |
| --- | --- |
| 缺省值 | `auto` |
| 是否支持动画 | 是 |

**注释：** 从 SVG2 开始，`rx` 是一个几何属性，也就是说，这个属性也可以用作矩形（rect）的 CSS 属性。

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RX |
result
======

属性 `result` 定义了滤镜的分配名。如果提供了它，则经过滤镜处理的结果即图形可以再次滤镜处理，在后继滤镜（即另一个 `<filter>` 元素）上通过一个 `in` 属性引用之前的结果。如果没有提供 `result` 值，而且如果下一个滤镜也没有提供 `in` 属性值，则输出只可作为下一个滤镜的隐式输入。

用法
--

| 类别 | 无 |
| --- | --- |
| 值 | <filter-primitive-reference> |
| 可变性 | Yes |

注意`<filter-primitive-reference>`不是一个 XML ID，换句话说，`<filter-primitive-reference>`只在给定的`<filter>`元素内部有意义，因此只有局部范围。在同一个`<filter>`元素内部，同一个`<filter-primitive-reference>`出现多次也是合法的。如果引用了，`<filter-primitive-reference>`将使用在给定结果前面、离给定结果最近的滤镜。

元素
--

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

* 滤镜元素 »
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-result |
baseProfile
===========

`baseProfile` 特性描述了作者认为正确渲染内容所需要的最小的 SVG 语言概述。这个特性不会说明任何处理限制，可以把它看作是元数据。比如，这个特性的值可以被编辑工具用来在用户的修改超出所指定的基准概述范围时发出警告。

每个 SVG 概述应该为这个特性定义一个适合的文本。如果没有指定这个特性，效果就跟指定 `none` 一样。

使用背景
----

| 目录 | 无 |
| --- | --- |
| 值 | **none** | full| basic| tiny |
| 动画特性 | 无 |
| 规范文档 | SVG 1.1 (第二版) |

none

代表了最小的 SVG 语言配置，没有描述作者关于正确渲染内容的观点。

full

代表一个正常的概述，适用于 PC。

basic

代表一个轻量级的概述，适用于 PDA。

tiny

代表更轻量的概述，适用于手机。

例子
--


```html
<svg
 width="120"
 height="120"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 baseProfile="full">
  ...
</svg>
```

元素
--

以下元素会用到 `baseProfile` 特性

* `<svg>`
stroke-dasharray
================

属性 `stroke-dasharray` 可控制用来描边的点划线的图案范式。

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

用法
--

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

<dasharray>

它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，**5,3,2**等同于**5,3,2,5,3,2**。

示例
--


```html
<?xml version="1.0"?>
<svg
 width="200"
 height="200"
 viewPort="0 0 200 300"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg">
  <line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" />
  <line stroke-dasharray="5, 10" x1="10" y1="30" x2="190" y2="30" />
  <line stroke-dasharray="10, 5" x1="10" y1="50" x2="190" y2="50" />
  <line stroke-dasharray="5, 1" x1="10" y1="70" x2="190" y2="70" />
  <line stroke-dasharray="1, 5" x1="10" y1="90" x2="190" y2="90" />
  <line stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110" />
  <line stroke-dasharray="15, 10, 5" x1="10" y1="130" x2="190" y2="130" />
  <line stroke-dasharray="15, 10, 5, 10" x1="10" y1="150" x2="190" y2="150" />
  <line
 stroke-dasharray="15, 10, 5, 10, 15"
 x1="10"
 y1="170"
 x2="190"
 y2="170" />
  <line stroke-dasharray="5, 5, 1, 5" x1="10" y1="190" x2="190" y2="190" />

  <style>
 <![CDATA[
 line{
 stroke: black;
 stroke-width: 2;
 }
 ]]>
 </style>
</svg>
```

### 示例输出

元素
--

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

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeDashing |
clip-path
=========

元素的表现属性 **`clip-path`** 为其定义或关联一条剪切路径。

**注意：**`clip-path` 是一个表现属性，可以作为 CSS 属性使用。

作为一种表现属性，`clip-path` 可以用于任何元素，不过效果最明显的是下列十九种元素：`<a>`, `<circle>`, `<clipPath>`, `<ellipse>`, `<g>`, `<glyph>`, `<image>`, `<line>`, `<marker>`, `<mask>`, `<path>`, `<pattern>`, `<polygon>`, `<polyline>`, `<rect>`, `<svg>`, `<symbol>`, `<text>`, `<use>`

示例
--
```

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



```html
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <circle cx=".5" cy=".5" r=".5" />
  </clipPath>

  <!-- 左上：应用自定义的剪切路径 -->
  <rect
 x="1"
 y="1"
 width="8"
 height="8"
 stroke="green"
 clip-path="url(#myClip)" />

  <!-- 右上：应用 CSS 基本形状和 fill-box 几何。
 实质上和自定义剪切路径并把 clipPathUnits
 设成 objectBoundingBox 一样 -->
  <rect
 x="11"
 y="1"
 width="8"
 height="8"
 stroke="green"
 clip-path="circle() fill-box" />

  <!-- 左下 -->
  <rect
 x="1"
 y="11"
 width="8"
 height="8"
 stroke="green"
 clip-path="circle() stroke-box" />

  <!-- 右下：应用 CSS 基本形状和 view-box 几何。
 实质上和自定义剪切路径并把 clipPathUnits
 设成 userSpaceOnUse 一样 -->
  <rect
 x="11"
 y="11"
 width="8"
 height="8"
 stroke="green"
 clip-path="circle() view-box" />
</svg>
```

Usage notes
-----------

| 值 | `url()` | [ `<basic-shape>` || `<geometry-box>` ] | `none` |
| --- | --- |
| 默认值 | `none` |
| Animatable | 是 |

<geometry-box>

geometry-box 是应用 `<basic-shape>` 的额外信息，用于区分 CSS 基本形状如何应用于元素上：`fill-box` 表示将对象的包围框作为参照框；`stroke-box` 表示将对象的包围框加上描边的范围作为参照框；`view-box` 表示使用最近的 SVG 视窗作为参照框。


**备注：** `clip-path` 语法的更多细节可参考 CSS 属性 `clip-path` 的参考页面。

规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # the-clip-path |

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

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

See also
--------

* The CSS `clip-path` property
height
======

该属性在用户坐标系统中标识了一个垂直长度。该坐标的确切效果依赖于每个元素。大多数时候，它体现引用元素的矩形区域的高度（请阅读每个元素的文档以了解例外情况）。

除了`<svg>`元素之外，别的元素都必须指定该属性，`<svg>`的高度默认是 **100%**，而 `<filter>` 元素以及 `<mask>` 元素的默认高度是 **120%**。

示例
--


```html
<?xml version="1.0"?>
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" />
</svg>
```

元素
--

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

* 滤镜元素 »
* `<filter>`
* `<foreignObject>`
* `<image>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<use>`
* `<mask>`
用法
--

对于 `<use>` 元素，`height` 定义了引用元素的垂直长度。

|  |  |
| --- | --- |
| 值 | `auto` |
 **<length>**
 |
 **<percentage>** |
| 默认值 | `auto`（视为 `0`） |
| 可变性 | 是 |

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-height |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-height |
| CSS Masking Module Level 1 # element-attrdef-mask-height |
| Scalable Vector Graphics (SVG) 2 # Sizing |
| Scalable Vector Graphics (SVG) 2 # PatternElementHeightAttribute |
baseline-shift
==============

属性 `baseline-shift` 允许相对于父文本内容元素的 `dominant-baseline` 重定位 `dominant-baseline`。该切换对象必须是一个下标或上标。

作为一个外观属性，它还可以直接作为 CSS 样式表内部的属性使用。请看`CSS baseline-shift`以了解更多信息。

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | **auto** | baseline | super | sub | <percentage> | <length> | inherit |
| 可变性 | Yes |
| 规范文档 | SVG 1.1 (2nd Edition) |

baseline

没有基线切换，`dominant-baseline`依然在原来的位置。

sub

`dominant-baseline`切换到下标的默认位置。

super

`dominant-baseline`切换到上标的默认位置

<percentage>

该属性的结果值是这个百分数乘以 `<text>`元素的`line-height`。如果是正值，dominant-baseline 向 shift 同方向移动结果值；如果是负值，dominant-baseline 向 shift 反方向移动结果值，相对于父文本内容元素。值“0%”等于”baseline“。

<length>

如果是正值，dominant-baseline 向 shift 同方向移动<length>距离；如果是负值，dominant-baseline 向 shift 反方向移动<length>距离。值”0cm“等于”baseline“。

示例
--

元素
--

下列这些元素可以使用 `baseline-shift` 属性。

* `<tspan>`
* `<tref>`
* `<textPath>`
规范
--

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # baseline-shift-property |
| Scalable Vector Graphics (SVG) 2 # BaselineShiftProperty |

参见
--

* `CSS baseline-shift`
from
====

这个属性是在 svg 动画发生过程中被修改的属性的初始值。当同时使用了这个属性和 to (en-US) 属性，animation 将会修改这个这个设定的动画属性的值从 from 属性的值到 to 属性的值。

用法
--

| 类别 | 动画属性值 |
| --- | --- |
| 值 | <value> |
| 动画特征 | No |
| 标准化文档 | SVG 1.1 (2nd Edition) |

这个属性的准确的值类型取决于这个属性将要被用作动画的属性的值。

例子
--

这个例子给 from 属性了一个 100 的值，让动画从 100 的宽度开始运行。


```xml
<?xml version="1.0"?>
<svg width="200" height="200"
 viewPort="0 0 200 200" version="1.1"
 xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100">
    <animate attributeType="XML"
 attributeName="width"
 from="100" to="150"
 dur="3s"
 fill="freeze"/>
  </rect>

</svg>
```

元素
--

如下的元素能使用 from 属性

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

| Specification |
| --- |
| SVG Animations Level 2 # FromAttribute |
stroke-dashoffset
=================

`stroke-dashoffset` 属性指定了 dash 模式到路径开始的距离

如果使用了一个 <百分比> 值，那么这个值就代表了当前 viewport 的一个百分比。

值可以取为负值。

使用环境
----

| 类别 | 显示属性 |
| --- | --- |
| 值 | <percentage> | <length> | inherit |
| 初始值 | 1 |
| 可动画 | Yes |

示例
--

元素
--

以下元素可使用 stroke-dashoffset 属性

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeDashoffsetProperty |
font-family
===========

`font-family` 属性指出哪个字体集将被用来渲染文字，在带优先级的字体集名称列表被指定，还有或没有泛指的字符集名称。

作为一个表现层的属性，`font-family` 属性也可以被直接用在 CSS 样式表中，详见 `CSS font-family` 。

使用上下文
-----

| 分类 | Presentation attribute |
| --- | --- |
| 值 | [[<family-name> | <generic-family>],]\* [<family-name> | <generic-family>] | inherit |
| 可动画 Animatable | Yes |
| 规范文档 | SVG 1.1 (2nd Edition) |

例子
--

#### CSS
```

p.class1{font-family:"Times New Roman",Times,serif;}
p.class2{font-family:Arial,Helvetica;}
```


#### HTML


```html
<p class="class1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="class2">This is a paragraph, shown in the Arial font.</p>
```

元素
--

以下元素可以使用`font-family` 属性 (attribute)

* Text content elements »
规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # generic-font-families |
| CSS Fonts Module Level 4 # font-family-prop |

另见
--

* `CSS font-family`
r
=

**`r`** 属性用来定义圆的半径。

有两个元素在使用该属性：`<circle>` 和 `<radialGradient>`

示例
--
```

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



```html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient r="0" id="myGradient000">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="50%" id="myGradient050">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="100%" id="myGradient100">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="0" />
  <circle cx="150" cy="50" r="25" />
  <circle cx="250" cy="50" r="50" />

  <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" />
  <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
  <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
</svg>
```

圆
-

对于 `<circle>`，`r` 用来定义圆的半径以及它的大小。取值小于或等于零，圆将不会被绘制出来。

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

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

径向渐变
----

对于 `<radialGradient>`，`r` 用来定义径向渐变终止圆的半径。

渐变将以此绘制出来：**100%** 渐变停止点会被映射到终止圆的一周上。取值小于或等于零，将会使用最后一个渐变 `<stop>` 的颜色和不透明度，导致该区域被绘制为单色。

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

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # R |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementRAttribute |
width
=====

**`width`** 属性在用户坐标系统中定义了元素的一个水平长度。

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

* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDropShadow>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* `<filter>`
* `<foreignObject>`
* `<image>`
* `<mask>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<use>`
示例
--
```

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



```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <!-- With a width of 0 or less, nothing will be rendered -->
  <rect x="0" y="0" width="0" height="90" />
  <rect x="0" y="100" width="60" height="90" />
  <rect x="0" y="200" width="100%" height="90" />
</svg>
```

use
---

对于 `<use>` 元素，`width` 定义了引用元素的水平长度。

|  |  |
| --- | --- |
| 值 | `auto` |
 **<length>**
 |
 **<percentage>** |
| 默认值 | `auto`（视为 `0`） |
| 可变性 | 是 |

**备注：** `width` 对 `use` 元素没有影响，除非引用的元素具有 viewBox。例如，该属性仅在 `use` 引用的元素是 `svg` 或 `symbol` 元素时才有意义。

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

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-width |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-width |
| CSS Masking Module Level 1 # element-attrdef-mask-width |
| Scalable Vector Graphics (SVG) 2 # Sizing |
| Scalable Vector Graphics (SVG) 2 # PatternElementWidthAttribute |
stdDeviation
============

**`stdDeviation`** 属性定义了模糊操作的标准差。

你可以将该属性与以下 SVG 元素一起使用：

* `<feGaussianBlur>`
示例
--
```

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



```html
<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="gaussianBlur1">
    <feGaussianBlur stdDeviation="1" />
  </filter>
  <filter id="gaussianBlur2">
    <feGaussianBlur stdDeviation="5" />
  </filter>
  <filter id="gaussianBlur3" x="-30%" y="-30%" width="160%" height="160%">
    <feGaussianBlur stdDeviation="10" />
  </filter>

  <circle cx="100" cy="100" r="50" style="filter: url(#gaussianBlur1);" />
  <circle
 cx="100"
 cy="100"
 r="50"
 style="filter: url(#gaussianBlur2); transform: translateX(140px);" />
  <circle
 cx="100"
 cy="100"
 r="50"
 style="filter: url(#gaussianBlur3); transform: translateX(280px);" />
</svg>
```

用法
--

|  |  |
| --- | --- |
| 值 | `<number-optional-number>` |
| 默认值 | `0` |
| 可变性 | 是 |

`<number-optional-number>`

如果列出两个数值，第一个数字表示沿着 x 轴的标准差值。第二个值表示沿着 y 轴的标准差值。如果只提供了一个数字，那个值就表示在 x 轴和 y 轴上有着相同的标准差。

负值是不允许的。设为零即禁用了已有滤镜的原本效果（比如，结果是滤镜输入图像）。如果 `stdDeviation` 在 x 轴和 y 轴上只有一个为 0，那么模糊效果就只会应用于非 0 的那个方向。

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fegaussianblur-stddeviation |

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

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

`edgeMode` 属性确定了当核心位于输入图像的边缘或贴近输入图像的边缘时，如何取用颜色值用于扩展输入图像，从而可以应用矩阵操作。

如果没有指定 `edgeMode` 属性，等效于值被指定为 `duplicate`。

用法
--

| 类别 | 无 |
| --- | --- |
| 值 | **duplicate** | wrap | none |
| 可变性 | Yes |
| 规范文档 | SVG 1.1 (2nd Edition) |

duplicate

它指示输入图像沿着每条边扩展，复制输入图像的给定边缘上的颜色值。

wrap

它指示扩展输入图像，从图像相对的边缘取色。

none

它指示扩展输入图像，用 0 作为 RGBA 的像素值。

示例
--

元素
--

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

* `<feConvolveMatrix>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feconvolvematrix-edgemode |
dx
==

`dx` 属性表示一个元素或其内容在 `x` 轴方向上的偏移，偏移量取决于设置该属性的元素。

对于`<feOffset>`元素，它的值代表所有输入的图像的偏移量之和。这个总和被表达在由`<filter>`元素的`primitiveUnits`属性定义的坐标系中。

对于`<glyphRef>`元素，它的值代表该符号在字体坐标系中 x 轴上的相对坐标。

对于 `<text>`、`<tspan>` 和 `<tref>` 元素，由于这些元素允许设置 <list-of-length>，所以更复杂。

如果只提供了一个<length>，当前文本位置会沿着坐标系内 x 轴方向偏移<length> 。

如果提供了一个由逗号或者空格分隔的<length>列表，列表中的值将会表示前 n 个字符沿 x 轴方向偏移的增量。因此，当前文本位置也因为绘制当前`<text>`元素而沿 x 轴方向偏移。

如果在<length>列表中有更多的字符，那么对于每个字符，都有

* 如果祖先`<text>`或`<tspan>`元素对于给定的字符，通过 dx 的属性指定了相对 x 坐标，那么当前文本位置会沿坐标系的 x 轴方向偏移该数值（最近的祖先具有优先级）
* 否则没有额外的 x 轴方向的偏移发生
用法上下文
-----

| 分类 | 无 |
| --- | --- |
| 数值类型 | <number> | T<.2Fvar>s"><list-of-length> |
| 可变 | 是 |

元素
--

这些元素可以使用 dx 属性

* `<feOffset>`
* `<glyphRef>`
* `<text>`
* `<tref>`
* `<tspan>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fedropshadow-dx |
| Filter Effects Module Level 1 # element-attrdef-feoffset-dx |
| Scalable Vector Graphics (SVG) 2 # TextElementDXAttribute |
type
====

type 属性是一个类属性，他在不同的使用语境下有不同的意思。

* 对于`<animateTransform>`元素 , 它决定了那些随时间变化的值的转换的类型
* 对于 `<feColorMatrix>` 元素，它指明了矩阵运算的类型。关键词 `matrix` 表明一个全 5x4 矩阵的值会被提供。其他关键字快捷方式代表允许不执行复杂矩阵运算下使用常用颜色。
* 对于`<feFuncR>`, `<feFuncG>`, `<feFuncB>`, 和`<feFuncA>` 元素，它指明了组件传递函数的类型。
* 对于 `<feTurbulence>` 元素，它表示应以噪声函数还是湍流函数执行过滤。
* 对于 `<style>` 和 `<script>` 元素，它定义了元素内容的类型。
Usage context
-------------

### For the `<animateTransform>` elements

| Categories | *None* |
| --- | --- |
| Value | **`translate`** | `scale` | `rotate` | `skewX` | `skewY` |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) |

### For the `<feColorMatrix>` element

| Categories | *None* |
| --- | --- |
| Value | **`matrix`** | `saturate` | `hueRotate` | `luminanceToAlpha` |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

### For the `<feFuncR>`, `<feFuncG>`, `<feFuncB>`, and `<feFuncA>` elements

| Categories | *None* |
| --- | --- |
| Value | `identity` | `table` | `discrete` | `linear` | `gamma` |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

### For the `<feTurbulence>` element

| Categories | *None* |
| --- | --- |
| Value | `fractalNoise` | **`turbulence`** |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

### For the `<style>` and `<script>` elements

| Categories | *None* |
| --- | --- |
| Value | <content-type> |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) : script SVG 1.1 (2nd Edition) : style |

Example
-------

Elements
--------

The following elements can use the `values` attribute

* `<animateTransform>`
* `<feColorMatrix>`
* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
* `<feTurbulence>`
* `<script>`
* `<style>`
accent-height
=============

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

**`accent-height`** 属性定义从原点到重点字符顶部的距离，通过字体坐标系内的距离测量。

你可以将该属性与以下 SVG 元素一起使用：

* `<font-face>`
font-face
---------

对于 `<font-face>` 元素，`accent-height` 定义从原点到重音字符顶部的距离，通过字体坐标系内的距离测量。

|  |  |
| --- | --- |
| 值 | <number> |
| 默认值 | `ascent (en-US)` 的值 |
| 可变性 | 否 |

规范
--

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

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

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

参见
--

* `cap-height (en-US)`
* `x-height (en-US)`
display
=======

**`display`** 属性让你可以控制图形元素或容器元素的渲染。

`display="none"` 表示该元素和它的子元素不会被渲染。而非 `none` 或 `inherit` 的值表示元素会被浏览器渲染。

当应用到容器元素时，将 `display` 设为 `none` 会导致容器与它所有的子元素不可见，如此看来，它在一组元素中表现地像一个元素组。这表示具有 `display="none"` 属性元素的所有子元素都不会被渲染，即使子元素的 `display` 并不是 `none`。

`display` 属性被设为 `none` 的元素不会成为渲染树的一部分。它涉及到 `<tspan>` 和 `<tref>` 元素，用于盒边界与路径剪裁计算的事件处理。

* 如果在 `<tspan>` 或 `<tref>` 元素中 `display` 的属性值被设为 `none`，则为了文字布局，文字字符串会被忽视掉。
* 至于事件，如果 `display` 被设为 `none` 则该元素不接受任何事件。
* 图形元素的 `display` 属性被设为 `none` 则不会被盒边界和路径剪裁计算中包含进去。

`display`属性只影响能被直接渲染的元素，尽管它不能防止该元素被其他元素参考。例如：将 `<path>` 元素设为 `none`，会使得该元素不会被直接渲染到 canvas 上，但是 `<textPath>` 元素依旧会参考 `<path>`。此外，即便 `<path>` 的 `display` 为 `none`，它的形状在处理路径上的文本时仍然会被用到。

这个属性也能影响直接渲染到屏幕外的画布，比如遮罩或路径剪裁。因此，把 `<mask>` 元素的一个子元素设为 `display="none"` 将会阻止 `<clipPath>` 的子元素参与到路径剪裁中。

**备注：** As a presentation attribute, `display` can be used as a CSS property. See `CSS display` for further information.

As a presentation attribute, it can be applied to any element.

示例
--
```

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



```html
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Here the yellow rectangle is displayed -->
  <rect x="0" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect x="20" y="20" width="60" height="60" fill="yellow"></rect>

  <!-- Here the yellow rectangle is not displayed -->
  <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect>
  <rect
 x="140"
 y="20"
 width="60"
 height="60"
 fill="yellow"
 display="none"></rect>
</svg>
```

使用说明
----

| Default value | `inline` |
| --- | --- |
| Value | Error: could not find syntax for this item |
| Animatable | Yes |

For a description of the values, please refer to the `CSS display` property.

规范
--

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

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

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

参见
--

* `visibility` attribute
* `CSS display`