recursal/MDN huggingface dataset:
pointer-events
==============

pointer-events 属性是一个展示属性，用于定义元素是否或何时可能是鼠标事件的目标元素。

**Note:** 作为一个展示属性， `pointer-events` 可以被当做 CSS 属性使用。

示例
--
```

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



```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!--
 Circle 元素将始终拦截鼠标事件。
 为了改变较底部的的 rect 元素的颜色，
 你需要点击 rect 元素在圆外的部分
 -->
  <rect x="0" y="0" height="10" width="10" fill="black" />
  <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblePoint" />

  <!--
 下面的 circle 元素将永远不会获取到鼠标事件，
 当你点击 circle 元素或者点击 rect 元素时，
 rect 元素都会改变颜色
 -->
  <rect x="10" y="0" height="10" width="10" fill="black" />
  <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" />
</svg>
```



```js
window.addEventListener("mouseup", (e) => {
  // 在 #000000 和 #FFFFFF 之间随机选取一个颜色
  const color = Math.round(Math.random() \* 0xffffff);

  // 将 color 变量的值按照 CSS 的要求进行格式化
  const fill = "#" + color.toString(16).padStart(6, "0");

  // 将 color 变量设置的颜色应用到实际点击的元素上
  e.target.style.fill = fill;
});
```


作为一个展示属性，他可以被很多元素使用，但和它紧密相关的只有下面的 23 个元素：`<a>`, `<circle>`, `<clipPath>`, `<defs>`, `<ellipse>`, `<foreignObject>`, `<g>`, `<image>`, `<line>`, `<marker>`, `<mask>`, `<path>`, `<pattern>`, `<polygon>`, `<polyline>`, `<rect>`, `<svg>`, `<switch>`, `<symbol>`, `<text>`, `<textPath>`, `<tspan>`, `<use>`

用法
--

| 值 | `bounding-box` | `visiblePainted` | `visibleFill` | `visibleStroke` | `visible` | `painted` | `fill` | `stroke` | `all` | `none` |
| --- | --- |
| 默认值 | `visiblePainted` |
| 是否可动画 | Yes |

*为了详细了解每个可能的值，请参考 CSS 文档 `pointer-events`.*

规范
--

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

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

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

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

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

示例
--
```

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



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

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

圆
-

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

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

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

椭圆
--

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

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

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

径向渐变
----

对于 `<radialGradient>`，`cy` 用来定义径向渐变终止圆的 y 轴坐标。

|  |  |
| --- | --- |
| 值 | `<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 cy="0" id="myGradient000">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

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

    <radialGradient cy="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 # CY |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCYAttribute |

参见
--

* `cx`
* `r`
y
=

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

你可以在以下 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 100 300" xmlns="http://www.w3.org/2000/svg">
  <rect y="20" x="20" width="60" height="60" />
  <rect y="120" x="20" width="60" height="60" />
  <rect y="220" x="20" width="60" height="60" />
</svg>
```

use
---

For `<use>`, `y` defines the y coordinate of the upper left corner of the referenced element.

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

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

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-y |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-y |
| Filter Effects Module Level 1 # element-attrdef-fepointlight-y |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-y |
| CSS Masking Module Level 1 # element-attrdef-mask-y |
| Scalable Vector Graphics (SVG) 2 # Y |
| Scalable Vector Graphics (SVG) 2 # PatternElementYAttribute |
| Scalable Vector Graphics (SVG) 2 # TextElementYAttribute |
vector-effect
=============

**`vector-effect`** 属性指明绘制对象时要使用的矢量效果。在任何其他合成操作（如滤镜，蒙版和剪辑等）之前，都要应用矢量效果。

**备注：** 作为显示性属性， `vector-effect` 也可以直接在 CSS 样式表中作为属性使用。

作为显示性属性，它能被应用到任何元素，但只对这 10 个元素有效果：`<circle>`, `<ellipse>`, `<foreignObject>`, `<image>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>`, `<textPath>` `<tspan>`, and `<use>`

用法说明
----

| 值 | `none` | `non-scaling-stroke` | `non-scaling-size` | `non-rotation` | `fixed-position` |
| --- | --- |
| 默认值 | `none` |
| 可动画性 | 是 |

`none`

该值指定不应用矢量效果，即，使用默认的渲染行为，即首先用指定的绘画填充形状的几何形状，然后使用指定的绘画描边轮廓。

`non-scaling-stroke`

该值修改了笔触的方式。通常，笔触涉及在当前用户坐标系中计算形状路径的笔触轮廓，并用笔触颜料（颜色或渐变）填充轮廓。该值的最终视觉效果是笔触宽度不依赖于元素的变换（包括非均匀缩放和剪切变换）和缩放级别。

`non-scaling-size`

该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，该用户坐标系的比例也不会更改。但是，它没有指定抑制旋转和偏斜。同样，它也不指定用户坐标系的原点。由于此值抑制了用户坐标系的缩放，因此它还具有`non-scaling-stroke`的特性。

`non-rotation`

该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间发生任何变换更改，该用户坐标系的旋转和倾斜仍被抑制。但是，它没有指定抑制缩放。同样，它也没有指定用户坐标系的原点。

`fixed-position`

该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，用户坐标系的位置都是固定的。但是，它没有指定抑制旋转，偏斜和缩放。当同时指定了该矢量效果和 `transform` 属性， `transform` 属性将因该矢量效果而被消耗。

示例
--

### Example: vector-effect="non-scaling-stroke"


```html
<svg viewBox="0 0 500 240">
  <!-- normal -->
  <path
 d="M10,20L40,100L39,200z"
 stroke="black"
 stroke-width="2px"
 fill="none"></path>

  <!-- scaled -->
  <path
 transform="translate(100,0)scale(4,1)"
 d="M10,20L40,100L39,200z"
 stroke="black"
 stroke-width="2px"
 fill="none"></path>

  <!-- fixed-->
  <path
 vector-effect="non-scaling-stroke"
 transform="translate(300,0)scale(4,1)"
 d="M10,20L40,100L39,200z"
 stroke="black"
 stroke-width="2px"
 fill="none"></path>
</svg>
```


#### 结果

规范
--

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

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

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

`seed`属性代表了 `<feTurbulence>` 元素生成的伪随机数的开始数字。

如果没有指定这个属性，它等效于指定了一个 `0` 值。

用法
--

| 类别 | *None* |
| --- | --- |
| 值 | <number> (en-US) |
| 可变性 | Yes |

示例
--

元素
--

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

* `<feTurbulence>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feturbulence-seed |
clip
====

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

**`clip`** 属性是定义元素可见区域的属性。

`clip` 属性的参数值与 `CSS clip property` 的参数值定义相同。指示当前用户坐标的无单位的值，可以用在 `<shape>` 的坐标值上。`auto` 值定义了一个剪切路径，其边界沿着由给定元素创建的视口的边界。

As a presentation attribute, it can be applied to any element but it has effect only on the following six elements: `<svg>`, `<symbol>`, `<image>`, `<foreignObject>`, `<pattern>`, `<marker>`

示例
--
```

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



```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Auto clipping -->
  <svg x="0" width="10" height="10" clip="auto">
    <circle cx="5" cy="5" r="4" stroke="green" />
  </svg>

  <!-- Rect(top, right, bottom, left) clipping -->
  <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)">
    <circle cx="5" cy="5" r="4" stroke="green" />
  </svg>
</svg>
```

用法
--

**Warning:** This property is deprecated. Use `clip-path` instead.

| 可用值 | **auto** | <shape> | inherit |
| --- | --- |
| 默认值 | Yes |
| Animatable | Yes |

The value `auto` defines a clipping path along the bounds of the viewport created by the given element.

The value `rect()` defines a clipping rectangle following the following syntax: `rect(<top>, <right>, <bottom>, <left>)`. The `<top>` and `<bottom>` values specify offsets from the *top border edge* of the element viewport, while `<right>` and `<left>` specify offsets from the *left border edge* of the element viewport.

规范
--

| Specification |
| --- |
| CSS Masking Module Level 1 # clip-property |

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

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

`image-rendering` 属性向浏览器提供了一个提示，即在图片处理时，如何进行速度 vs 质量之间的权衡。

作为一个显示属性，它也可以在 CSS 样式文件中作为属性而存在，请参考 `CSS image-rendering` 获取更多的信息

使用语境
----

| 类别 | Presentation attribute |
| --- | --- |
| 值 | **auto** | optimizeSpeed | optimizeQuality | inherit |
| 动画效果 | Yes |

auto

表示用户代理可以在速度和质量间做适当的权衡，但是质量将比速度更重要一些。

optimizeSpeed

表示用户代理应该更注重速度。

optimizeQuality

表示用户代理应该更注重质量

示例
--

元素
--

下面的元素可以能够使用 `image-rendering` 属性

* `<image>`
规范
--

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-rendering |
| Scalable Vector Graphics (SVG) 2 # ImageRendering |

参考
--

* `CSS image-rendering`
in
==

in 属性标识输入的原语。

其值可以是下面六种关键词中的一种，或者是一个字符串匹配在同一个`<filter>`元素中前面的原语的`result` 属性值。如果没有提供值并且这是 filter 中第一个原语，那么原语将相当于使用 SourceGraphic 作为输入值。如果没有提供值并且这不是第一个原语，那么原语将使用前面原语的 result 属性值作为输入。

如果`result`的值在同一个`<filter>`中出现多次，那么将使用前面的距离使用该`result`值的原语最近的该 result 值的原语作为输入。

除了 SourceGraphic 和\*\*<filter-primitive-reference> (引用原语)\*\* , 关键词都没有在现代浏览器中实现.(译者注:SourceAlpha 也被现代浏览器支持)

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

| Categories | None |
| --- | --- |
| Value | `SourceGraphic` | `SourceAlpha` | `BackgroundImage` | `BackgroundAlpha` | `FillPaint` | `StrokePaint` | <filter-primitive-reference> |
| Animatable | Yes |

SourceGraphic

该关键词表示图形元素自身将作为`<filter>`原语的原始输入。

SourceAlpha

该关键词表示图形元素自身将作为`<filter>`原语的原始输入。SourceAlpha 与 SourceGraphic 具有相同的规则除了 SourceAlpha 只使用元素的透明度。

BackgroundImage

该关键词表示 filter 元素当前底下的区域的图形快照将被调用。

BackgroundAlpha

跟 BackgroundImage 相同除了只使用透明度。

FillPaint

This keyword represents the value of the `fill` property on the target element for the filter effect. In many cases, the `FillPaint` is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.

StrokePaint

This keyword represents the value of the `stroke` property on the target element for the filter effect. In many cases, the `StrokePaint` is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.

BackgroundImage 的解决方案
---------------------

我们需要使用 `<feimage>` 原语引入一个图像混合到过滤器本身内来替代使用"BackgroundImage".

### HTML


```html
<div style="width: 420px; height: 220px;">
  <svg
 style="width:200px; height:200px; display: inline;"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <filter id="backgroundMultiply">
        <!-- This will not work. -->
        <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply" />
      </filter>
    </defs>
    <image
 xlink:href="https://developer.mozilla.org/files/6457/mdn\_logo\_only\_color.png"
 x="10%"
 y="10%"
 width="80%"
 height="80%" />
    <circle
 cx="50%"
 cy="40%"
 r="40%"
 fill="#c00"
 style="filter:url(#backgroundMultiply);" />
  </svg>

  <svg
 style="width:200px; height:200px; display: inline;"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <filter id="imageMultiply">
        <!-- This is a workaround. -->
        <feImage
 xlink:href="https://developer.mozilla.org/files/6457/mdn\_logo\_only\_color.png"
 x="10%"
 y="10%"
 width="80%"
 height="80%" />
        <feBlend in2="SourceGraphic" mode="multiply" />
      </filter>
    </defs>
    <circle
 cx="50%"
 cy="40%"
 r="40%"
 fill="#c00"
 style="filter:url(#imageMultiply);" />
  </svg>
</div>
```

### 效果

元素
--

下列元素可以使用该属性

* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feGaussianBlur>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-in |
fr
==

对于 `<radialGradient>` 元素，此属性用来定义径向渐变的焦点的半径。若该属性没有被定义，默认值为 0%。

用法
--

| 类别 | 无 |
| --- | --- |
| 值 | <length> |
| 可变性 | 非 |
| 规范文档 | SVG 1.1 (2nd Edition): The radialGradient element |

示例
--


```html
<?xml version="1.0" standalone="no"?>

<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient
 id="Gradient"
 cx="0.5"
 cy="0.5"
 r="0.5"
 fx="0.35"
 fy="0.35"
 fr="5%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>

  <rect
 x="10"
 y="10"
 rx="15"
 ry="15"
 width="100"
 height="100"
 fill="url(#Gradient)"
 stroke="black"
 stroke-width="2" />

  <circle
 cx="60"
 cy="60"
 r="50"
 fill="transparent"
 stroke="white"
 stroke-width="2" />
  <circle cx="35" cy="35" r="2" fill="white" stroke="white" />
  <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">
    (fx,fy)
  </text>
  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">
    (cx,cy)
  </text>
</svg>
```

元素
--

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

* `<radialGradient>`
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementFRAttribute |
primitiveUnits
==============

`primitiveUnits` 属性为过滤器原语和定义过滤器原语子域中的各种各样的长度单位指定坐标系统。

如果 primitiveUnits 属性未指定，那么效果就如同指定值为 userSpaceOnUse 的效果是一样的。

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

| Categories | *None* |
| --- | --- |
| Value | **`userSpaceOnUse`** | `objectBoundingBox` |
| Animatable | Yes |

userSpaceOnUse

当`<filter>`元素使用该值的时候，过滤器中定义的任意长度的值都基于当前用户坐标系统 (例如通过`filter`属性引用该`<filter>`元素的元素所在的用户坐标系统).

objectBoundingBox

在 filter 中定义的任意长度值表示引用该 filter 的元素的包围盒的分数或百分比。

Examples
--------

Elements
--------

下列元素可以使用 primitiveUnits 属性：

* `<filter>`
规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-primitiveunits |
mode
====

**`mode`** 属性定义了 `<feBlend>` 滤镜原语上的混合模式。

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

* `<feBlend>`
示例
--
```

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



```html
<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="blending1" x="0" y="0" width="100%" height="100%">
    <feFlood
 result="floodFill"
 x="0"
 y="0"
 width="100%"
 height="100%"
 flood-color="seagreen"
 flood-opacity="1" />
    <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />
  </filter>
  <filter id="blending2" x="0" y="0" width="100%" height="100%">
    <feFlood
 result="floodFill"
 x="0"
 y="0"
 width="100%"
 height="100%"
 flood-color="seagreen"
 flood-opacity="1" />
    <feBlend in="SourceGraphic" in2="floodFill" mode="color-dodge" />
  </filter>

  <image
 xlink:href="mdn\_logo\_only\_color.png"
 width="200"
 height="200"
 style="filter:url(#blending1);" />
  <image
 xlink:href="mdn\_logo\_only\_color.png"
 width="200"
 height="200"
 style="filter:url(#blending2); transform:translateX(220px);" />
</svg>
```

用法
--

|  |  |
| --- | --- |
| 值 | `<blend-mode>` |
| 默认值 | `normal` |
| 可变性 | 是 |

有关值的说明，请参阅 `<blend-mode>`。

规范
--

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feblend-mode |

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

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

该 **`origin`** 属性指定动画的运动原点。在 SVG 中无效。

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

总体注释
----

| 值 | `default` |
| --- | --- |
| 默认值 | `default` |
| 可动画的 | 没有 |

规范
--

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

参见
--

* `origin`SMIL 动画规范中的定义
SVG 样式属性
========

SVG 样式属性是所有可以在任何 SVG 元素上指定以应用 CSS 样式效果的属性。

* `class`
* `style`
属性
--

`class (en-US)`

给一个元素分配一个类名称或者设置类名。它跟 HTML 中的 `class` 属性具有同样的功能。*值*: 任何可用的 ID 字符；*动画性*：**是**

`style`

它指定元素的样式信息。它跟 HTML 中 `style`属性具有相同的功能。*值*：任何可用的 ID 字符；*动画性*：**否**

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

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

指定 SVG 元素 `<path>` 的渲染模式。

使用参考
----

| 类型 | 外观属性 |
| --- | --- |
| 值 | **auto** | optimizeSpeed | crispEdges | geometricPrecision | inherit |
| 可运动 | Yes |

auto

让浏览器自动权衡渲染速度、平滑度、精确度。默认是倾向于精确度而非平滑度和速度。

optimizeSpeed

偏向渲染速度，浏览器会关闭反锯齿模式。（速度）

crispEdges

偏向更加清晰锐利的边缘的渲染。浏览器在渲染的时候会关闭反锯齿模式，且会让线条的位置和宽度和显示器边缘对齐。（锐度）

geometricPrecision

偏向渲染平滑的曲线。（平滑）

示例
--


```xml
<svg xmlns="http://www.w3.org/2000/svg"
 version="1.1" width="100" height="100"
 shape-rendering="optimizeSpeed"><!-- 这个示例在 Firefox 下看区别更明显 -->
```


| shape-rendering: geometricPrecision:
 shape-rendering:geometricPrecision | shape-rendering: optimizeSpeed
 shape-rendering:optimizeSpeed |
| --- | --- |

同样，你也可以在 CSS 样式中使用 shape-rendering:


```xml
<svg xmlns="http://www.w3.org/2000/svg"
 version="1.1" width="100" height="100"
 style="shape-rendering:optimizeSpeed;">
```

关联元素
----

下面的元素可以使用这个属性

* Shape elements »
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # ShapeRendering |
stroke-opacity
==============

`stroke-opacity` 属性指定了当前对象的轮廓的不透明度。它的默认值是 **1**。

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

用法
--

| 类别 | 外观属性 |
| --- | --- |
| 值 | <opacity-value> | inherit |
| 可变性 | Yes |

<opacity-value>

在当前对象的轮廓上用该涂色操作的不透明度。任何超出 0.0 到 1.0 范围的值都会被压回这个范围（0.0 表示完全透明，1.0 表示完全不透明）。

示例
--

### SVG


```html
<svg width="120px" height="120px" viewBox="0 0 120 120">
  <rect x="10" y="10" width="100" height="100" />
</svg>
```

### CSS


```css
rect {
  fill: #b4da55;
  stroke: #000;
  stroke-width: 10px;
  stroke-opacity: 0.3;
}
```

### 结果

元素
--

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

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

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

参见
--

* `fill-opacity`
* `opacity`
fill
====

`fill` 属性根据它的使用环境，拥有两个意义。

默认地，当动画元素结束时，目标元素的外观属性不再应用该效果。在动画元素结束后，要还保持这个动画的的值，就需要用到`fill`属性。

对于形状元素和文本，`fill`属性是外观属性，用来定义给定图形元素内部的颜色。哪一块算是“内部”取决于形状本身以及`fill-rule` 属性的值。作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。

用法
--

### 对动画元素

| 类别 | 动画定时属性 |
| --- | --- |
| 值 | **remove** | freeze |
| 可变性 | No |
| 规范文档 | SVG 1.1 (2nd Edition) |

remove（默认值）

在动画的激活持续时间结束后，动画效果会移除（不再应用）。在动画的激活结束后，动画不再对目标元素有影响（除非动画重新开始）。

freeze

在动画激活持续时间结束后，文档持续时间的剩余时间里（或者直到动画重新开始）动画效果会“冻结”着。

### 对形状元素

| 类别 | 外观属性 |
| --- | --- |
| 值 | <paint> |
| 可变性 | Yes |
| 规范文档 | SVG 1.1 (2nd Edition) |

示例
--

元素
--

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

* 动画元素 »
* 形状元素 »
* 文本内容元素 »
id
==

**`id`** 属性给予元素一个唯一名称。

所有元素均可使用该属性。

示例
--


```html
<svg
 width="120"
 height="120"
 viewPort="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
 <![CDATA[
 #smallRect {
 stroke: #000066;
 fill: #00cc00;
 }
 ]]>
 </style>

  <rect id="smallRect" x="10" y="10" width="100" height="100" />
</svg>
```

用法说明
----

| 值 | <id> |
| --- | --- |
| 默认值 | *None* |
| 可动画 | No |

<id>

指定元素的 ID。该 ID 在节点树中必须是唯一的，不能为空字符串，并且不能包含任何空格字符。

**备注：** 应当避免使用会被解析为 SVG 视图规范的 `id` 值（如 `MyDrawing.svg#svgView(viewBox(0,200,1000,1000))`），或被解析为用作 URL 目标片段的基本媒体片段的 `id` 值。

该属性取值必须在 XML 文档中有效。独立的 SVG 文档使用 XML 1.0 语法，该语法指定有效的 ID 仅包含指定的字符（字母，数字和一些标点符号），开头不能是数字，点（.）字符或 连字符减号（-）。

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # Core.attrib |

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

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

参考
--

* HTML `id`
* `class (en-US)`
accumulate
==========

该属性控制了动画是否是累加的。

在原来的结果的基础上重复动画的时候，它通常很有用，每一次循环都累加。这个属性告诉动画是否是每次循环，前一个动画属性值要加上去。

用法
--

| 类别 | 动画累加属性 |
| --- | --- |
| 值 | **none** | sum |
| 可变性 | No |
| 规范文档 | SVG 1.1 (2nd Edition) |

sum

指定第一次循环后的每次循环建立在上次循环的终值上。

none

指定重复循环是不累加的。这是默认值。

示例
--

元素
--

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

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

| Specification |
| --- |
| SVG Animations Level 2 # AccumulateAttribute |
fx
==

对于 `<radialGradient>` 元素，此属性用来定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。

用法
--

| 类别 | 无 |
| --- | --- |
| 值 | <coordinate> |
| 可变性 | 非 |
| 规范文档 | SVG 1.1 (2nd Edition): The radialGradient element |

示例
--


```html
<?xml version="1.0" standalone="no"?>

<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>

  <rect
 x="10"
 y="10"
 rx="15"
 ry="15"
 width="100"
 height="100"
 fill="url(#Gradient)"
 stroke="black"
 stroke-width="2" />

  <circle
 cx="60"
 cy="60"
 r="50"
 fill="transparent"
 stroke="white"
 stroke-width="2" />
  <circle cx="35" cy="35" r="2" fill="white" stroke="white" />
  <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">
    (fx,fy)
  </text>
  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">
    (cx,cy)
  </text>
</svg>
```

元素
--

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

* `<radialGradient>`
规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementFXAttribute |
marker-start
============

**`marker-start`** 属性将在给定形状的起始顶点绘制的箭头或者多边形标记

对于除 SVG 的 polyline 和 path 元素之外的所有形状元素，最后的一个顶点与第一个顶点相同。在这种情况下，如果 SVG 的`marker-start`属性和 `marker-end` 的值都不是 `none` ，然后再最后一个顶点渲染两个图标。对于一个 `<path>` 元素，对于每个封闭的子路径，他的最后一个顶点都与第一个顶点相同。 `marker-end` 仅在路径数据的起始顶点上呈现。

\*\*Note:\*\*作为一个图像属性， `marker-start` 可以用作 CSS 属性。

作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效：`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, 和`<rect>`

示例
--
```

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



```html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="triangle"
 viewBox="0 0 10 10"
 refX="1"
 refY="5"
 markerUnits="strokeWidth"
 markerWidth="10"
 markerHeight="10"
 orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00" />
    </marker>
  </defs>
  <polyline
 fill="none"
 stroke="black"
 points="20,100 40,60 70,80 100,20"
 marker-start="url(#triangle)" />
</svg>
```

使用说明
----

| 值 | `none` | `<marker-ref>` |
| --- | --- |
| 默认值 | `none` |
| 可用作与动画 | 是 |

`none`

表示将不会在起点绘制任何符号。

`<marker-ref>`

这个值表示的是对 `<marker>` 元素的引用，将在起点绘制该元素.。如果引用无效，将不会绘制任何东西。

规范
--

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

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

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

另见
--

* `<marker>`
* `marker-end`
* `marker-mid (en-US)`