+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +
++ Lorem ipsum dolor sit amet, consectetur adipisicing + elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + Ut enim ad minim veniam. +
+``` + +上面的示例将渲染出一个有遮罩的例子 + +{{EmbedLiveSample('示例：Masking', 650, 200)}} + +### 示例：Clipping + +此示例演示如何使用 SVG 剪辑 HTML 内容。请注意，即使链接的可点击区域也被剪切。 + +```html ++ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +
++ Lorem ipsum dolor sit amet, consectetur adipisicing + elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + Ut enim ad minim veniam. +
+ + + + +``` + +```css +.target { + clip-path: url(#clipping-path-1); +} +p { + width: 300px; + border: 1px solid #000; + display: inline-block; +} +``` + +这个例子将建立一个由圆形和矩形组成的剪切区域，为其指定 ID `#clipping-path-1`，然后在 CSS 中引用它。剪切路径可以分配给具有 `target` class 的任何元素。 + +你可以实时地对 SVG 进行更改，并看到它们立即影响 HTML 的渲染。例如，可以在上面建立的剪切路径中调整圆形的大小： + +```js +function toggleRadius() { + var circle = document.getElementById("circle"); + circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; +} +``` + +{{EmbedLiveSample('示例：Clipping', 650, 200)}} + +### 示例：Filtering + +这个例子演示了如何使用 SVG 对 HTML 内容进行过滤。它建立了几个过滤器，这些过滤器与 CSS 一起作用于正常和鼠标悬停状态 [hover](/zh-CN/docs/Web/CSS/:hover) 下的三个元素。 + +```html ++ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +
+lorem+
+ Lorem ipsum dolor sit amet, consectetur adipisicing + elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + Ut enim ad minim veniam. +
+``` + +任何 SVG 过滤器都可以这样使用。例如，要应用模糊效果，你可以这样使用： + +```html + +``` + +也可以应用于颜色矩阵： + +```html + +``` + +或更多的过滤器： + +```html + +``` + +使用以下 CSS 应用五个过滤器： + +```css +p.target { filter:url(#f3); } +p.target:hover { filter:url(#f5); } +b.target { filter:url(#f1); } +b.target:hover { filter:url(#f4); } +pre.target { filter:url(#f2); } +pre.target:hover { filter:url(#f3); } +``` + +{{EmbedLiveSample('示例：Filtering', 650, 200)}} + +[View this example live](/files/3329/filterdemo.xhtml) + +### 示例：Blurred Text + +为了模糊文本，基于 Webkit 的浏览器有一个名为 blur 的（前缀）CSS 过滤器，（另见 [CSS filter](/zh-CN/docs/Web/CSS/filter#blur%28%29_2)）。你可以使用 SVG 过滤器获得相同的效果。 + +```html +Time to clean my glasses
+ +``` + +你可以在同一个 class 中使用 SVG 和 CSS 过滤器： + +```css +.blur { filter: url(#wherearemyglasses); } +``` + +{{ EmbedLiveSample('示例：Blurred Text', 300, 100) }} + +模糊的计算量很大，所以请谨慎使用它，尤其是在包含滚动或动画的元素中。 + +### 示例：Text Effects + +SVG 还可以用于添加比纯 HTML 文本更动态、更灵活的文本添加方法。 + +通过使用 SVG 元素与 HTML 结合创建文本，你可以产生不同的文本的效果。如旋转文本： + +```svg + +``` + +## 使用外部引用 + +用来 clipping，masking，filtering 的 SVG 可以从其他外部源载入，只要外部源是与要使用 SVG 的该 HTML 文档同源的。 + +例如，CSS 规则在一个名为 default.css 的文件中，如下这样： + +```css +.target { clip-path: url(resources.svg#c1); } +``` + +这个 SVG 就可以从一个名为 resources.svg 的文件中导入，clip 路径为 ID c1。 + +## 参见 + +- [SVG](/zh-CN/docs/SVG) +- [SVG Effects for HTML Content](http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html) (blog post) +- ~~[SVG External Document References](/web-tech/2008/10/10/svg-external-document-references)~~ (blog post) ([\[archive.org\] Web Tech Blog » Blog Archive » SVG External Document References](http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/)) diff --git a/files/zh-cn/web/svg/attribute/accent-height/index.html b/files/zh-cn/web/svg/attribute/accent-height/index.html deleted file mode 100644 index 520e89981dd1ae..00000000000000 --- a/files/zh-cn/web/svg/attribute/accent-height/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: accent-height -slug: Web/SVG/Attribute/accent-height -translation_of: Web/SVG/Attribute/accent-height ---- -« 回到 SVG 属性指南首页
- -此属性定义从原点到重点字符顶部的距离，通过字体坐标系内的距离测量。
- -若未定义该属性，那么该属性就会被设置为{{ SVGAttr("ascent") }}。
- -Usage context
- -| Categories | -None | -
|---|---|
| Value | -<number> | -
| Animatable | -No | -
| Normative document | -SVG 1.1 (2nd Edition) | -
{{ page("/en-US/docs/SVG/Content_type","Number") }}
- -Elements
- -The following elements can use the accent-height attribute
-
-
- {{ SVGElement("font-face") }} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/accent-height/index.md b/files/zh-cn/web/svg/attribute/accent-height/index.md new file mode 100644 index 00000000000000..343b5e9735efc2 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/accent-height/index.md @@ -0,0 +1,30 @@ +--- +title: accent-height +slug: Web/SVG/Attribute/accent-height +translation_of: Web/SVG/Attribute/accent-height +--- +« 回到 SVG 属性指南首页 + +此属性定义从原点到重点字符顶部的距离，通过字体坐标系内的距离测量。 + +若未定义该属性，那么该属性就会被设置为{{ SVGAttr("ascent") }}。 + +## Usage context + +| Categories | None | +| ------------------ | ------------------------------------------------------------------------------------------------- | +| Value | [该属性控制了动画是否是累加的。
- -在原来的结果的基础上重复动画的时候，它通常很有用，每一次循环都累加。这个属性告诉动画是否是每次循环，前一个动画属性值要加上去。
- -用法
- -| 类别 | -动画累加属性 | -
|---|---|
| 值 | -none | sum | -
| 可变性 | -No | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
-
-
- sum -
- 指定第一次循环后的每次循环建立在上次循环的终值上。 -
- none -
- 指定重复循环是不累加的。这是默认值。 -
示例
- -元素
- -以下元素可以使用additive属性：
-
-
- {{ SVGElement("animate") }} -
- {{ SVGElement("animateColor") }} -
- {{ SVGElement("animateMotion") }} -
- {{ SVGElement("animateTransform") }} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/accumulate/index.md b/files/zh-cn/web/svg/attribute/accumulate/index.md new file mode 100644 index 00000000000000..8d6c16000e174a --- /dev/null +++ b/files/zh-cn/web/svg/attribute/accumulate/index.md @@ -0,0 +1,43 @@ +--- +title: accumulate +slug: Web/SVG/Attribute/accumulate +tags: + - SVG + - SVG 属性 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/accumulate +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +该属性控制了动画是否是累加的。 + +在原来的结果的基础上重复动画的时候，它通常很有用，每一次循环都累加。这个属性告诉动画是否是每次循环，前一个动画属性值要加上去。 + +## 用法 + +| 类别 | 动画累加属性 | +| -------- | --------------------------------------------------------------------------------- | +| 值 | **none** \| sum | +| 可变性 | No | +| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#AdditionAttributes) | + +- sum + - : 指定第一次循环后的每次循环建立在上次循环的终值上。 +- none + - : 指定重复循环是不累加的。这是默认值。 + +## 示例 + +## 元素 + +以下元素可以使用`additive`属性： + +- {{ SVGElement("animate") }} +- {{ SVGElement("animateColor") }} +- {{ SVGElement("animateMotion") }} +- {{ SVGElement("animateTransform") }} + +## 规范 + +{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/alignment-baseline/index.html b/files/zh-cn/web/svg/attribute/alignment-baseline/index.html deleted file mode 100644 index dfdee45fd52c50..00000000000000 --- a/files/zh-cn/web/svg/attribute/alignment-baseline/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: alignment-baseline -slug: Web/SVG/Attribute/alignment-baseline -tags: - - SVG - - SVG 属性 - - 需要兼容性表 -translation_of: Web/SVG/Attribute/alignment-baseline ---- - - -alignment-baseline属性指定了一个对象如何相对于它的父元素对齐。这个属性指定了该元素的基线对齐到相应的父元素的基线。举个例子，允许罗马文字中的字母表基线在字体大小发生变化时保持一致。它的默认值是 baseline，与该alignment-baseline属性的计算值同名。
作为一个外观属性，它还可以直接作为 CSS 样式表内部的属性使用。请阅读{{ cssxref("alignment-baseline","CSS alignment-baseline") }}以了解更多信息。
- -用法
- -| 类别 | -外观属性 | -
|---|---|
| 值 | -auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit | -
| 可变性 | -Yes | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
示例
- -<?xml version="1.0"?>
-<svg width="300" height="120" viewBox="0 0 300 120"
- xmlns="http://www.w3.org/2000/svg" version="1.1">
-
- <!-- Materialisation of anchors -->
- <path d="M60,10 L60,110
- M30,10 L300,10
- M30,65 L300,65
- M30,110 L300,110
- " stroke="grey" />
-
- <!-- Anchors in action -->
- <text alignment-baseline="hanging"
- x="60" y="10">A hanging</text>
-
- <text alignment-baseline="middle"
- x="60" y="65">A middle</text>
-
- <text alignment-baseline="baseline"
- x="60" y="110">A baseline</text>
-
- <!-- Materialisation of anchors -->
- <circle cx="60" cy="10" r="3" fill="red" />
- <circle cx="60" cy="65" r="3" fill="red" />
- <circle cx="60" cy="110" r="3" fill="red" />
-
-<style><![CDATA[
-text{
- font: bold 36px Verdana, Helvetica, Arial, sans-serif;
-}
-]]></style>
-</svg>
-元素
- -下列元素使用alignment-baseline 属性：
-
-
- {{ SVGElement("tspan") }} -
- {{ SVGElement("tref") }} -
- {{ SVGElement("altGlyph") }} -
- {{ SVGElement("textPath") }} -
如果对象要在别的元素中对齐（比如在{{ SVGElement("text") }}元素中），请阅读{{ SVGAttr("dominant-baseline") }}。
- -规范
- -{{Specifications}} - -参见
- --
-
- {{ cssxref("alignment-baseline","CSS alignment-baseline") }} -
该属性标识了在一个动画动作环节中，父元素的需要被改变的属性名。
- -用法
- -| 类别 | -动画属性目标属性 | -
|---|---|
| 值 | -<attributeName> | -
| 可变性 | -No | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
示例
- -下面的示例使用了 y 作为attributeName，通过改变一个矩形在 Y 轴上的位置来变动这个矩形。
<?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属性：
-
-
- {{ SVGElement("animate") }} -
- {{ SVGElement("animateColor") }} -
- {{ SVGElement("animateTransform") }} -
- {{ SVGElement("set") }} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/attributename/index.md b/files/zh-cn/web/svg/attribute/attributename/index.md new file mode 100644 index 00000000000000..df8273dca3be71 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/attributename/index.md @@ -0,0 +1,51 @@ +--- +title: attributeName +slug: Web/SVG/Attribute/attributeName +tags: + - SVG + - SVG 属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/attributeName +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +该属性标识了在一个动画动作环节中，父元素的需要被改变的属性名。 + +## 用法 + +| 类别 | 动画属性目标属性 | +| -------- | ------------------------------------------------------------------------------------- | +| 值 |该属性指定目标属性和它相对应的值处于哪个命名空间里。
- -用法
- -| 类别 | -动画属性目标属性 | -
|---|---|
| 值 | -CSS | XML | auto | -
| 可变性 | -No | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
这个属性可取下列值之一：
- --
-
- CSS -
- 指定{{ SVGAttr("attributeName") }}的值是一个 CSS 属性名。 -
- -
- XML -
- 指定{{ SVGAttr("attributeName") }}的值是一个 XML 属性名，在目标元素的默认 XML 命名空间里。 -
- auto -
- 编译器将把{{ SVGAttr("attributeName") }}匹配到目标元素的一个属性。用户代理先搜索 CSS 属性列表以找出一个匹配的属性名，如果找不到，再为这个元素搜索默认 XML 命名空间。 -
示例
- -元素
- -下列元素可以使用attributeType属性：
-
-
- {{ SVGElement("animate") }} -
- {{ SVGElement("animateColor") }} -
- {{ SVGElement("animateTransform") }} -
- {{ SVGElement("set") }} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/attributetype/index.md b/files/zh-cn/web/svg/attribute/attributetype/index.md new file mode 100644 index 00000000000000..ae9d664e182ef3 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/attributetype/index.md @@ -0,0 +1,46 @@ +--- +title: attributeType +slug: Web/SVG/Attribute/attributeType +tags: + - SVG + - SVG 属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/attributeType +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +该属性指定目标属性和它相对应的值处于哪个命名空间里。 + +## 用法 + +| 类别 | 动画属性目标属性 | +| -------- | ------------------------------------------------------------------------------------- | +| 值 | CSS \| XML \| **auto** | +| 可变性 | No | +| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#AttributeTypeAttribute) | + +这个属性可取下列值之一： + +- CSS + - : 指定{{ SVGAttr("attributeName") }}的值是一个 CSS 属性名。 +- XML + + - : 指定{{ SVGAttr("attributeName") }}的值是一个 XML 属性名，在目标元素的默认 XML 命名空间里。 + +- auto + - : 编译器将把{{ SVGAttr("attributeName") }}匹配到目标元素的一个属性。用户代理先搜索 CSS 属性列表以找出一个匹配的属性名，如果找不到，再为这个元素搜索默认 XML 命名空间。 + +## 示例 + +## 元素 + +下列元素可以使用`attributeType`属性： + +- {{ SVGElement("animate") }} +- {{ SVGElement("animateColor") }} +- {{ SVGElement("animateTransform") }} +- {{ SVGElement("set") }} + +## 规范 + +{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/baseline-shift/index.html b/files/zh-cn/web/svg/attribute/baseline-shift/index.html deleted file mode 100644 index 53bc8f8326324a..00000000000000 --- a/files/zh-cn/web/svg/attribute/baseline-shift/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: baseline-shift -slug: Web/SVG/Attribute/baseline-shift -tags: - - SVG - - SVG 属性 - - 需要兼容性表 -translation_of: Web/SVG/Attribute/baseline-shift ---- - - -属性baseline-shift允许相对于父文本内容元素的dominant-baseline重定位dominant-baseline。该切换对象必须是一个下标或上标。
作为一个外观属性，它还可以直接作为 CSS 样式表内部的属性使用。请看{{ cssxref("baseline-shift","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> -
- 该属性的结果值是这个百分数乘以 {{ SVGElement("text") }}元素的{{ SVGAttr("line-height") }}。如果是正值，dominant-baseline 向 shift 同方向移动结果值；如果是负值，dominant-baseline 向 shift 反方向移动结果值，相对于父文本内容元素。值“0%”等于”baseline“。 -
- <length> -
- 如果是正值，dominant-baseline 向 shift 同方向移动<length>距离；如果是负值，dominant-baseline 向 shift 反方向移动<length>距离。值”0cm“等于”baseline“。 -
示例
- -元素
- -下列这些元素可以使用 baseline-shift属性。
-
-
- {{ SVGElement("tspan") }} -
- {{ SVGElement("tref") }} -
- {{ SVGElement("altGlyph") }} -
- {{ SVGElement("textPath") }} -
规范
- -{{Specifications}} - -参见
- --
-
- {{ cssxref("baseline-shift","CSS baseline-shift") }} -
« 返回 SVG 特性参考
- -baseProfile 特性描述了作者认为正确渲染内容所需要的最小的 SVG 语言概述。这个特性不会说明任何处理限制，可以把它看作是元数据。 比如，这个特性的值可以被编辑工具用来在用户的修改超出所指定的基准概述范围时发出警告。
每个 SVG 概述应该为这个特性定义一个适合的文本。如果没有指定这个特性，效果就跟指定 none 一样。
使用背景
- -| 目录 | -无 | -
|---|---|
| 值 | -none | full| basic| tiny | -
| 动画特性 | -无 | -
| 规范文档 | -SVG 1.1 (第二版) | -
-
-
- none -
- 代表了最小的 SVG 语言配置，没有描述作者关于正确渲染内容的观点。 -
- full -
- 代表一个正常的概述，适用于 PC。 -
- basic -
- 代表一个轻量级的概述，适用于 PDA。 -
- tiny -
- 代表更轻量的概述，适用于手机。 -
例子
- -<svg width="120" height="120" version="1.1" - xmlns="http://www.w3.org/2000/svg" baseProfile="full"> - - ... - -</svg>- -
元素
- -以下元素会用到 baseProfile 特性
-
-
- {{ SVGElement("svg") }} -
这个属性定义了动画何时开始。
- -这个属性值是一个分号分隔的数列值。SMIL 规范的"Evaluation of begin and end time lists"章节详细解释了开始时间数列。每个单独的值可以是下述之一：<offset-value>、<syncbase-value>、<event-value>、<repeat-value>、<accessKey-value>、<wallclock-sync-value>或者关键词indefinite。
用法
- -| 类别 | -动画定时属性 | -
|---|---|
| 值 | -<begin-value-list> | -
| 可变性 | -No | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
<begin-value-list>中的每一个值可以是下述之一：
-
-
- <offset-value> -
- 一个时钟值代表了一个相对于 SVG 文档开头的时间点，SVG 文档开头通常是指 load 事件或者 DOMReady 事件触发的时间点。负值是合法的。 -
- <syncbase-value> -
- 描述一个syncbase以及一个可选的来自于syncbase的时偏移。元素的动画开始时间被定义为相对于另一个动画的开头或者激活结束。一个 ID 及其后面跟着的 .begin 或 .end 构成了一个 syncbase，ID 引用到另一个动画元素，.begin 或 .end 用来确定到底是与引用的动画元素的动画开头同步、还是与引用的动画元素的动画激活结束同步。 -
- <event-value> -
- 描述了一个事件以及一个可选的时偏移，用来确定动画开始的时点。触发指定事件的时点，被定义为动画开始的时点。一个元素 ID 及其后面跟着的一个点及其后面跟着事件名构成了一个合法的 event-value 值。事件名必须是元素支持的事件名。全部合法的事件（不一定是所有元素都支持的事件）包括这些：focusin、focusout、
activate、click、mousedown、mouseup、mouseover、mousemove、mouseout、DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMNodeRemovedFromDocument、DOMNodeInsertedIntoDocument、DOMAttrModified、DOMCharacterDataModified、SVGLoad、SVGUnload、SVGAbort、SVGError、SVGResize、SVGScroll、SVGZoom、beginEvent、endEvent和repeatEvent。
- - <repeat-value> -
- 描述了一个符合条件重复事件。repeat 事件发生了指定次数的时间点，被定义为元素动画的开始时间点。 -
- <accessKey-value> -
- 描述了一个用来触发动画的访问键。当用户按下指定的键时，元素动画就开始了。 -
- <wallclock-sync-value> -
- 描述了一个动画开始时间，是真实世界钟的时点。时点的句法遵守 ISO8601 定义的句法。 -
示例
- -Offset 示例
- - - -Syncbase 示例
- - - -Event 示例
- - - -Repeat 示例
- - - -Accesskey 示例
- - - -元素
- -下列元素可以使用begin属性：
-
-
- 动画元素 » -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/begin/index.md b/files/zh-cn/web/svg/attribute/begin/index.md new file mode 100644 index 00000000000000..3670cd8098a4d3 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/begin/index.md @@ -0,0 +1,70 @@ +--- +title: begin +slug: Web/SVG/Attribute/begin +tags: + - SVG + - SVG 属性 + - 参考 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/begin +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +这个属性定义了动画何时开始。 + +这个属性值是一个分号分隔的数列值。SMIL 规范的["Evaluation of begin and end time lists"](http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists)章节详细解释了开始时间数列。每个单独的值可以是下述之一：`« SVG Attribute reference home
-This attribute specifies the interpolation mode for the animation. The default mode is linear, however if the attribute does not support linear interpolation (e.g. for strings), the calcMode attribute is ignored and discrete interpolation is used.
Usage context
-| Categories | Animation value attribute |
|---|---|
| Value | discrete | linear | paced | spline |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) |
- discrete
- This specifies that the animation function will jump from one value to the next without any interpolation.
- linear
- Simple linear interpolation between values is used to calculate the animation function. Except for {{ SVGElement("animateMotion") }}, this is the default value.
- paced
- Defines interpolation to produce an even pace of change across the animation. This is only supported for values that define a linear numeric range, and for which some notion of "distance" between points can be calculated (e.g. position, width, height, etc.). If paced is specified, any {{ SVGAttr("keyTimes") }} or {{ SVGAttr("keySplines") }} will be ignored. For {{ SVGElement("animateMotion") }}, this is the default value.
- spline
- Interpolates from one value in the {{ SVGAttr("values") }} list to the next according to a time function defined by a cubic Bézier spline. The points of the spline are defined in the {{ SVGAttr("keyTimes") }} attribute, and the control points for each interval are defined in the {{ SVGAttr("keySplines") }} attribute. -
Example
-Elements
-The following elements can use the calcMode attribute
- {{ SVGElement("animate") }}
- {{ SVGElement("animateColor") }}
- {{ SVGElement("animateMotion") }}
- {{ SVGElement("animateTransform") }} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/calcmode/index.md b/files/zh-cn/web/svg/attribute/calcmode/index.md new file mode 100644 index 00000000000000..f7fa85b6bd0a14 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/calcmode/index.md @@ -0,0 +1,40 @@ +--- +title: calcMode +slug: Web/SVG/Attribute/calcMode +translation_of: Web/SVG/Attribute/calcMode +--- +« [SVG Attribute reference home](/en/SVG/Attribute) + +This attribute specifies the interpolation mode for the animation. The default mode is **linear**, however if the attribute does not support linear interpolation (e.g. for strings), the `calcMode` attribute is ignored and discrete interpolation is used. + +## Usage context + +| Categories | Animation value attribute | +| ------------------ | -------------------------------------------------------------------------------- | +| Value | discrete \| linear \| paced \| spline | +| Animatable | No | +| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute) | + +- discrete + - : This specifies that the animation function will jump from one value to the next without any interpolation. +- linear + - : Simple linear interpolation between values is used to calculate the animation function. Except for {{ SVGElement("animateMotion") }}, this is the default value. +- paced + - : Defines interpolation to produce an even pace of change across the animation. This is only supported for values that define a linear numeric range, and for which some notion of "distance" between points can be calculated (e.g. position, width, height, etc.). If paced is specified, any {{ SVGAttr("keyTimes") }} or {{ SVGAttr("keySplines") }} will be ignored. For {{ SVGElement("animateMotion") }}, this is the default value. +- spline + - : Interpolates from one value in the {{ SVGAttr("values") }} list to the next according to a time function defined by a cubic Bézier spline. The points of the spline are defined in the {{ SVGAttr("keyTimes") }} attribute, and the control points for each interval are defined in the {{ SVGAttr("keySplines") }} attribute. + +## Example + +## Elements + +The following elements can use the `calcMode` attribute + +- {{ SVGElement("animate") }} +- {{ SVGElement("animateColor") }} +- {{ SVGElement("animateMotion") }} +- {{ SVGElement("animateTransform") }} + +## 规范 + +{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/clip-path/index.html b/files/zh-cn/web/svg/attribute/clip-path/index.html deleted file mode 100644 index 5f0f935461bf63..00000000000000 --- a/files/zh-cn/web/svg/attribute/clip-path/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: clip-path -slug: Web/SVG/Attribute/clip-path -tags: - - SVG - - SVG 属性 -translation_of: Web/SVG/Attribute/clip-path ---- -{{SVGRef}}
-
-元素的表现属性 clip-path 为其定义或关联一条剪切路径。
注意：clip-path 是一个表现属性，可以作为 CSS 属性使用。
作为一种表现属性，clip-path 可以用于任何元素，不过效果最明显的是下列十九种元素：{{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('use')}}
-
-
-
-
-
-html,body,svg { height:100% }
-<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>- -
{{EmbedLiveSample('topExample', '100%', 200)}}
-Usage notes
- -| 值 | -{{cssxref('url')}} | [ {{cssxref('basic-shape')}} || <geometry-box> ] | none |
-
|---|---|
| 默认值 | -none |
-
| Animatable | -是 | -
-
-
- <geometry-box> -
- geometry-box 是应用 {{cssxref('basic-shape')}} 的额外信息，用于区分 CSS 基本形状如何应用于元素上：
fill-box表示将对象的包围框作为参照框；stroke-box表示将对象的包围框加上描边的范围作为参照框；view-box表示使用最近的 SVG 视窗作为参照框。
-
注意：clip-path 语法的更多细节可参考 CSS 属性 {{cssxref('clip-path')}} 的参考页面。
- -规范
- -{{Specifications}} - -浏览器兼容性
- -{{Compat}}
- -See also
- --
-
- The CSS {{cssxref("clip-path")}} property -
{{SVGRef}}{{deprecated_header}}
-
-clip 属性是定义元素可见区域的属性。
clip 属性的参数值与 {{ cssxref("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: {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, {{ SVGElement("image") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("pattern") }}, {{ SVGElement("marker") }}
- -
-
-
-
-
-
-html,body,svg { height:100% }
-<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>- -
{{EmbedLiveSample('topExample', '100%', 150)}}
-用法
- -Warning: This property is deprecated. Use {{cssxref("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.
规范
- -{{Specifications}} - -浏览器兼容性
- -{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/clip/index.md b/files/zh-cn/web/svg/attribute/clip/index.md new file mode 100644 index 00000000000000..f2ae4433db1d6f --- /dev/null +++ b/files/zh-cn/web/svg/attribute/clip/index.md @@ -0,0 +1,60 @@ +--- +title: clip +slug: Web/SVG/Attribute/clip +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/clip +--- +{{SVGRef}}{{deprecated_header}} + +**`clip`** 属性是定义元素可见区域的属性。 + +`clip` 属性的参数值与 {{ cssxref("clip","CSS clip property") }} 的参数值定义相同。指示当前用户坐标的无单位的值，可以用在 `color 属性用来为 {{ SVGAttr("fill") }} 属性、{{ SVGAttr("stroke") }} 属性、{{ SvgAttr("stop-color") }} 属性、{{ SVGAttr("flood-color") }} 属性和 {{ SVGAttr("lighting-color") }} 属性提供一个潜在的间接值（currentColor）。
作为一个外观属性，它还可以直接用作 CSS 样式表的属性。请阅读 {{ cssxref("color","CSS color") }} 以了解更多信息。
- -用法
- -| 类别 | -外观属性 | -
|---|---|
| 值 | -<color> | inherit | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
示例
- -<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> - <g color="green"> - <rect width="50" height="50" fill="currentColor" /> - <circle r="25" cx="70" cy="70" stroke="currentColor" fill="none" stroke-width="5" /> - </g> -</svg> -- -
{{ EmbedLiveSample('Example', '100%', '110') }}
- -元素
- -下列元素可以使用color属性：
-
-
- 文本内容元素 » -
- 形状元素 » -
- {{ SVGElement("stop") }} -
- {{ SVGElement("feFlood") }} -
- {{ SVGElement("feDiffuseLighting") }} -
- {{ SVGElement("feSpecularLighting") }} -
规范
- -{{Specifications}} - -浏览器兼容性
- -{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/color/index.md b/files/zh-cn/web/svg/attribute/color/index.md new file mode 100644 index 00000000000000..c4f8979e32aa17 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/color/index.md @@ -0,0 +1,52 @@ +--- +title: color +slug: Web/SVG/Attribute/color +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/color +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +`color` 属性用来为 {{ SVGAttr("fill") }} 属性、{{ SVGAttr("stroke") }} 属性、{{ SvgAttr("stop-color") }} 属性、{{ SVGAttr("flood-color") }} 属性和 {{ SVGAttr("lighting-color") }} 属性提供一个潜在的间接值（`currentColor`）。 + +作为一个外观属性，它还可以直接用作 CSS 样式表的属性。请阅读 {{ cssxref("color","CSS color") }} 以了解更多信息。 + +## 用法 + +| 类别 | 外观属性 | +| -------- | ---------------------------------------------------------------------------- | +| 值 | [{{SVGRef}}
-
-cx 属性定义一个中心点的 x 轴坐标。
有三个元素在使用此属性：{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, 和 {{SVGElement("radialGradient")}}
- -
-
-
-
-
-
-html,body,svg { height:100% }
-<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>- -
{{EmbedLiveSample('topExample', 100, 100)}}
-圆
- -对于 {{SVGElement('circle')}}，cx 用来定义图形中心的 x 轴坐标。
| 值 | -<length> | <percentage> | -
|---|---|
| 默认值 | -0 |
-
| 可变性 | -Yes | -
注：起始于 SVG2 cx，是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。
椭圆
- -对于 {{SVGElement('ellipse')}}，cx 用来定义图形中心的 x 轴坐标。
| 值 | -<length> | <percentage> | -
|---|---|
| 默认值 | -0 |
-
| 可变性 | -Yes | -
注： 起始于 SVG2 cx，是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。
径向渐变
- -对于 {{SVGElement('radialGradient')}}, cx 用来定义径向渐变终止圆的 x 轴坐标。
| 值 | -<length> | -
|---|---|
| 默认值 | -50% |
-
| 可变性 | -Yes | -
示例
- -
-
-
-html,body,svg { height:100% }
-<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>- -
{{EmbedLiveSample('radialGradient', 150, '100%')}}
- -规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/cx/index.md b/files/zh-cn/web/svg/attribute/cx/index.md new file mode 100644 index 00000000000000..335d85eeefb0ea --- /dev/null +++ b/files/zh-cn/web/svg/attribute/cx/index.md @@ -0,0 +1,105 @@ +--- +title: cx +slug: Web/SVG/Attribute/cx +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/cx +--- +{{SVGRef}} + +**`cx`** 属性定义一个中心点的 x 轴坐标。 + +有三个元素在使用此属性：{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, 和 {{SVGElement("radialGradient")}} + +## 示例 + +```css hidden +html,body,svg { height:100% } +``` + +```html + +``` + +{{EmbedLiveSample('示例', 100, 100)}} + +## 圆 + +对于 {{SVGElement('circle')}}，`cx` 用来定义图形中心的 x 轴坐标。 + +| 值 | **[{{SVGRef}}
-
-cy 属性定义一个中心点的 y 轴坐标。
有三个元素在使用此属性：{{SVGElement("circle")}}，{{SVGElement("ellipse")}} 和 {{SVGElement("radialGradient")}}
- -
-
-
-
-
-
-html,body,svg { height:100% }
-<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>- -
{{EmbedLiveSample('topExample', '100%', 300)}}
-圆
- -对于 {{SVGElement('circle')}}，cy 用来定义图形中心的 y 轴坐标。
| 值 | -<length> | <percentage> | -
|---|---|
| 默认值 | -0 |
-
| 可变性 | -Yes | -
注：起始于 SVG2，cy 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。
椭圆
- -对于 {{SVGElement('ellipse')}}，cy 用来定义图形中心的 y 轴坐标。
| 值 | -<length> | <percentage> | -
|---|---|
| 默认值 | -0 |
-
| 可变性 | -Yes | -
注：起始于 SVG2，cy 是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。
径向渐变
- -对于 {{SVGElement('radialGradient')}}，cy 用来定义径向渐变终止圆的 y 轴坐标。
| 值 | -<length> | -
|---|---|
| 默认值 | -50% |
-
| 可变性 | -Yes | -
示例
- -
-
-
-html,body,svg { height:100% }
-<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>- -
{{EmbedLiveSample('radialGradient', 150, '100%')}}
- -规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/cy/index.md b/files/zh-cn/web/svg/attribute/cy/index.md new file mode 100644 index 00000000000000..bf4df2455133df --- /dev/null +++ b/files/zh-cn/web/svg/attribute/cy/index.md @@ -0,0 +1,105 @@ +--- +title: cy +slug: Web/SVG/Attribute/cy +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/cy +--- +{{SVGRef}} + +**`cy`** 属性定义一个中心点的 y 轴坐标。 + +有三个元素在使用此属性：{{SVGElement("circle")}}，{{SVGElement("ellipse")}} 和 {{SVGElement("radialGradient")}} + +## 示例 + +```css hidden +html,body,svg { height:100% } +``` + +```html + +``` + +{{EmbedLiveSample('示例', '100%', 300)}} + +## 圆 + +对于 {{SVGElement('circle')}}，`cy` 用来定义图形中心的 y 轴坐标。 + +| 值 | **[该属性定义了一个路径。
- -用法
- -| 类别 | -路径定义属性 | -
|---|---|
| 值 | -- |
| 可变性 | -Yes | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
属性d实际上是一个字符串，包含了一系列路径描述。这些路径由下面这些指令组成：
-
-
- Moveto -
- Lineto -
- Curveto -
- Arcto -
- ClosePath -
这些组合在一个字符串中。这些不同的命令是大小写敏感的；一个大写的命令指明它的参数是绝对位置，而小写的命令指明相对于当前位置的点。可以指定一个负数值作为命令的参数：负角度将是逆时针的，绝对 x 和 y 位置将视为负坐标。负相对 x 值将会往左移，而负相对 y 值将会向上移。
- -Moveto
- -Moveto指令可以被想象成拎起绘图笔，落脚到另一处。在上一个点和这个指定点之间没有线段绘制。用一个 Moveto 命令开始一个路径是好的作法，因为如果没有一个初始化的 Moveto，执行命令时开始点会是上一个操作发生过的地方，这样可能造成不确定的行为。
句法：
- --
-
M x,y在这里 x 和 y 是绝对坐标，分别代表水平坐标和垂直坐标。
- m dx,dy在这里 dx 和 dy 是相对于当前点的距离，分别是向右和向下的距离。
-
示例：
- --
-
- 位于绝对位置 x=50, y= 100：
<path d="M50,100..." />
- - 往右移 50，往下移 100：
<path d="m50,100..." />
-
Lineto
- -和Moveto指令不同，Lineto指令将绘制一条直线段。这个直线段从当前位置移到指定位置。原生的Lineto命令的句法是”L x, y“或者”l dx, dy“，在这里 x 和 y 是绝对坐标，而 dx 和 dy 分别是向右和向下的距离。还有字母 H 和 V，分别指定水平和垂直移动。它们的句法与 L 相同，它的小写版本是相对距离，大写版本是绝对位置。
Curveto
- -Curvto 命令指定了一个贝塞尔曲线。有两种类型的贝塞尔曲线：立方曲线和二次方曲线。二次方贝塞尔曲线是一种特殊的立方贝塞尔曲线，在这里，控制点的两端是相同的。二次方贝塞尔曲线的句法是”Q cx, cy x, y“或”q dcx, dcy dx, dy“。cx 和 cy 都是控制点的绝对坐标，而 dcx 和 dcy 分别是控制点在 x 和 y 方向上的距离。
- -
-
-
-立方贝赛尔曲线遵守二次方贝赛尔曲线同样的概念，但是它需要考虑两个控制点。立方贝塞尔曲线的句法是：”C c1x,c1y c2x,c2y x,y“或者”c dc1x,dc1y dc2x,dc2y dx,dy“，在这里，c1x、c1y 和 c2x、c2y 是分别是初始点和结束点的控制点的绝对坐标。dc1x、dc1y 和 dc2x、dc2y 都是相对于初始点，而不是相对于结束点的。dx 和 dy 分别是向右和向下的距离。
- -为了连缀平滑的贝塞尔曲线，还可以使用 T 和 S 命令。它们的语法比别的 Curveto 命令简单，因为它假定第一个控制点是从前一个控制点关于前一个点的反射，或者说如果没有前一个控制点的话它实际上就是前一个点。T 的句法是”T x,y“或者”t dx,dy“，分别对应于绝对坐标和相对距离，用来创建二次方贝塞尔曲线。S 用来创建立方贝塞尔曲线，语法是”S cx,cy x,y“或者”s dcx,dcy dx,dy“，在这里 (d)cx 指定第二个控制点。
- -最后，所有的贝塞尔曲线命令可以制作出一个多边贝塞尔图形，先初始化命令，然后多次指定所有的参数，就可以制作出一个多边贝赛尔图形。因此，下面的两个命令可以创建完全相同的路径：
- -
-
-
-<path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100" />
- <path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" />
Arcto
- -有时候描述一个椭圆弧曲线路径要比描述一个贝塞尔曲线路径更简单。说到底，path 元素支持 Arcto 命令。圆弧的中心由别的变量计算出。一个 arcto 的声明相对而言有点复 Visual Studio：”A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y“。解构它，rx 和 ry 分别是 x 和 y 方向的半径，而 LargeArcFlag 的值要到是 0 要么是 1，用来确定是要画小弧（0）还是画大弧（1）。SweepFlag 也要么是 0 要么是 1，用来确定弧是顺时针方向（1）还是逆时针方向（0）。x 和 y 是目的地的坐标。虽然 xAxisRotate 支持改变 x 轴相对于当前引用框架的方向，但是在 Gecko 7 中，这个参数看起来没什么效果。
- -ClosePath
- -ClosePath 命令将在当前路径从，从当前点到第一个点简单画一条直线。它是最简单的命令，而且不带有任何参数。它沿着到开始点的最短的线性路径，如果别的路径落在这路上，将可能路径相交。句法是”Z“或”z“，两种写法作用都一样。
-元素
- -以下元素可以使用d属性：
-
-
- {{SVGElement("path")}} » -
- {{SVGElement("glyph")}} » -
同样的规则可以应用到{{SVGElement("animate")}}动画路径上。
- -提醒
- -原点（坐标系 0,0 点）经常是上下文的左上角。然而{{SVGElement("glyph")}}元素的原点在它的字母框的左下角。
- -在任何两个数字之间允许加一个逗号，但是在别的地方不允许加逗号。
- -示例
- -<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
- <path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
-</svg>为了演示d="M37,17v15H14V17H37z M50,0H0v50h50V0z"的实际意义，我们来讨论这个字符串的每一小段。
-
-
d=" M37,17 || v15 || H14 || V17 || H37 ||z // M50,0 || H0 || v50 || h50 || V0 || z"
- d=--
-
- 这个属性包含了构成整个 SVG 的字符串。 -
- M37,17--
-
- M 是 MoveTo 的缩写。大写的“M”意味着绝对坐标，小写的“m”意味着相对距离。它暗含着是基于开始坐标，线在框里面，而且你在方框内矩形的右上角开始。 -
- 37 是开始 svg 位置的缩写，在 X 轴坐标 37 像素处。 -
17 开始 svg 位置，在 y 轴的 17 像素处。
-
- - v15
-
-
-
- v 代表垂直。大写的 V 意味着绝对坐标，小写的 v 表示相对的长度、距离。dx/dy 和 x/y 可以用在 H/V 和 h/v 相应的位置里。 -
- 这里是表示相对于给定坐标画一条 15 像素的垂直线。它意味着你向下画 15 像素，到坐标 37,32。 -
- H14--
-
- H 代表水平，它是绝对坐标，因为它是大写的。 -
- 从 v15 的终点开始，画一条水平线直到到达绝对坐标 14，当到达 x 坐标 14 时结束画线。笔触位于坐标 14,32。 -
- V17--
-
- 就像前面那样，从上一条线的终点开始，画一条垂直线，直到到达 y 轴坐标 17。笔触位于坐标 14,17。 -
- - H37
-
-
-
- 最后，从 14,17 开始，画一条水平线，直到到达 x 轴坐标 37。笔触位于坐标 37,17（M 的值） -
- z--
-
- 小写的 z 和大写的 Z 都是闭合一系列 svg 线段。 -
- ,--
-
- 逗号开始下一串简单矢量图形线段。下一系列简单矢量线段将制作外层方框。 -
- M50,0--
-
- 在 x 轴 50 和 y 轴 0 处开始。 -
- H0--
-
- 画一条直线直到 (0,0)。 -
- v50--
-
- 相对于 0,0 画一条 50 像素的垂直线。这条线将画到 (0,50)。 -
- h50--
-
- 相对于 (0,-50) 画一条 50 像素的水平线。这条线将向右画到 (50,50)。 -
- V0--
-
- 画一条垂直线直到到达 y 轴坐标 0。这将画线到 (50,0)，即 M 的值。 -
- z--
-
- 小写的 z 和大写的 Z 都是闭合一系列 svg 线段。 -
-
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/d/index.md b/files/zh-cn/web/svg/attribute/d/index.md new file mode 100644 index 00000000000000..934ff0964ad284 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/d/index.md @@ -0,0 +1,164 @@ +--- +title: d +slug: Web/SVG/Attribute/d +tags: + - SVG + - SVG 元素 + - 参考 +translation_of: Web/SVG/Attribute/d +--- +« [SVG 属性参考主页](/zh-CN/docs/Web/SVG/Attribute) + +该属性定义了一个路径。 + +## 用法 + +| 类别 | 路径定义属性 | +| -------- | --------------------------------------------------------------------------- | +| 值 | | +| 可变性 | Yes | +| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#DurAttribute) | + +属性`d`实际上是一个字符串，包含了一系列路径描述。这些路径由下面这些指令组成： + +- Moveto +- Lineto +- Curveto +- Arcto +- ClosePath + +这些组合在一个字符串中。这些不同的命令是大小写敏感的；一个大写的命令指明它的参数是绝对位置，而小写的命令指明相对于当前位置的点。可以指定一个负数值作为命令的参数：负角度将是逆时针的，绝对 x 和 y 位置将视为负坐标。负相对 x 值将会往左移，而负相对 y 值将会向上移。 + +## Moveto + +`Moveto`指令可以被想象成拎起绘图笔，落脚到另一处。在上一个点和这个指定点之间没有线段绘制。用一个 Moveto 命令开始一个路径是好的作法，因为如果没有一个初始化的 Moveto，执行命令时开始点会是上一个操作发生过的地方，这样可能造成不确定的行为。 + +句法： + +- `M x,y` 在这里 x 和 y 是绝对坐标，分别代表水平坐标和垂直坐标。 +- `m dx,dy` 在这里 dx 和 dy 是相对于当前点的距离，分别是向右和向下的距离。 + +示例： + +- 位于绝对位置 x=50, y= 100：`{{SVGRef}}
-
-The display attribute lets you control the rendering of graphical or container elements.
display属性让你可以控制图形元素或容器元素的渲染。
A value of display="none" indicates that the given element and its children will not be rendered. Any value other than none or inherit indicates that the given element will be rendered by the browser.
display="none"表示该元素和它的子元素不会被渲染。而非none或inherit的值表示元素会被浏览器渲染。
When applied to a container element, setting display to none causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group. This means that any child of an element with display="none" will never be rendered even if the child has a value for display other than none.
当应用到容器元素时，将display设为none会导致容器与它所有的子元素不可见，如此看来，它在一组元素中表现地像一个元素组。这表示具有display="none"属性元素的所有子元素都不会被渲染，即使子元素的display并不是none。
When the display attribute is set to none, then the given element does not become part of the rendering tree. It has implications for the {{SVGElement("tspan")}}, {{SVGElement("tref")}}, and {{SVGElement("altGlyph")}} elements, event processing, for bounding box calculations and for calculation of clipping paths:
display属性被设为none的元素不会成为渲染树的一部分。它涉及到{{SVGElement("tspan")}}, {{SVGElement("tref")}}, 和 {{SVGElement("altGlyph")}}元素、用于盒边界与路径剪裁计算的事件处理。
-
-
- If
displayis set tononeon a {{SVGElement("tspan")}}, {{SVGElement("tref")}}, or {{SVGElement("altGlyph")}} element, then the text string is ignored for the purposes of text layout.
-
如果在{{SVGElement("tspan")}}, {{SVGElement("tref")}}, 或{{SVGElement("altGlyph")}}元素中display的属性值被设为none,则为了文字布局，文字字符串会被忽视掉。
-
-
- Regarding events, if
displayis set tonone, the element receives no events.
-
至于事件，如果display被设为none则该元素不接受任何事件。
-
-
- The geometry of a graphics element with
displayset tononeis not included in bounding box and clipping paths calculations.
-
图形元素的display属性被设为none则不会被盒边界和路径剪裁计算中包含进去。
The display attribute only affects the direct rendering of a given element, whereas it does not prevent elements from being referenced by other elements. For example, setting it to none on a {{SVGElement("path")}} element will prevent that element from getting rendered directly onto the canvas, but the {{SVGElement("path")}} element can still be referenced by a {{SVGElement("textPath")}} element; furthermore, its geometry will be used in text-on-a-path processing even if the {{SVGElement("path")}} has a display value of none.
display属性只影响能被直接渲染的元素，尽管它不能防止该元素被其他元素参考。例如：将{SVGElement("path")}}元素设为 none，会使得该元素不会被直接渲染到 canvas 上，但是{{SVGElement("textPath")}}元素依旧会参考{{SVGElement("path")}}。此外，即便{SVGElement("path")}}的display为none，它的形状在处理路径上的文本时仍然会被用到。
This attribute also affects direct rendering into offscreen canvases, such as occurs with masks or clip paths. Thus, setting display="none" on a child of a {{SVGElement("mask")}} will prevent the given child element from being rendered as part of the mask. Similarly, setting display="none" on a child of a {{SVGElement("clipPath")}} element will prevent the given child element from contributing to the clipping path.
这个属性也能影响直接渲染到屏幕外的画布，比如遮罩或路径剪裁。因此，把{{SVGElement("mask")}}元素的一个子元素设为display="none"将会阻止子元素参与到路径剪裁中。
Note: As a presentation attribute, display can be used as a CSS property. See {{cssxref("display", "CSS display")}} for further information.
As a presentation attribute, it can be applied to any element.
- -
-
-
-
-
-
-html, body, svg {
- height: 100%;
-}
-<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>- -
{{EmbedLiveSample("topExample", "240", "120")}}
-Usage notes
- -| Default value | -inline |
-
|---|---|
| Value | -{{csssyntax("display")}} | -
| Animatable | -Yes | -
For a description of the values, please refer to the {{cssxref("display", "CSS display")}} property.
- -Specifications
- -{{Specifications}} - -Browser compatibility
- -{{Compat}}
- -See also
- --
-
- {{SVGAttr("visibility")}} attribute -
- {{cssxref("display", "CSS display")}} -
« SVG Attribute reference home
-The dominant-baseline attribute is used to determine or re-determine a scaled-baseline-table. A scaled-baseline-table is a compound value with three components: a baseline-identifier for the dominant-baseline, a baseline-table and a baseline-table font-size. Some values of the property re-determine all three values; other only re-establish the baseline-table font-size. When the initial value, auto, would give an undesired result, this property can be used to explicitly set the desire scaled-baseline-table.
If there is no baseline table in the nominal font or if the baseline table lacks an entry for the desired baseline, then the browser may use heuristics to determine the position of the desired baseline.
-As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("dominant-baseline","CSS dominant-baseline") }} for further information.
-Usage context
-| Categories | -Presentation attribute | -
|---|---|
| Value | -auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit | -
| Animatable | -Yes | -
| Normative document | -SVG 1.1 (2nd Edition) | -
-
-
- - auto -
-
-
If this property occurs on a {{ SVGElement("text") }} element, then the computed value depends on the value of the {{ SVGAttr("writing-mode") }} attribute. If the {{ SVGAttr("writing-mode") }} is horizontal, then the value of the dominant-baseline component is
-alphabetic, else if the {{ SVGAttr("writing-mode") }} is vertical, then the value of the dominant-baseline component iscentral.If this property occurs on a {{ SVGElement("tspan") }}, {{ SVGElement("tref") }}, {{ SVGElement("altGlyph") }} or {{ SVGElement("textPath") }} element, then the dominant-baseline and the baseline-table components remain the same as those of the parent text content element. If the computed {{ SVGAttr("baseline-shift") }} value actually shifts the baseline, then the baseline-table font-size component is set to the value of the {{ SVGAttr("font-size") }} attribute on the element on which the
-dominant-baselineattribute occurs, otherwise the baseline-table font-size remains the same as that of the element. If there is no parent text content element, the scaled-baseline-table value is constructed as above for {{ SVGElement("text") }} elements.
- - - use-script -
-
- The dominant-baseline and the baseline-table components are set by determining the predominant script of the character data content. The {{ SVGAttr("writing-mode") }}, whether horizontal or vertical, is used to select the appropriate set of baseline-tables and the dominant baseline is used to select the baseline-table that corresponds to that baseline. The baseline-table font-size component is set to the value of the {{ SVGAttr("font-size") }} attribute on the element on which the
dominant-baselineattribute occurs.
- - - no-change -
- - The dominant-baseline, the baseline-table, and the baseline-table font-size remain the same as that of the parent text content element. -
- - reset-size -
- - The dominant-baseline and the baseline-table remain the same, but the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element. This re-scales the baseline-table for the current {{ SVGAttr("font-size") }}. -
- - ideographic -
-
- The baseline-identifier for the dominant-baseline is set to be
ideographic, the derived baseline-table is constructed using theideographicbaseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
- - - alphabetic -
-
- The baseline-identifier for the dominant-baseline is set to be
alphabetic, the derived baseline-table is constructed using thealphabeticbaseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
- - - hanging -
-
- The baseline-identifier for the dominant-baseline is set to be
hanging, the derived baseline-table is constructed using thehangingbaseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
- - - mathematical -
-
- The baseline-identifier for the dominant-baseline is set to be
mathematical, the derived baseline-table is constructed using themathematicalbaseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
- - - central -
-
- The baseline-identifier for the dominant-baseline is set to be
central. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. That font baseline-table is chosen using the following priority order of baseline-table names:ideographic,alphabetic,hanging,mathematical. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
- - - middle -
-
- The baseline-identifier for the dominant-baseline is set to be
middle. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. That font baseline-table is chosen using the following priority order of baseline-table names:alphabetic,ideographic,hanging,mathematical. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
- - - text-after-edge -
-
- The baseline-identifier for the dominant-baseline is set to be
text-after-edge. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. The choice of which font baseline-table to use from the baseline-tables in the font is browser dependent. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
- - - text-before-edge -
-
- The baseline-identifier for the dominant-baseline is set to be
text-before-edge. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. The choice of which baseline-table to use from the baseline-tables in the font is browser dependent. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.
-
Example
-Elements
-The following elements can use the dominant-baseline-shift attribute
-
-
- Text content elements » -
规范
- -{{Specifications}} - -See also
--
-
- {{ cssxref("dominant-baseline","CSS dominant-baseline") }} -
该属性标识了动画的简单持续时间。
- -用法
- -| 类别 | -动画定时属性 | -
|---|---|
| 值 | -<clock-value> | indefinite | -
| 可变性 | -No | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
-
-
- <clock-value> -
- 指定简单持续时间的时长。值必须大于 0。可以用小时（h）、分钟（m）、秒（s）、毫秒（ms）表达这个值。可以组合这些时间表达式以提供一个复合的持续时间，比如这样：
hh:mm:ss.iii或者这样：mm:ss.iii。
-
如果一个动画元素不带有dur属性，简单持续时间就是无限期的。请注意：如果一个简单持续时间是无限期的，则插值不能起作用（虽然它对 {{ SVGElement("set") }} 元素依然是有用的）。
示例
- -元素
- -下列元素可以使用dur属性：
-
-
- 动画元素 » -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/dur/index.md b/files/zh-cn/web/svg/attribute/dur/index.md new file mode 100644 index 00000000000000..411556c1a76772 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/dur/index.md @@ -0,0 +1,37 @@ +--- +title: dur +slug: Web/SVG/Attribute/dur +tags: + - SVG + - SVG 属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/dur +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +该属性标识了动画的简单持续时间。 + +## 用法 + +| 类别 | 动画定时属性 | +| -------- | --------------------------------------------------------------------------- | +| 值 | [dx 属性表示一个元素或其内容在 x 轴方向上的偏移，偏移量取决于设置该属性的元素。
对于{{SVGElement("feOffset")}}元素，它的值代表所有输入的图像的偏移量之和。这个总和被表达在由{{SVGElement("filter")}}元素的{{SVGAttr("primitiveUnits")}}属性定义的坐标系中。
- -对于{{SVGElement("glyphRef")}}元素，它的值代表该符号在字体坐标系中 x 轴上的相对坐标。
- -对于{{SVGElement("text")}}、{{SVGElement("tspan")}}、{{SVGElement("tref")}}和{{SVGElement("altGlyph")}}元素，由于这些元素允许设置<list-of-length>，所以更复杂。
- -如果只提供了一个<length>，当前文本位置会沿着坐标系内 x 轴方向偏移<length> 。
- -如果提供了一个由逗号或者空格分隔的<length>列表，列表中的值将会表示前 n 个字符沿 x 轴方向偏移的增量。因此，当前文本位置也因为绘制当前{{SVGElement("text")}}元素而沿 x 轴方向偏移。
- -如果在<length>列表中有更多的字符，那么对于每个字符，都有
- --
-
- 如果祖先{{SVGElement("text")}}或{{SVGElement("tspan")}}元素对于给定的字符，通过 dx 的属性指定了相对 x 坐标，那么当前文本位置会沿坐标系的 x 轴方向偏移该数值（最近的祖先具有优先级） -
- 否则没有额外的 x 轴方向的偏移发生 -
用法上下文
- -| 分类 | -无 | -
|---|---|
| 数值类型 | -<number> | T<.2Fvar>s"><list-of-length> | -
| 可变 | -是 | -
| 规范文档 | -SVG 1.1 (2nd Edition): altGlyph element - SVG 1.1 (2nd Edition): feOffset element - SVG 1.1 (2nd Edition): glyphRef element - SVG 1.1 (2nd Edition): text element - SVG 1.1 (2nd Edition): tspan element |
-
元素
- -这些元素可以使用 dx 属性
- --
-
- {{ SVGElement("altGlyph") }} -
- {{ SVGElement("feOffset") }} -
- {{ SVGElement("glyphRef") }} -
- {{ SVGElement("text") }} -
- {{ SVGElement("tref") }} -
- {{ SVGElement("tspan") }} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/dx/index.md b/files/zh-cn/web/svg/attribute/dx/index.md new file mode 100644 index 00000000000000..cca9f9be5b09c6 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/dx/index.md @@ -0,0 +1,49 @@ +--- +title: dx +slug: Web/SVG/Attribute/dx +tags: + - SVG + - SVG 标签 +translation_of: Web/SVG/Attribute/dx +--- +« [SVG 属性参考汇总](/en/SVG/Attribute) + +`dx 属性表示一个元素或其内容在 x 轴方向上的偏移，偏移量取决于设置该属性的元素。` + +对于{{SVGElement("feOffset")}}元素，它的值代表所有输入的图像的偏移量之和。这个总和被表达在由{{SVGElement("filter")}}元素的{{SVGAttr("primitiveUnits")}}属性定义的坐标系中。 + +对于{{SVGElement("glyphRef")}}元素，它的值代表该符号在字体坐标系中 x 轴上的相对坐标。 + +对于{{SVGElement("text")}}、{{SVGElement("tspan")}}、{{SVGElement("tref")}}和{{SVGElement("altGlyph")}}元素，由于这些元素允许设置[\edgeMode属性确定了当核心位于输入图像的边缘或贴近输入图像的边缘时，如何取用颜色值用于扩展输入图像，从而可以应用矩阵操作。
如果没有指定edgeMode属性，等效于值被指定为duplicate。
用法
- -| 类别 | -无 | -
|---|---|
| 值 | -duplicate | wrap | none | -
| 可变性 | -Yes | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
-
-
- duplicate -
- 它指示输入图像沿着每条边扩展，复制输入图像的给定边缘上的颜色值。 -
- wrap -
- 它指示扩展输入图像，从图像相对的边缘取色。 -
- none -
- 它指示扩展输入图像，用 0 作为 RGBA 的像素值。 -
示例
- -元素
- -以下元素可以使用edgeMode属性：
-
-
- {{ SVGElement("feConvolveMatrix") }} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/edgemode/index.md b/files/zh-cn/web/svg/attribute/edgemode/index.md new file mode 100644 index 00000000000000..8ba5aa520e2adc --- /dev/null +++ b/files/zh-cn/web/svg/attribute/edgemode/index.md @@ -0,0 +1,43 @@ +--- +title: edgeMode +slug: Web/SVG/Attribute/edgeMode +tags: + - SVG + - SVG 属性 + - 滤镜 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/edgeMode +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +`edgeMode`属性确定了当核心位于输入图像的边缘或贴近输入图像的边缘时，如何取用颜色值用于扩展输入图像，从而可以应用矩阵操作。 + +如果没有指定`edgeMode`属性，等效于值被指定为`duplicate`。 + +## 用法 + +| 类别 | 无 | +| -------- | --------------------------------------------------------------------------------------------------------- | +| 值 | **duplicate** \| wrap \| none | +| 可变性 | Yes | +| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementEdgeModeAttribute) | + +- duplicate + - : 它指示输入图像沿着每条边扩展，复制输入图像的给定边缘上的颜色值。 +- wrap + - : 它指示扩展输入图像，从图像相对的边缘取色。 +- none + - : 它指示扩展输入图像，用 0 作为 RGBA 的像素值。 + +## 示例 + +## 元素 + +以下元素可以使用`edgeMode`属性： + +- {{ SVGElement("feConvolveMatrix") }} + +## 规范 + +{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/enable-background/index.html b/files/zh-cn/web/svg/attribute/enable-background/index.html deleted file mode 100644 index ae270d3938f146..00000000000000 --- a/files/zh-cn/web/svg/attribute/enable-background/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: enable-background -slug: Web/SVG/Attribute/enable-background -translation_of: Web/SVG/Attribute/enable-background ---- -{{SVGRef}} {{deprecated_header("SVG 2")}}
-
-该enable-background属性指定如何管理背景图像的累积。
注意：作为演示文稿属性，enable-background可以用作 CSS 属性。
作为表示属性，它可以应用于任何元素，但仅对以下 11 个元素有效：{{SVGElement("a")}}，{{SVGElement("defs")}}，{{SVGElement("字形")}}，{{SVGElement("g")}}，{{SVGElement("marker")}}，{{SVGElement("mask")}}，{{SVGElement("missing-glyph")}}，{{SVGElement("pattern")}}，{{SVGElement("svg")}}，{{SVGElement("switch")}}和{{SVGElement("symbol")}}}
- -上下文注释
- -| 值 | -accumulate| new[ <x> <y> <width> <height>]？ |
-
|---|---|
| 默认值 | -accumulate |
-
| 可动画的 | -没有 | -
-
-
accumulate
- -
-
如果祖先容器元素的属性值为
- -enable-background: new，则当前容器元素内的所有图形元素都将呈现到父容器元素的背景图像画布上以及目标设备上。否则，没有当前的背景图像画布，因此图形元素仅渲染到目标设备上。
-
- new [ <x> <y> <width> <height> ]?
- -
-
该值使当前容器元素的子代能够访问背景图像。
- -它还指示建立了新的（即最初为透明的黑色）背景图像画布，并且实际上，除了将当前容器元素的所有子对象呈现到目标设备上之外，还应将其呈现到新的背景图像画布中。
- -The optional
-<x>,<y>,<width>, and<height>parameters are<number>values that indicate the subregion of the container elementʼs user space where access to the background image is allowed to happen. Those values act as a clipping rectangle on the background image canvas.
- Negative values for<width>or<height>are forbidden. If one, two, or three values are specified or if neither<width>nor<height>are specified, theBackgroundImageandBackgroundAlphaof a filter primitive are processed as if background image processing were not enabled.
-
Specifications
- -{{Specifications}} - -Browser compatibility
- -{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/enable-background/index.md b/files/zh-cn/web/svg/attribute/enable-background/index.md new file mode 100644 index 00000000000000..0c58f0bdeb697c --- /dev/null +++ b/files/zh-cn/web/svg/attribute/enable-background/index.md @@ -0,0 +1,33 @@ +--- +title: enable-background +slug: Web/SVG/Attribute/enable-background +translation_of: Web/SVG/Attribute/enable-background +--- +{{SVGRef}} {{deprecated_header("SVG 2")}} + +该**`enable-background`**属性指定如何管理背景图像的累积。 + +**注意：**作为演示文稿属性，`enable-background`可以用作 CSS 属性。 + +作为表示属性，它可以应用于任何元素，但仅对以下 11 个元素有效：{{SVGElement("a")}}，{{SVGElement("defs")}}，{{SVGElement("字形")}}，{{SVGElement("g")}}，{{SVGElement("marker")}}，{{SVGElement("mask")}}，{{SVGElement("missing-glyph")}}，{{SVGElement("pattern")}}，{{SVGElement("svg")}}，{{SVGElement("switch")}}和{{SVGElement("symbol")}}} + +## 上下文注释 + +| 值 | `accumulate`\| `new`[ `这个属性定义了一个动画的结束值，可以约束激活持续时间。
- -这个属性值是一个分号分隔的数列值。每个单独值可以是定义在{{ SVGAttr("begin") }}属性中同种类型。
- -用法
- -| 类别 | -动画定时属性 | -
|---|---|
| 值 | -<End-value-list> | -
| 可变性 | -No | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
欲知在<end-value-list>中允许用哪些值，请阅读{{ SVGAttr("begin") }}属性。
示例
- -元素
- -下列元素可以使用end属性：
-
-
- Animation elements » -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/end/index.md b/files/zh-cn/web/svg/attribute/end/index.md new file mode 100644 index 00000000000000..3aab401ebaa0dc --- /dev/null +++ b/files/zh-cn/web/svg/attribute/end/index.md @@ -0,0 +1,36 @@ +--- +title: end +slug: Web/SVG/Attribute/end +tags: + - SVG + - SVG 属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/end +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +这个属性定义了一个动画的结束值，可以约束激活持续时间。 + +这个属性值是一个分号分隔的数列值。每个单独值可以是定义在{{ SVGAttr("begin") }}属性中同种类型。 + +## 用法 + +| 类别 | 动画定时属性 | +| -------- | --------------------------------------------------------------------------- | +| 值 |该属性指定了填色的不透明度或当前对象的内容物的不透明度。
- -用法
- -| 类别 | -外观属性 | -
|---|---|
| 值 | -<opacity-value> | inherit | -
| 初始值 | -1 | -
| 可变性 | -Yes | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
示例
- -元素
- -下列元素可以使用fill-opacity属性：
规范
- -{{Specifications}} - -参见
- --
-
- {{ SVGAttr("stroke-opacity") }} -
- {{ SVGAttr("opacity") }} -
fill-rule 是一个外观属性，它定义了用来确定一个多边形内部区域的算法。
-
-
-注意：作为一个外观属性，fill-rule 可以被用于 CSS。
-作为一个外观属性，它可以被应用于任何元素，但只会在这八个元素中有效：{{SVGElement('altGlyph')}}、{{SVGElement('path')}}、{{SVGElement('polygon')}}、{{SVGElement('polyline')}}、{{SVGElement('text')}}、{{SVGElement('textPath')}}、{{SVGElement('tref')}} 和 {{SVGElement('tspan')}}。
- -如何判断一个路径组成的多边形的内部区域，从而给它上色，对于一个简单的、没有交错的路径来说，是很显然的；然而，对于一个更为复杂的路径，比如一条与自身相交的路径，或者是这条路径上的其中一段将另一段包围着，要解释什么是“内部”，就不再这么显然了。
- -
-
-
-
-
-
-html,body,svg { height:100% }
-<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> - <!-- fill-rule 的默认值 --> - <polygon fill-rule="nonzero" stroke="red" - points="50,0 21,90 98,35 2,35 79,90"/> - - <!-- - 从这个形状的中心到无穷远处有两条路径段（红色部分），因此 - 该区域被认为是形状外部，并且没有被填充。 - --> - <polygon fill-rule="evenodd" stroke="red" - points="150,0 121,90 198,35 102,35 179,90"/> -</svg>- -
{{EmbedLiveSample('topExample', '100%', 200)}}
-用法
- -| 类别 | -外观属性 | -
|---|---|
| 值 | -nonzero | evenodd | -
| 默认值 | -nonzero | -
| 可变性 | -Yes | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
fill-rule 属性为如何确定一个形状的内部（即可以被填充的区域）提供了两个可选值：
-
-
-
-
nonzero
-
-
这个值确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。
- -Example
- -
-
-
-
-
-
-html,body,svg { height:100% }
-<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> - <!-- nonzero 填充规则被用于路径段会相交的形状上的效果 --> - <polygon fill-rule="nonzero" stroke="red" - points="50,0 21,90 98,35 2,35 79,90"/> - - <!-- - nonzero 填充规则被用于一个形状在另一形状内部的效果 - 这两个正方形的路径段方向相同（都是顺时针） - --> - <path fill-rule="nonzero" stroke="red" - d="M110,0 h90 v90 h-90 z - M130,20 h50 v50 h-50 z"/> - - <!-- - 这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反 - 外面的正方形是顺时针，里面的正方形则是逆时针 - --> - <path fill-rule="nonzero" stroke="red" - d="M210,0 h90 v90 h-90 z - M230,20 v50 h50 v-50 z"/> -</svg>-
{{EmbedLiveSample('nonzero', '100%', 200)}}
- --
-
-
-
evenodd
-
-
这个值用确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。
- -Example
- -
-
-
-
-
-
-html,body,svg { height:100% }
-<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> - <!-- evenodd 填充规则被用于路径段会相交的形状上的效果 --> - <polygon fill-rule="evenodd" stroke="red" - points="50,0 21,90 98,35 2,35 79,90"/> - - <!-- - evenodd 填充规则被用于一个形状在另一形状内部的效果 - 这两个正方形的路径段方向相同（都是顺时针） - --> - <path fill-rule="evenodd" stroke="red" - d="M110,0 h90 v90 h-90 z - M130,20 h50 v50 h-50 z"/> - - <!-- - 这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反 - 外面的正方形是顺时针，里面的正方形则是逆时针 - --> - <path fill-rule="evenodd" stroke="red" - d="M210,0 h90 v90 h-90 z - M230,20 v50 h50 v-50 z"/> -</svg>-
{{EmbedLiveSample('evenodd', '100%', 200)}}
- -规范
- -{{Specifications}} - -浏览器兼容性
- -{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/fill-rule/index.md b/files/zh-cn/web/svg/attribute/fill-rule/index.md new file mode 100644 index 00000000000000..6619ba423eaa24 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fill-rule/index.md @@ -0,0 +1,134 @@ +--- +title: fill-rule +slug: Web/SVG/Attribute/fill-rule +tags: + - SVG + - SVG 属性 + - 参考 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/fill-rule +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +**`fill-rule`** 是一个外观属性，它定义了用来确定一个多边形内部区域的算法。 + +> **备注：** 作为一个外观属性，fill-rule 可以被用于 CSS。 + +作为一个外观属性，它可以被应用于任何元素，但只会在这八个元素中有效：{{SVGElement('altGlyph')}}、{{SVGElement('path')}}、{{SVGElement('polygon')}}、{{SVGElement('polyline')}}、{{SVGElement('text')}}、{{SVGElement('textPath')}}、{{SVGElement('tref')}} 和 {{SVGElement('tspan')}}。 + +如何判断一个路径组成的多边形的内部区域，从而给它上色，对于一个简单的、没有交错的路径来说，是很显然的；然而，对于一个更为复杂的路径，比如一条与自身相交的路径，或者是这条路径上的其中一段将另一段包围着，要解释什么是“内部”，就不再这么显然了。 + +## 示例 + +```css hidden +html,body,svg { height:100% } +``` + +```html + +``` + +{{EmbedLiveSample('示例', '100%', 200)}} + +## 用法 + +| 类别 | 外观属性 | +| -------- | -------------------------------------------------------------------------------- | +| 值 | nonzero \| evenodd | +| 默认值 | nonzero | +| 可变性 | Yes | +| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/painting.html#FillRuleProperty) | + +`fill-rule` 属性为如何确定一个形状的内部（即可以被填充的区域）提供了两个可选值： + +### nonzero + +这个值确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。 + +#### Example + +```css hidden +html,body,svg { height:100% } +``` + +```html + +``` + +{{EmbedLiveSample('nonzero', '100%', 200)}} + +### evenodd + +这个值用确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。 + +#### Example + +```css hidden +html,body,svg { height:100% } +``` + +```html + +``` + +{{EmbedLiveSample('evenodd', '100%', 200)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} diff --git a/files/zh-cn/web/svg/attribute/fill/index.html b/files/zh-cn/web/svg/attribute/fill/index.html deleted file mode 100644 index de0b1d8ea6742f..00000000000000 --- a/files/zh-cn/web/svg/attribute/fill/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: fill -slug: Web/SVG/Attribute/fill -tags: - - SVG - - SVG 属性 - - 需要兼容性表 -translation_of: Web/SVG/Attribute/fill ---- - - -fill属性根据它的使用环境，拥有两个意义。
默认地，当动画元素结束时，目标元素的外观属性不再应用该效果。在动画元素结束后，要还保持这个动画的的值，就需要用到fill属性。
对于形状元素和文本，fill属性是外观属性，用来定义给定图形元素内部的颜色。哪一块算是“内部”取决于形状本身以及{{ SVGAttr("fill-rule") }} 属性的值。作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。
用法
- -对动画元素
- -| 类别 | -动画定时属性 | -
|---|---|
| 值 | -remove | freeze | -
| 可变性 | -No | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
-
-
- remove（默认值） -
- 在动画的激活持续时间结束后，动画效果会移除（不再应用）。在动画的激活结束后，动画不再对目标元素有影响（除非动画重新开始）。 -
- freeze -
- 在动画激活持续时间结束后，文档持续时间的剩余时间里（或者直到动画重新开始）动画效果会“冻结”着。 -
对形状元素
- -| 类别 | -外观属性 | -
|---|---|
| 值 | -<paint> | -
| 可变性 | -Yes | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
示例
- -元素
- -下列元素可以使用fill属性：
属性filter定义了由{{ SVGElement("filter") }}元素定义滤镜效果，该滤镜效果将应用到该元素上。
作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。请阅读{{ cssxref("filter","CSS filter") }}以了解更多信息。
- -用法
- -| 类别 | -外观属性 | -
|---|---|
| 值 | -<funciri> | none | inherit | -
| 可变性 | -Yes | -
| 规范文档 | -SVG 1.1 (2nd Edition) | -
-
-
- <funciri> -
- 元素的引用，它定义了将要应用到该元素的滤镜效果。 -
- none -
- 不对该元素应用任何滤镜效果。 -
元素
- -下列元素可以使用filter属性：
-
-
- 图形元素 » -
- {{ SVGElement("a") }} -
- {{ SVGElement("defs") }} -
- {{ SVGElement("glyph") }} -
- {{ SVGElement("g") }} -
- {{ SVGElement("marker") }} -
- {{ SVGElement("missing-glyph") }} -
- {{ SVGElement("pattern") }} -
- {{ SVGElement("svg") }} -
- {{ SVGElement("switch") }} -
- {{ SVGElement("symbol") }} -
规范
- -{{Specifications}} - -参见
- --
-
- {{ cssxref("filter","CSS filter") }} -
« SVG Attribute reference home
- -filterUnits 属性定义{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和{{ SVGAttr("height") }}使用的坐标系系统。
- -如果 filterUnits 属性未指定，那么效果如同指定了值为objectBoundingBox.
Usage context
- -| Categories | -None | -
|---|---|
| Value | -userSpaceOnUse | objectBoundingBox |
-
| Animatable | -Yes | -
| Normative document | -SVG 1.1 (2nd Edition) | -
-
-
- userSpaceOnUse -
- {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和 {{ SVGAttr("height") }} 表示当前坐标系统中的值，这些值表示{{ SVGElement("filter") }}元素在当前用户坐标系中的位置和大小 (例如通过{{ SVGAttr("filter") }}引用该{{ SVGElement("filter") }}元素的元素所在的坐标系系统). -
- objectBoundingBox -
- 在这种情况下，{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和 {{ SVGAttr("height") }}biao 表示引用{{ SVGElement("filter") }}元素的元素的 baow 包围盒的分数或百分比。 -
Examples
- -Elements
- -下面这些元素可以使用 filterUnits 属性：
- --
-
- {{ SVGElement("filter") }} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/filterunits/index.md b/files/zh-cn/web/svg/attribute/filterunits/index.md new file mode 100644 index 00000000000000..578acf1d97eed3 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/filterunits/index.md @@ -0,0 +1,35 @@ +--- +title: filterUnits +slug: Web/SVG/Attribute/filterUnits +translation_of: Web/SVG/Attribute/filterUnits +--- +« [SVG Attribute reference home](/en/SVG/Attribute) + +filterUnits 属性定义{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和{{ SVGAttr("height") }}使用的坐标系系统。 + +如果 filterUnits 属性未指定，那么效果如同指定了值为`objectBoundingBox.` + +## Usage context + +| Categories | _None_ | +| ------------------ | -------------------------------------------------------------------------------------------------- | +| Value | `userSpaceOnUse` \| **`objectBoundingBox`** | +| Animatable | Yes | +| Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/filters.html#FilterElementFilterUnitsAttribute) | + +- userSpaceOnUse + - : {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和 {{ SVGAttr("height") }} 表示当前坐标系统中的值，这些值表示{{ SVGElement("filter") }}元素在当前用户坐标系中的位置和大小 (例如通过{{ SVGAttr("filter") }}引用该{{ SVGElement("filter") }}元素的元素所在的坐标系系统). +- objectBoundingBox + - : 在这种情况下，{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和 {{ SVGAttr("height") }}biao 表示引用{{ SVGElement("filter") }}元素的元素的 baow 包围盒的分数或百分比。 + +## Examples + +## Elements + +下面这些元素可以使用 filterUnits 属性： + +- {{ SVGElement("filter") }} + +## 规范 + +{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/font-family/index.html b/files/zh-cn/web/svg/attribute/font-family/index.html deleted file mode 100644 index 48827e024f7fcc..00000000000000 --- a/files/zh-cn/web/svg/attribute/font-family/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: font-family -slug: Web/SVG/Attribute/font-family -tags: - - SVG 属性 -translation_of: Web/SVG/Attribute/font-family ---- -« SVG Attribute reference home
-font-family 属性 (attribute) 指出哪个字体集将被用来渲染文字， 在带优先级的字体集名称列表被指定，还有或没有泛指的字符集名称。(specified as a prioritized list of font family names and/or generic family names)。
作为一个表现层的属性，font-family属性也可以被直接用在 CSS 样式表中，详见 {{ cssxref("font-family","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
-<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 » -
规范
- -{{Specifications}} - -另见
--
-
- {{ cssxref("font-family","CSS font-family") }} -
This is a paragraph, shown in the Times New Roman font.
+This is a paragraph, shown in the Arial font.
+``` + +## 元素 + +以下元素可以使用`font-family` 属性 (attribute) + +- [Text content elements](/en/SVG/Element#Text_content_elements) » + +## 规范 + +{{Specifications}} + +## 另见 + +- {{ cssxref("font-family","CSS font-family") }} diff --git a/files/zh-cn/web/svg/attribute/fr/index.html b/files/zh-cn/web/svg/attribute/fr/index.html deleted file mode 100644 index 059e763ae3cd90..00000000000000 --- a/files/zh-cn/web/svg/attribute/fr/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: fr -slug: Web/SVG/Attribute/fr -tags: - - SVG 属性 - - SVG 径向渐变 - - SVG 径向渐变焦点 -translation_of: Web/SVG/Attribute/fr ---- - - -对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的半径。若该属性没有被定义，默认值为 0%。
- -用法
- -| 类别 | -无 | -
|---|---|
| 值 | -<length> | -
| 可变性 | -非 | -
| 规范文档 | -SVG 1.1 (2nd Edition): The radialGradient element | -
示例
- -- -<?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 属性：
-
-
- {{ SVGElement("radialGradient") }} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/fr/index.md b/files/zh-cn/web/svg/attribute/fr/index.md new file mode 100644 index 00000000000000..b9b17c913ffab2 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fr/index.md @@ -0,0 +1,57 @@ +--- +title: fr +slug: Web/SVG/Attribute/fr +tags: + - SVG 属性 + - SVG 径向渐变 + - SVG 径向渐变焦点 +translation_of: Web/SVG/Attribute/fr +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的半径。若该属性没有被定义，默认值为 0%。 + +## 用法 + +| 类别 | 无 | +| -------- | ---------------------------------------------------------------------------------------------------------------------------- | +| 值 | [« SVG 属性参考
- -这个属性是在 svg 动画发生过程中被修改的属性的初始值。当同时使用了这个属性和 to 属性，animation 将会修改这个这个设定的动画属性的值从 from 属性的值到 to 属性的值。
- -用法
- -| 类别 | -动画属性值 | -
|---|---|
| 值 | -<value> | -
| 动画特征 | -No | -
| 标准化文档 | -SVG 1.1 (2nd Edition) | -
这个属性的准确的值类型取决于这个属性将要被用作动画的属性的值。
- -例子
- -这个例子给 from 属性了一个 100 的值，让动画从 100 的宽度开始运行。
- -<?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 属性
- --
-
- {{ SVGElement("animate") }} -
- {{ SVGElement("animateColor") }} -
- {{ SVGElement("animateMotion") }} -
- {{ SVGElement("animateTransform") }} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/from/index.md b/files/zh-cn/web/svg/attribute/from/index.md new file mode 100644 index 00000000000000..200c78a96946a8 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/from/index.md @@ -0,0 +1,52 @@ +--- +title: from +slug: Web/SVG/Attribute/From +translation_of: Web/SVG/Attribute/From +--- +« [SVG 属性参考](/en/SVG/Attribute) + +这个属性是在 svg 动画发生过程中被修改的属性的初始值。当同时使用了这个属性和 [to](/zh-CN/docs/Web/SVG/Attribute/To) 属性，animation 将会修改这个这个设定的动画属性的值从 from 属性的值到 to 属性的值。 + +## 用法 + +| 类别 | 动画属性值 | +| ---------- | ---------------------------------------------------------------------------- | +| 值 |对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。
- -用法
- -| 类别 | -无 | -
|---|---|
| 值 | -<coordinate> | -
| 可变性 | -非 | -
| 规范文档 | -SVG 1.1 (2nd Edition): The radialGradient element | -
示例
- -<?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 属性：
-
-
- {{ SVGElement("radialGradient") }} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/fx/index.md b/files/zh-cn/web/svg/attribute/fx/index.md new file mode 100644 index 00000000000000..363ff523acc20d --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fx/index.md @@ -0,0 +1,59 @@ +--- +title: fx +slug: Web/SVG/Attribute/fx +tags: + - SVG + - SVG 属性 + - SVG 径向渐变 + - SVG 渐变 + - SVG 渐变焦点 +translation_of: Web/SVG/Attribute/fx +--- +« [SVG 属性参考主页](/zh-CN/docs/web/SVG/Attribute) + +对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。 + +## 用法 + +| 类别 | 无 | +| -------- | ---------------------------------------------------------------------------------------------------------------------------- | +| 值 | [对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的 y 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。
- -用法
- -| 类别 | -无 | -
|---|---|
| 值 | -<coordinate> | -
| 可变性 | -非 | -
| 规范文档 | -SVG 1.1 (2nd Edition): The radialGradient element | -
{{ page("/en/SVG/Content_type","Coordinate") }}
- -示例
- -<?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>元素
- -下列元素可以使用 fy 属性：
-
-
- {{ SVGElement("radialGradient") }} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/fy/index.md b/files/zh-cn/web/svg/attribute/fy/index.md new file mode 100644 index 00000000000000..6669eef23bc2f3 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fy/index.md @@ -0,0 +1,60 @@ +--- +title: fy +slug: Web/SVG/Attribute/fy +tags: + - SVG 属性 + - SVG 径向渐变 + - SVG 径向渐变焦点 + - SVG 渐变属性 +translation_of: Web/SVG/Attribute/fy +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的 y 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。 + +## 用法 + +| 类别 | 无 | +| -------- | ---------------------------------------------------------------------------------------------------------------------------- | +| 值 | [该属性在用户坐标系统中标识了一个垂直长度。该坐标的确切效果依赖于每个元素。大多数时候，它体现引用元素的矩形区域的高度（请阅读每个元素的文档以了解例外情况）。
- -除了{{ SVGElement("svg") }}元素之外，别的元素都必须指定该属性，{{ SVGElement("svg") }}的高度默认是100%，而{{ SVGElement("filter") }}元素以及{{ SVGElement("mask") }}元素的默认高度是120%。
- -用法
- -| 类别 | -无 | -
|---|---|
| 值 | -<length> | -
| 可变性 | -Yes | -
{{ page("/zh-CN/Content_type","Length") }}
- -示例
- -<?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 属性：
-
-
- 滤镜元素 » -
- {{ SVGElement("filter") }} -
- {{ SVGElement("foreignObject") }} -
- {{ SVGElement("image") }} -
- {{ SVGElement("pattern") }} -
- {{ SVGElement("rect") }} -
- {{ SVGElement("svg") }} -
- {{ SVGElement("use") }} -
- {{ SVGElement("mask") }} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/height/index.md b/files/zh-cn/web/svg/attribute/height/index.md new file mode 100644 index 00000000000000..a03ceb1170321e --- /dev/null +++ b/files/zh-cn/web/svg/attribute/height/index.md @@ -0,0 +1,53 @@ +--- +title: height +slug: Web/SVG/Attribute/height +tags: + - NeedsCompatTable + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/height +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +该属性在用户坐标系统中标识了一个垂直长度。该坐标的确切效果依赖于每个元素。大多数时候，它体现引用元素的矩形区域的高度（请阅读每个元素的文档以了解例外情况）。 + +除了{{ SVGElement("svg") }}元素之外，别的元素都必须指定该属性，{{ SVGElement("svg") }}的高度默认是**100%**，而{{ SVGElement("filter") }}元素以及{{ SVGElement("mask") }}元素的默认高度是**120%**。 + +## 用法 + +| 类别 | 无 | +| ------ | --------------------------------------- | +| 值 | [{{SVGRef}}
-
-id 属性给予元素一个唯一名称。
所有元素均可使用该属性。
- -
-
-
-<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>
-
-
-{{EmbedLiveSample("topExample", "120", "120")}}
-用法说明
- -| 值 | -<id> | -
|---|---|
| 默认值 | -None | -
| 可动画 | -No | -
-
-
- <id> -
-
-
指定元素的 ID。 该 ID 在节点树中必须是唯一的，不能为空字符串，并且不能包含任何空格字符。
- --- - - -注意： 应当避免使用会被解析为 SVG 视图规范的
-id值（如MyDrawing.svg#svgView(viewBox(0,200,1000,1000))），或被解析为用作 URL 目标片段的基本媒体片段的id值。该属性取值必须在 XML 文档中有效。 独立的 SVG 文档使用 XML 1.0 语法，该语法指定有效的 ID 仅包含指定的字符（字母，数字和一些标点符号），开头不能是数字，点（.）字符或 连字符减号（-）。
-
-
规范
- -{{Specifications}} - -浏览器兼容性
- -{{Compat}}
- -参考
- --
-
- HTML
id
- - {{SVGAttr("class")}} -
« SVG Attribute reference home
-image-rendering 属性向浏览器提供了一个提示，即在图片处理时，如何进行速度 vs 质量之间的权衡。
-
- 作为一个显示属性，它也可以在 CSS 样式文件中作为属性而存在，请参考 {{ cssxref("image-rendering","CSS image-rendering") }} 获取更多的信息
使用语境
-| 类别 | -Presentation attribute | -
|---|---|
| 值 | -auto | optimizeSpeed | optimizeQuality | inherit | -
| 动画效果 | -Yes | -
-
-
- - auto -
- - 表示用户代理可以在速度和质量间做适当的权衡，但是质量将比速度更重要一些。 -
- - optimizeSpeed -
- - 表示用户代理应该更注重速度。 -
- - optimizeQuality -
- - 表示用户代理应该更注重质量 -
示例
-元素
-下面的元素可以能够使用 image-rendering 属性
-
-
- {{ SVGElement("image") }} -
规范
- -{{Specifications}} - -参考
--
-
- {{ cssxref("image-rendering","CSS image-rendering") }} -
« SVG Attribute reference home
- -in 属性标识输入的原语。
- -其值可以是下面六种关键词中的一种，或者是一个字符串匹配在同一个{{SVGElement("filter")}}元素中前面的原语的{{SVGAttr("result")}} 属性值。如果没有提供值并且这是 filter 中第一个原语，那么原语将相当于使用 SourceGraphic 作为输入值。如果没有提供值并且这不是第一个原语，那么原语将使用前面原语的 result 属性值作为输入。
-
- 如果{{SVGAttr("result")}}的值在同一个{{SVGElement("filter")}}中出现多次，那么将使用前面的距离使用该{{SVGAttr("result")}}值的原语最近的该 result 值的原语作为输入。
除了 SourceGraphic 和<filter-primitive-reference> (引用原语) , 关键词都没有在现代浏览器中实现.(译者注:SourceAlpha 也被现代浏览器支持)
- -Usage context
- -| Categories | -None | -
|---|---|
| Value | -SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> |
-
| Animatable | -Yes | -
-
-
- SourceGraphic -
- 该关键词表示图形元素自身将作为{{SVGElement("filter")}}原语的原始输入。 -
- SourceAlpha -
- 该关键词表示图形元素自身将作为{{SVGElement("filter")}}原语的原始输入. SourceAlpha 与 SourceGraphic 具有相同的规则除了 SourceAlpha 只使用元素的透明度。 -
- BackgroundImage -
- 该关键词表示 filter 元素当前底下的区域的图形快照将被调用。 -
- BackgroundAlpha -
- 跟 BackgroundImage 相同除了只使用透明度。 -
- FillPaint -
- This keyword represents the value of the {{SVGAttr("fill")}} property on the target element for the filter effect. In many cases, the
FillPaintis 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 {{SVGAttr("stroke")}} property on the target element for the filter effect. In many cases, the
StrokePaintis 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 Content
- -<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>- -
效果
- -{{ EmbedLiveSample('Workaround_for_backgroundImage') }}
- -元素
- -下列元素可以使用该属性
- --
-
- {{SVGElement("feBlend")}} -
- {{SVGElement("feColorMatrix")}} -
- {{SVGElement("feComponentTransfer")}} -
- {{SVGElement("feComposite")}} -
- {{SVGElement("feConvolveMatrix")}} -
- {{SVGElement("feDiffuseLighting")}} -
- {{SVGElement("feDisplacementMap")}} -
- {{SVGElement("feGaussianBlur")}} -
- {{SVGElement("feMorphology")}} -
- {{SVGElement("feOffset")}} -
- {{SVGElement("feSpecularLighting")}} -
- {{SVGElement("feTile")}} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/in/index.md b/files/zh-cn/web/svg/attribute/in/index.md new file mode 100644 index 00000000000000..f8dfefda985752 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/in/index.md @@ -0,0 +1,91 @@ +--- +title: in +slug: Web/SVG/Attribute/in +translation_of: Web/SVG/Attribute/in +--- +« [SVG Attribute reference home](/en/SVG/Attribute) + +in 属性标识输入的原语。 + +其值可以是下面六种关键词中的一种，或者是一个字符串匹配在同一个{{SVGElement("filter")}}元素中前面的原语的{{SVGAttr("result")}} 属性值。如果没有提供值并且这是 filter 中第一个原语，那么原语将相当于使用 SourceGraphic 作为输入值。如果没有提供值并且这不是第一个原语，那么原语将使用前面原语的 result 属性值作为输入。 + +如果{{SVGAttr("result")}}的值在同一个{{SVGElement("filter")}}中出现多次，那么将使用前面的距离使用该{{SVGAttr("result")}}值的原语最近的该 result 值的原语作为输入。 + +除了 SourceGraphic 和**\
+
+
+
+
+```
+
+### 效果
+
+{{ EmbedLiveSample('Workaround_for_backgroundImage') }}
+
+## 元素
+
+下列元素可以使用该属性
+
+- {{SVGElement("feBlend")}}
+- {{SVGElement("feColorMatrix")}}
+- {{SVGElement("feComponentTransfer")}}
+- {{SVGElement("feComposite")}}
+- {{SVGElement("feConvolveMatrix")}}
+- {{SVGElement("feDiffuseLighting")}}
+- {{SVGElement("feDisplacementMap")}}
+- {{SVGElement("feGaussianBlur")}}
+- {{SVGElement("feMorphology")}}
+- {{SVGElement("feOffset")}}
+- {{SVGElement("feSpecularLighting")}}
+- {{SVGElement("feTile")}}
+
+## 规范
+
+{{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/index.html b/files/zh-cn/web/svg/attribute/index.html
deleted file mode 100644
index 35931d1be4cbe1..00000000000000
--- a/files/zh-cn/web/svg/attribute/index.html
+++ /dev/null
@@ -1,476 +0,0 @@
----
-title: SVG 属性参考
-slug: Web/SVG/Attribute
-tags:
- - SVG
- - SVG Attribute
- - SVG Reference
- - SVG 属性
- - 矢量图形
-translation_of: Web/SVG/Attribute
----
-{{SVGRef}}
-
-SVG 元素可以通过属性来修改，这些属性指定有关如何处理或呈现元素的详细信息。 下面列出了 SVG 中所有的可用属性以及参考文档的链接，以帮助您了解哪些元素支持它们，以及它们如何工作。
- -SVG 属性（从 A-Z 排序）
- -
-
-
-A
- --
-
- {{SVGAttr("accent-height")}} -
- {{SVGAttr("accumulate")}} -
- {{SVGAttr("additive")}} -
- {{SVGAttr("alignment-baseline")}} -
- {{SVGAttr("allowReorder")}} -
- {{SVGAttr("alphabetic")}} -
- {{SVGAttr("amplitude")}} -
- {{SVGAttr("arabic-form")}} -
- {{SVGAttr("ascent")}} -
- {{SVGAttr("attributeName")}} -
- {{SVGAttr("attributeType")}} -
- {{SVGAttr("autoReverse")}} -
- {{SVGAttr("azimuth")}} -
B
- --
-
- {{SVGAttr("baseFrequency")}} -
- {{SVGAttr("baseline-shift")}} -
- {{SVGAttr("baseProfile")}} -
- {{SVGAttr("bbox")}} -
- {{SVGAttr("begin")}} -
- {{SVGAttr("bias")}} -
- {{SVGAttr("by")}} -
C
- --
-
- {{SVGAttr("calcMode")}} -
- {{SVGAttr("cap-height")}} -
- {{SVGAttr("class")}} -
- {{SVGAttr("clip")}} -
- {{SVGAttr("clipPathUnits")}} -
- {{SVGAttr("clip-path")}} -
- {{SVGAttr("clip-rule")}} -
- {{SVGAttr("color")}} -
- {{SVGAttr("color-interpolation")}} -
- {{SVGAttr("color-interpolation-filters")}} -
- {{SVGAttr("color-profile")}} -
- {{SVGAttr("color-rendering")}} -
- {{SVGAttr("contentScriptType")}} -
- {{SVGAttr("contentStyleType")}} -
- {{SVGAttr("cursor")}} -
- {{SVGAttr("cx")}} -
- {{SVGAttr("cy")}} -
D
- --
-
- {{SVGAttr("d")}} -
- {{SVGAttr("decelerate")}} -
- {{SVGAttr("descent")}} -
- {{SVGAttr("diffuseConstant")}} -
- {{SVGAttr("direction")}} -
- {{SVGAttr("display")}} -
- {{SVGAttr("divisor")}} -
- {{SVGAttr("dominant-baseline")}} -
- {{SVGAttr("dur")}} -
- {{SVGAttr("dx")}} -
- {{SVGAttr("dy")}} -
E
- --
-
- {{SVGAttr("edgeMode")}} -
- {{SVGAttr("elevation")}} -
- {{SVGAttr("enable-background")}} -
- {{SVGAttr("end")}} -
- {{SVGAttr("exponent")}} -
- {{SVGAttr("externalResourcesRequired")}} -
F
- --
-
- {{SVGAttr("fill")}} -
- {{SVGAttr("fill-opacity")}} -
- {{SVGAttr("fill-rule")}} -
- {{SVGAttr("filter")}} -
- {{SVGAttr("filterRes")}} -
- {{SVGAttr("filterUnits")}} -
- {{SVGAttr("flood-color")}} -
- {{SVGAttr("flood-opacity")}} -
- {{SVGAttr("font-family")}} -
- {{SVGAttr("font-size")}} -
- {{SVGAttr("font-size-adjust")}} -
- {{SVGAttr("font-stretch")}} -
- {{SVGAttr("font-style")}} -
- {{SVGAttr("font-variant")}} -
- {{SVGAttr("font-weight")}} -
- {{SVGAttr("format")}} -
- {{SVGAttr("from")}} -
- {{SVGAttr("fr")}} -
- {{SVGAttr("fx")}} -
- {{SVGAttr("fy")}} -
G
- --
-
- {{SVGAttr("g1")}} -
- {{SVGAttr("g2")}} -
- {{SVGAttr("glyph-name")}} -
- {{SVGAttr("glyph-orientation-horizontal")}} -
- {{SVGAttr("glyph-orientation-vertical")}} -
- {{SVGAttr("glyphRef")}} -
- {{SVGAttr("gradientTransform")}} -
- {{SVGAttr("gradientUnits")}} -
H
- --
-
- {{SVGAttr("hanging")}} -
- {{SVGAttr("height")}} -
- {{SVGAttr("href")}} -
- {{SVGAttr("hreflang")}} -
- {{SVGAttr("horiz-adv-x")}} -
- {{SVGAttr("horiz-origin-x")}} -
I
- --
-
- {{SVGAttr("id")}} -
- {{SVGAttr("ideographic")}} -
- {{SVGAttr("image-rendering")}} -
- {{SVGAttr("in")}} -
- {{SVGAttr("in2")}} -
- {{SVGAttr("intercept")}} -
K
- --
-
- {{SVGAttr("k")}} -
- {{SVGAttr("k1")}} -
- {{SVGAttr("k2")}} -
- {{SVGAttr("k3")}} -
- {{SVGAttr("k4")}} -
- {{SVGAttr("kernelMatrix")}} -
- {{SVGAttr("kernelUnitLength")}} -
- {{SVGAttr("kerning")}} -
- {{SVGAttr("keyPoints")}} -
- {{SVGAttr("keySplines")}} -
- {{SVGAttr("keyTimes")}} -
L
- --
-
- {{SVGAttr("lang")}} -
- {{SVGAttr("lengthAdjust")}} -
- {{SVGAttr("letter-spacing")}} -
- {{SVGAttr("lighting-color")}} -
- {{SVGAttr("limitingConeAngle")}} -
- {{SVGAttr("local")}} -
M
- --
-
- {{SVGAttr("marker-end")}} -
- {{SVGAttr("marker-mid")}} -
- {{SVGAttr("marker-start")}} -
- {{SVGAttr("markerHeight")}} -
- {{SVGAttr("markerUnits")}} -
- {{SVGAttr("markerWidth")}} -
- {{SVGAttr("mask")}} -
- {{SVGAttr("maskContentUnits")}} -
- {{SVGAttr("maskUnits")}} -
- {{SVGAttr("mathematical")}} -
- {{SVGAttr("max")}} -
- {{SVGAttr("media")}} -
- {{SVGAttr("method")}} -
- {{SVGAttr("min")}} -
- {{SVGAttr("mode")}} -
N
- --
-
- {{SVGAttr("name")}} -
- {{SVGAttr("numOctaves")}} -
O
- --
-
- {{SVGAttr("offset")}} -
- {{SVGAttr("opacity")}} -
- {{SVGAttr("operator")}} -
- {{SVGAttr("order")}} -
- {{SVGAttr("orient")}} -
- {{SVGAttr("orientation")}} -
- {{SVGAttr("origin")}} -
- {{SVGAttr("overflow")}} -
- {{SVGAttr("overline-position")}} -
- {{SVGAttr("overline-thickness")}} -
P
- --
-
- {{SVGAttr("panose-1")}} -
- {{SVGAttr("paint-order")}} -
- {{SVGAttr("path")}} -
- {{SVGAttr("pathLength")}} -
- {{SVGAttr("patternContentUnits")}} -
- {{SVGAttr("patternTransform")}} -
- {{SVGAttr("patternUnits")}} -
- {{SVGAttr("ping")}} -
- {{SVGAttr("pointer-events")}} -
- {{SVGAttr("points")}} -
- {{SVGAttr("pointsAtX")}} -
- {{SVGAttr("pointsAtY")}} -
- {{SVGAttr("pointsAtZ")}} -
- {{SVGAttr("preserveAlpha")}} -
- {{SVGAttr("preserveAspectRatio")}} -
- {{SVGAttr("primitiveUnits")}} -
R
- --
-
- {{SVGAttr("r")}} -
- {{SVGAttr("radius")}} -
- {{SVGAttr("referrerPolicy")}} -
- {{SVGAttr("refX")}} -
- {{SVGAttr("refY")}} -
- {{SVGAttr("rel")}} -
- {{SVGAttr("rendering-intent")}} -
- {{SVGAttr("repeatCount")}} -
- {{SVGAttr("repeatDur")}} -
- {{SVGAttr("requiredExtensions")}} -
- {{SVGAttr("requiredFeatures")}} -
- {{SVGAttr("restart")}} -
- {{SVGAttr("result")}} -
- {{SVGAttr("rotate")}} -
- {{SVGAttr("rx")}} -
- {{SVGAttr("ry")}} -
S
- --
-
- {{SVGAttr("scale")}} -
- {{SVGAttr("seed")}} -
- {{SVGAttr("shape-rendering")}} -
- {{SVGAttr("slope")}} -
- {{SVGAttr("spacing")}} -
- {{SVGAttr("specularConstant")}} -
- {{SVGAttr("specularExponent")}} -
- {{SVGAttr("speed")}} -
- {{SVGAttr("spreadMethod")}} -
- {{SVGAttr("startOffset")}} -
- {{SVGAttr("stdDeviation")}} -
- {{SVGAttr("stemh")}} -
- {{SVGAttr("stemv")}} -
- {{SVGAttr("stitchTiles")}} -
- {{SVGAttr("stop-color")}} -
- {{SVGAttr("stop-opacity")}} -
- {{SVGAttr("strikethrough-position")}} -
- {{SVGAttr("strikethrough-thickness")}} -
- {{SVGAttr("string")}} -
- {{SVGAttr("stroke")}} -
- {{SVGAttr("stroke-dasharray")}} -
- {{SVGAttr("stroke-dashoffset")}} -
- {{SVGAttr("stroke-linecap")}} -
- {{SVGAttr("stroke-linejoin")}} -
- {{SVGAttr("stroke-miterlimit")}} -
- {{SVGAttr("stroke-opacity")}} -
- {{SVGAttr("stroke-width")}} -
- {{SVGAttr("style")}} -
- {{SVGAttr("surfaceScale")}} -
- {{SVGAttr("systemLanguage")}} -
T
- --
-
- {{SVGAttr("tabindex")}} -
- {{SVGAttr("tableValues")}} -
- {{SVGAttr("target")}} -
- {{SVGAttr("targetX")}} -
- {{SVGAttr("targetY")}} -
- {{SVGAttr("text-anchor")}} -
- {{SVGAttr("text-decoration")}} -
- {{SVGAttr("text-rendering")}} -
- {{SVGAttr("textLength")}} -
- {{SVGAttr("to")}} -
- {{SVGAttr("transform")}} -
- {{SVGAttr("type")}} -
U
- --
-
- {{SVGAttr("u1")}} -
- {{SVGAttr("u2")}} -
- {{SVGAttr("underline-position")}} -
- {{SVGAttr("underline-thickness")}} -
- {{SVGAttr("unicode")}} -
- {{SVGAttr("unicode-bidi")}} -
- {{SVGAttr("unicode-range")}} -
- {{SVGAttr("units-per-em")}} -
V
- --
-
- {{SVGAttr("v-alphabetic")}} -
- {{SVGAttr("v-hanging")}} -
- {{SVGAttr("v-ideographic")}} -
- {{SVGAttr("v-mathematical")}} -
- {{SVGAttr("values")}} -
- {{SVGAttr("vector-effect")}} -
- {{SVGAttr("version")}} -
- {{SVGAttr("vert-adv-y")}} -
- {{SVGAttr("vert-origin-x")}} -
- {{SVGAttr("vert-origin-y")}} -
- {{SVGAttr("viewBox")}} -
- {{SVGAttr("viewTarget")}} -
- {{SVGAttr("visibility")}} -
W
- --
-
- {{SVGAttr("width")}} -
- {{SVGAttr("widths")}} -
- {{SVGAttr("word-spacing")}} -
- {{SVGAttr("writing-mode")}} -
X
- --
-
- {{SVGAttr("x")}} -
- {{SVGAttr("x-height")}} -
- {{SVGAttr("x1")}} -
- {{SVGAttr("x2")}} -
- {{SVGAttr("xChannelSelector")}} -
- {{SVGAttr("xlink:actuate")}} -
- {{SVGAttr("xlink:arcrole")}} -
- {{SVGAttr("xlink:href")}} -
- {{SVGAttr("xlink:role")}} -
- {{SVGAttr("xlink:show")}} -
- {{SVGAttr("xlink:title")}} -
- {{SVGAttr("xlink:type")}} -
- {{SVGAttr("xml:base")}} -
- {{SVGAttr("xml:lang")}} -
- {{SVGAttr("xml:space")}} -
Y
- --
-
- {{SVGAttr("y")}} -
- {{SVGAttr("y1")}} -
- {{SVGAttr("y2")}} -
- {{SVGAttr("yChannelSelector")}} -
Z
- --
-
- {{SVGAttr("z")}} -
- {{SVGAttr("zoomAndPan")}} -
SVG 属性（按类别分类）
- -Generic Attributes
- -核心属性
- -{{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}}
- -样式属性
- -{{SVGAttr("class")}}, {{SVGAttr("style")}}
- -条件处理属性
- -{{SVGAttr("externalResourcesRequired")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}.
- -XLink 属性
- -{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:type")}}, {{SVGAttr("xlink:role")}}, {{SVGAttr("xlink:arcrole")}}, {{SVGAttr("xlink:title")}}, {{SVGAttr("xlink:show")}}, {{SVGAttr("xlink:actuate")}}
- -显示属性
- -注意，所有 SVG 显示属性都可以作为 CSS 属性来使用。
-
-{{SVGAttr("alignment-baseline")}}, {{SVGAttr("baseline-shift")}}, {{SVGAttr("clip")}}, {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}, {{SVGAttr("color")}}, {{SVGAttr("color-interpolation")}}, {{SVGAttr("color-interpolation-filters")}}, {{SVGAttr("color-profile")}}, {{SVGAttr("color-rendering")}}, {{SVGAttr("cursor")}}, {{SVGAttr("direction")}}, {{SVGAttr("display")}}, {{SVGAttr("dominant-baseline")}}, {{SVGAttr("enable-background")}}, {{SVGAttr("fill")}}, {{SVGAttr("fill-opacity")}}, {{SVGAttr("fill-rule")}}, {{SVGAttr("filter")}}, {{SVGAttr("flood-color")}}, {{SVGAttr("flood-opacity")}}, {{SVGAttr("font-family")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("glyph-orientation-horizontal")}}, {{SVGAttr("glyph-orientation-vertical")}}, {{SVGAttr("image-rendering")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("lighting-color")}}, {{SVGAttr("marker-end")}}, {{SVGAttr("marker-mid")}}, {{SVGAttr("marker-start")}}, {{SVGAttr("mask")}}, {{SVGAttr("opacity")}}, {{SVGAttr("overflow")}}, {{SVGAttr("pointer-events")}}, {{SVGAttr("shape-rendering")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("stop-opacity")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stroke-dasharray")}}, {{SVGAttr("stroke-dashoffset")}}, {{SVGAttr("stroke-linecap")}}, {{SVGAttr("stroke-linejoin")}}, {{SVGAttr("stroke-miterlimit")}}, {{SVGAttr("stroke-opacity")}}, {{SVGAttr("stroke-width")}}, {{SVGAttr("text-anchor")}}, {{SVGAttr("transform")}}, {{SVGAttr("text-decoration")}}, {{SVGAttr("text-rendering")}}, {{SVGAttr("unicode-bidi")}}, {{SVGAttr("vector-effect")}}, {{SVGAttr("visibility")}}, {{SVGAttr("word-spacing")}}, {{SVGAttr("writing-mode")}}
- -滤镜属性
- -滤镜原始属性
- -{{SVGAttr("height")}}, {{SVGAttr("result")}}, {{SVGAttr("width")}}, {{SVGAttr("x")}}, {{SVGAttr("y")}}
- -传递函数属性
- -{{SVGAttr("type")}}, {{SVGAttr("tableValues")}}, {{SVGAttr("slope")}}, {{SVGAttr("intercept")}}, {{SVGAttr("amplitude")}}, {{SVGAttr("exponent")}}, {{SVGAttr("offset")}}
- -动画属性
- -动画属性目标属性
- -{{SVGAttr("attributeType")}}, {{SVGAttr("attributeName")}}
- -动画时间属性
- -{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}
- -动画取值属性
- -{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}, {{SVGAttr("autoReverse")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}}
- -动画额外属性
- -{{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}
- -事件属性
- -动画事件属性
- -onbegin, onend, onrepeat
文档事件属性
- -onabort, onerror, onresize, onscroll, onunload
全局事件属性
- -oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting
图像事件属性
- -onactivate, onfocusin, onfocusout
参见
- - diff --git a/files/zh-cn/web/svg/attribute/index.md b/files/zh-cn/web/svg/attribute/index.md new file mode 100644 index 00000000000000..76a242f2867a2e --- /dev/null +++ b/files/zh-cn/web/svg/attribute/index.md @@ -0,0 +1,424 @@ +--- +title: SVG 属性参考 +slug: Web/SVG/Attribute +tags: + - SVG + - SVG Attribute + - SVG Reference + - SVG 属性 + - 矢量图形 +translation_of: Web/SVG/Attribute +--- +{{SVGRef}} + +SVG 元素可以通过属性来修改，这些属性指定有关如何处理或呈现元素的详细信息。 下面列出了 SVG 中所有的可用属性以及参考文档的链接，以帮助您了解哪些元素支持它们，以及它们如何工作。 + +## SVG 属性（从 A-Z 排序） + +### A + +- {{SVGAttr("accent-height")}} +- {{SVGAttr("accumulate")}} +- {{SVGAttr("additive")}} +- {{SVGAttr("alignment-baseline")}} +- {{SVGAttr("allowReorder")}} +- {{SVGAttr("alphabetic")}} +- {{SVGAttr("amplitude")}} +- {{SVGAttr("arabic-form")}} +- {{SVGAttr("ascent")}} +- {{SVGAttr("attributeName")}} +- {{SVGAttr("attributeType")}} +- {{SVGAttr("autoReverse")}} +- {{SVGAttr("azimuth")}} + +### B + +- {{SVGAttr("baseFrequency")}} +- {{SVGAttr("baseline-shift")}} +- {{SVGAttr("baseProfile")}} +- {{SVGAttr("bbox")}} +- {{SVGAttr("begin")}} +- {{SVGAttr("bias")}} +- {{SVGAttr("by")}} + +### C + +- {{SVGAttr("calcMode")}} +- {{SVGAttr("cap-height")}} +- {{SVGAttr("class")}} +- {{SVGAttr("clip")}} +- {{SVGAttr("clipPathUnits")}} +- {{SVGAttr("clip-path")}} +- {{SVGAttr("clip-rule")}} +- {{SVGAttr("color")}} +- {{SVGAttr("color-interpolation")}} +- {{SVGAttr("color-interpolation-filters")}} +- {{SVGAttr("color-profile")}} +- {{SVGAttr("color-rendering")}} +- {{SVGAttr("contentScriptType")}} +- {{SVGAttr("contentStyleType")}} +- {{SVGAttr("cursor")}} +- {{SVGAttr("cx")}} +- {{SVGAttr("cy")}} + +### D + +- {{SVGAttr("d")}} +- {{SVGAttr("decelerate")}} +- {{SVGAttr("descent")}} +- {{SVGAttr("diffuseConstant")}} +- {{SVGAttr("direction")}} +- {{SVGAttr("display")}} +- {{SVGAttr("divisor")}} +- {{SVGAttr("dominant-baseline")}} +- {{SVGAttr("dur")}} +- {{SVGAttr("dx")}} +- {{SVGAttr("dy")}} + +### E + +- {{SVGAttr("edgeMode")}} +- {{SVGAttr("elevation")}} +- {{SVGAttr("enable-background")}} +- {{SVGAttr("end")}} +- {{SVGAttr("exponent")}} +- {{SVGAttr("externalResourcesRequired")}} + +### F + +- {{SVGAttr("fill")}} +- {{SVGAttr("fill-opacity")}} +- {{SVGAttr("fill-rule")}} +- {{SVGAttr("filter")}} +- {{SVGAttr("filterRes")}} +- {{SVGAttr("filterUnits")}} +- {{SVGAttr("flood-color")}} +- {{SVGAttr("flood-opacity")}} +- {{SVGAttr("font-family")}} +- {{SVGAttr("font-size")}} +- {{SVGAttr("font-size-adjust")}} +- {{SVGAttr("font-stretch")}} +- {{SVGAttr("font-style")}} +- {{SVGAttr("font-variant")}} +- {{SVGAttr("font-weight")}} +- {{SVGAttr("format")}} +- {{SVGAttr("from")}} +- {{SVGAttr("fr")}} +- {{SVGAttr("fx")}} +- {{SVGAttr("fy")}} + +### G + +- {{SVGAttr("g1")}} +- {{SVGAttr("g2")}} +- {{SVGAttr("glyph-name")}} +- {{SVGAttr("glyph-orientation-horizontal")}} +- {{SVGAttr("glyph-orientation-vertical")}} +- {{SVGAttr("glyphRef")}} +- {{SVGAttr("gradientTransform")}} +- {{SVGAttr("gradientUnits")}} + +### H + +- {{SVGAttr("hanging")}} +- {{SVGAttr("height")}} +- {{SVGAttr("href")}} +- {{SVGAttr("hreflang")}} +- {{SVGAttr("horiz-adv-x")}} +- {{SVGAttr("horiz-origin-x")}} + +### I + +- {{SVGAttr("id")}} +- {{SVGAttr("ideographic")}} +- {{SVGAttr("image-rendering")}} +- {{SVGAttr("in")}} +- {{SVGAttr("in2")}} +- {{SVGAttr("intercept")}} + +### K + +- {{SVGAttr("k")}} +- {{SVGAttr("k1")}} +- {{SVGAttr("k2")}} +- {{SVGAttr("k3")}} +- {{SVGAttr("k4")}} +- {{SVGAttr("kernelMatrix")}} +- {{SVGAttr("kernelUnitLength")}} +- {{SVGAttr("kerning")}} +- {{SVGAttr("keyPoints")}} +- {{SVGAttr("keySplines")}} +- {{SVGAttr("keyTimes")}} + +### L + +- {{SVGAttr("lang")}} +- {{SVGAttr("lengthAdjust")}} +- {{SVGAttr("letter-spacing")}} +- {{SVGAttr("lighting-color")}} +- {{SVGAttr("limitingConeAngle")}} +- {{SVGAttr("local")}} + +### M + +- {{SVGAttr("marker-end")}} +- {{SVGAttr("marker-mid")}} +- {{SVGAttr("marker-start")}} +- {{SVGAttr("markerHeight")}} +- {{SVGAttr("markerUnits")}} +- {{SVGAttr("markerWidth")}} +- {{SVGAttr("mask")}} +- {{SVGAttr("maskContentUnits")}} +- {{SVGAttr("maskUnits")}} +- {{SVGAttr("mathematical")}} +- {{SVGAttr("max")}} +- {{SVGAttr("media")}} +- {{SVGAttr("method")}} +- {{SVGAttr("min")}} +- {{SVGAttr("mode")}} + +### N + +- {{SVGAttr("name")}} +- {{SVGAttr("numOctaves")}} + +### O + +- {{SVGAttr("offset")}} +- {{SVGAttr("opacity")}} +- {{SVGAttr("operator")}} +- {{SVGAttr("order")}} +- {{SVGAttr("orient")}} +- {{SVGAttr("orientation")}} +- {{SVGAttr("origin")}} +- {{SVGAttr("overflow")}} +- {{SVGAttr("overline-position")}} +- {{SVGAttr("overline-thickness")}} + +### P + +- {{SVGAttr("panose-1")}} +- {{SVGAttr("paint-order")}} +- {{SVGAttr("path")}} +- {{SVGAttr("pathLength")}} +- {{SVGAttr("patternContentUnits")}} +- {{SVGAttr("patternTransform")}} +- {{SVGAttr("patternUnits")}} +- {{SVGAttr("ping")}} +- {{SVGAttr("pointer-events")}} +- {{SVGAttr("points")}} +- {{SVGAttr("pointsAtX")}} +- {{SVGAttr("pointsAtY")}} +- {{SVGAttr("pointsAtZ")}} +- {{SVGAttr("preserveAlpha")}} +- {{SVGAttr("preserveAspectRatio")}} +- {{SVGAttr("primitiveUnits")}} + +### R + +- {{SVGAttr("r")}} +- {{SVGAttr("radius")}} +- {{SVGAttr("referrerPolicy")}} +- {{SVGAttr("refX")}} +- {{SVGAttr("refY")}} +- {{SVGAttr("rel")}} +- {{SVGAttr("rendering-intent")}} +- {{SVGAttr("repeatCount")}} +- {{SVGAttr("repeatDur")}} +- {{SVGAttr("requiredExtensions")}} +- {{SVGAttr("requiredFeatures")}} +- {{SVGAttr("restart")}} +- {{SVGAttr("result")}} +- {{SVGAttr("rotate")}} +- {{SVGAttr("rx")}} +- {{SVGAttr("ry")}} + +### S + +- {{SVGAttr("scale")}} +- {{SVGAttr("seed")}} +- {{SVGAttr("shape-rendering")}} +- {{SVGAttr("slope")}} +- {{SVGAttr("spacing")}} +- {{SVGAttr("specularConstant")}} +- {{SVGAttr("specularExponent")}} +- {{SVGAttr("speed")}} +- {{SVGAttr("spreadMethod")}} +- {{SVGAttr("startOffset")}} +- {{SVGAttr("stdDeviation")}} +- {{SVGAttr("stemh")}} +- {{SVGAttr("stemv")}} +- {{SVGAttr("stitchTiles")}} +- {{SVGAttr("stop-color")}} +- {{SVGAttr("stop-opacity")}} +- {{SVGAttr("strikethrough-position")}} +- {{SVGAttr("strikethrough-thickness")}} +- {{SVGAttr("string")}} +- {{SVGAttr("stroke")}} +- {{SVGAttr("stroke-dasharray")}} +- {{SVGAttr("stroke-dashoffset")}} +- {{SVGAttr("stroke-linecap")}} +- {{SVGAttr("stroke-linejoin")}} +- {{SVGAttr("stroke-miterlimit")}} +- {{SVGAttr("stroke-opacity")}} +- {{SVGAttr("stroke-width")}} +- {{SVGAttr("style")}} +- {{SVGAttr("surfaceScale")}} +- {{SVGAttr("systemLanguage")}} + +### T + +- {{SVGAttr("tabindex")}} +- {{SVGAttr("tableValues")}} +- {{SVGAttr("target")}} +- {{SVGAttr("targetX")}} +- {{SVGAttr("targetY")}} +- {{SVGAttr("text-anchor")}} +- {{SVGAttr("text-decoration")}} +- {{SVGAttr("text-rendering")}} +- {{SVGAttr("textLength")}} +- {{SVGAttr("to")}} +- {{SVGAttr("transform")}} +- {{SVGAttr("type")}} + +### U + +- {{SVGAttr("u1")}} +- {{SVGAttr("u2")}} +- {{SVGAttr("underline-position")}} +- {{SVGAttr("underline-thickness")}} +- {{SVGAttr("unicode")}} +- {{SVGAttr("unicode-bidi")}} +- {{SVGAttr("unicode-range")}} +- {{SVGAttr("units-per-em")}} + +### V + +- {{SVGAttr("v-alphabetic")}} +- {{SVGAttr("v-hanging")}} +- {{SVGAttr("v-ideographic")}} +- {{SVGAttr("v-mathematical")}} +- {{SVGAttr("values")}} +- {{SVGAttr("vector-effect")}} +- {{SVGAttr("version")}} +- {{SVGAttr("vert-adv-y")}} +- {{SVGAttr("vert-origin-x")}} +- {{SVGAttr("vert-origin-y")}} +- {{SVGAttr("viewBox")}} +- {{SVGAttr("viewTarget")}} +- {{SVGAttr("visibility")}} + +### W + +- {{SVGAttr("width")}} +- {{SVGAttr("widths")}} +- {{SVGAttr("word-spacing")}} +- {{SVGAttr("writing-mode")}} + +### X + +- {{SVGAttr("x")}} +- {{SVGAttr("x-height")}} +- {{SVGAttr("x1")}} +- {{SVGAttr("x2")}} +- {{SVGAttr("xChannelSelector")}} +- {{SVGAttr("xlink:actuate")}} +- {{SVGAttr("xlink:arcrole")}} +- {{SVGAttr("xlink:href")}} +- {{SVGAttr("xlink:role")}} +- {{SVGAttr("xlink:show")}} +- {{SVGAttr("xlink:title")}} +- {{SVGAttr("xlink:type")}} +- {{SVGAttr("xml:base")}} +- {{SVGAttr("xml:lang")}} +- {{SVGAttr("xml:space")}} + +### Y + +- {{SVGAttr("y")}} +- {{SVGAttr("y1")}} +- {{SVGAttr("y2")}} +- {{SVGAttr("yChannelSelector")}} + +### Z + +- {{SVGAttr("z")}} +- {{SVGAttr("zoomAndPan")}} + +## SVG 属性（按类别分类） + +### Generic Attributes + +#### [核心属性](/docs/Web/SVG/Attribute/Core) + +{{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}} + +#### [样式属性](/docs/Web/SVG/Attribute/Styling) + +{{SVGAttr("class")}}, {{SVGAttr("style")}} + +#### 条件处理属性 + +{{SVGAttr("externalResourcesRequired")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}. + +### XLink 属性 + +{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:type")}}, {{SVGAttr("xlink:role")}}, {{SVGAttr("xlink:arcrole")}}, {{SVGAttr("xlink:title")}}, {{SVGAttr("xlink:show")}}, {{SVGAttr("xlink:actuate")}} + +### [显示属性](/docs/Web/SVG/Attribute/Presentation) + +> **备注：** 所有 SVG 显示属性都可以作为 CSS 属性来使用。 + +{{SVGAttr("alignment-baseline")}}, {{SVGAttr("baseline-shift")}}, {{SVGAttr("clip")}}, {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}, {{SVGAttr("color")}}, {{SVGAttr("color-interpolation")}}, {{SVGAttr("color-interpolation-filters")}}, {{SVGAttr("color-profile")}}, {{SVGAttr("color-rendering")}}, {{SVGAttr("cursor")}}, {{SVGAttr("direction")}}, {{SVGAttr("display")}}, {{SVGAttr("dominant-baseline")}}, {{SVGAttr("enable-background")}}, {{SVGAttr("fill")}}, {{SVGAttr("fill-opacity")}}, {{SVGAttr("fill-rule")}}, {{SVGAttr("filter")}}, {{SVGAttr("flood-color")}}, {{SVGAttr("flood-opacity")}}, {{SVGAttr("font-family")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("glyph-orientation-horizontal")}}, {{SVGAttr("glyph-orientation-vertical")}}, {{SVGAttr("image-rendering")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("lighting-color")}}, {{SVGAttr("marker-end")}}, {{SVGAttr("marker-mid")}}, {{SVGAttr("marker-start")}}, {{SVGAttr("mask")}}, {{SVGAttr("opacity")}}, {{SVGAttr("overflow")}}, {{SVGAttr("pointer-events")}}, {{SVGAttr("shape-rendering")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("stop-opacity")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stroke-dasharray")}}, {{SVGAttr("stroke-dashoffset")}}, {{SVGAttr("stroke-linecap")}}, {{SVGAttr("stroke-linejoin")}}, {{SVGAttr("stroke-miterlimit")}}, {{SVGAttr("stroke-opacity")}}, {{SVGAttr("stroke-width")}}, {{SVGAttr("text-anchor")}}, {{SVGAttr("transform")}}, {{SVGAttr("text-decoration")}}, {{SVGAttr("text-rendering")}}, {{SVGAttr("unicode-bidi")}}, {{SVGAttr("vector-effect")}}, {{SVGAttr("visibility")}}, {{SVGAttr("word-spacing")}}, {{SVGAttr("writing-mode")}} + +### 滤镜属性 + +#### 滤镜原始属性 + +{{SVGAttr("height")}}, {{SVGAttr("result")}}, {{SVGAttr("width")}}, {{SVGAttr("x")}}, {{SVGAttr("y")}} + +#### 传递函数属性 + +{{SVGAttr("type")}}, {{SVGAttr("tableValues")}}, {{SVGAttr("slope")}}, {{SVGAttr("intercept")}}, {{SVGAttr("amplitude")}}, {{SVGAttr("exponent")}}, {{SVGAttr("offset")}} + +### 动画属性 + +#### 动画属性目标属性 + +{{SVGAttr("attributeType")}}, {{SVGAttr("attributeName")}} + +#### 动画时间属性 + +{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}} + +#### 动画取值属性 + +{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}, {{SVGAttr("autoReverse")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}} + +#### 动画额外属性 + +{{SVGAttr("additive")}}, {{SVGAttr("accumulate")}} + +### 事件属性 + +#### [动画事件属性](/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes) + +**`onbegin`**, **`onend`**, **`onrepeat`** + +#### [文档事件属性](/docs/Web/SVG/Attribute/Events#Document_Event_Attributes) + +**`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`** + +#### [全局事件属性](/docs/Web/SVG/Attribute/Events#Global_Event_Attributes) + +**`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragexit`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`** + +#### [图像事件属性](/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes) + +**`onactivate`**, **`onfocusin`**, **`onfocusout`** + +## 参见 + +- [SVG 元素参考](/zh-CN/docs/Web/SVG/Element) +- [SVG 教程](/zh-CN/docs/Web/SVG/Tutorial) +- [SVG 接口参考](/zh-CN/docs/Web/API/Document_Object_Model#SVG_interfaces) diff --git a/files/zh-cn/web/svg/attribute/kernelmatrix/index.html b/files/zh-cn/web/svg/attribute/kernelmatrix/index.html deleted file mode 100644 index c3e0ce4efcde70..00000000000000 --- a/files/zh-cn/web/svg/attribute/kernelmatrix/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: kernelMatrix -slug: Web/SVG/Attribute/kernelMatrix -translation_of: Web/SVG/Attribute/kernelMatrix ---- -« SVG Attribute reference home
- -用于 order 属性定义一列<number>为{{SVGElement("feConvolveMatrix")}} 元素构成核矩阵。值之间用空格或逗号分开。<number>的数量必须等于在{{SVGAttr("order")}}属性中定义的<orderX>和<orderY>的乘积。
- -Usage context
- -| Categories | -None | -
|---|---|
| Value | -T<.2Fvar>s"><list of number> | -
| Animatable | -Yes | -
Example
- -Elements
- -下面的元素可以使用kernelMatrix 属性
-
-
- {{ SVGElement("feConvolveMatrix") }} -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/kernelmatrix/index.md b/files/zh-cn/web/svg/attribute/kernelmatrix/index.md new file mode 100644 index 00000000000000..8aa23c87b837f6 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/kernelmatrix/index.md @@ -0,0 +1,27 @@ +--- +title: kernelMatrix +slug: Web/SVG/Attribute/kernelMatrix +translation_of: Web/SVG/Attribute/kernelMatrix +--- +« [SVG Attribute reference home](/en/SVG/Attribute) + +用于 order 属性定义一列[\- ](/en/SVG/Content_type#List-of-T<.2Fvar>s) |
+| Animatable | Yes |
+
+## Example
+
+## Elements
+
+下面的元素可以使用`kernelMatrix 属性`
+
+- {{ SVGElement("feConvolveMatrix") }}
+
+## 规范
+
+{{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/keytimes/index.html b/files/zh-cn/web/svg/attribute/keytimes/index.html
deleted file mode 100644
index fc4caa1f47d515..00000000000000
--- a/files/zh-cn/web/svg/attribute/keytimes/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: keyTimes
-slug: Web/SVG/Attribute/keyTimes
-tags:
- - SVG
- - SVG 属性
- - keyTimes
-translation_of: Web/SVG/Attribute/keyTimes
----
-
- 对于 linear(线性) 和 spline(样条) 动画，列表中的第一个时间值必须为 0，列表的最后一个时间值必须为 1。与每个 value 关联的时间值定义了何时设置该 value，该 value 在 keyTimes 的时间 值的中间插值。 -
- 对于 discrete(离线) 动画，列表中的第一个值必须为 0。与每个 value 关联的时间值定义了何时设置该 value，动画函数使用该 value，直到 keyTimes 中定义的下一个时间值。 -
- {{ SVGElement("animate") }} -
- {{ SVGElement("animateColor") }} -
- {{ SVGElement("animateMotion") }} -
- {{ SVGElement("animateTransform") }} -
- {{cssxref("letter-spacing", "CSS letter-spacing")}} -
none
- - 表示将不会在终点绘制任何符号。 -
<marker-ref>
- - 这个值表示的是对 {{SVGElement("marker")}} 元素的引用，将在终点绘制该元素.。如果引用无效，将不会绘制任何东西。 -
- {{SVGElement("marker")}} -
- {{SVGAttr("marker-start")}} -
- {{SVGAttr("marker-mid")}} -
none
- - 表示将不会在起点绘制任何符号。 -
<marker-ref>
- - 这个值表示的是对
<marker>元素的引用，将在起点绘制该元素.。如果引用无效，将不会绘制任何东西。
- - {{SVGElement("marker")}} -
- {{SVGAttr("marker-end")}} -
- {{SVGAttr("marker-mid")}} -
- <funcIRI> -
- 对同一 SVG 文档片段内部别的图形对象的一个引用 ，这个图形对象将用作遮罩。这个引用的句法与{{ cssxref("uri","CSS URI") }}的句法相同。 -
- {{ SVGElement("mask") }} -
<clock-value>
- -
-
Specifies the length of the maximum value of the active duration, measured in local time. The value must be greater than 0.
-
- - {{SVGAttr("min")}} -
<media-query-list>
- -
-
This value holds a media query that needs to match in order for the style sheet to be applied.
- -如果没有指定，样式表就会被应用。
-
- - <opacity-value> -
- 一致的不透明度设置，作为一个<number>被应用到整个对象上。任何超过范围 0.0 到 1.0 的值都会被压回这个范围。0.0 表示完全透明，1.0 表示完全不透明。 -
- 图形元素 » -
- {{ SVGElement("a") }} -
- {{ SVGElement("defs") }} -
- {{ SVGElement("glyph") }} -
- {{ SVGElement("g") }} -
- {{ SVGElement("marker") }} -
- {{ SVGElement("missing-glyph") }} -
- {{ SVGElement("pattern") }} -
- {{ SVGElement("svg") }} -
- {{ SVGElement("switch") }} -
- {{ SVGElement("symbol") }} -
- {{ cssxref("opacity","CSS opacity") }} -
- {{ SVGElement("feConvolveMatrix") }} -
- The
overflowattribute only applies to elements that establish new viewports (see below), {{ SVGElement("pattern") }} elements and {{ SVGElement("marker") }} elements. For all other elements, the property has no effect.
- - For those elements to which the
overflowattribute can apply, if theoverflowattribute has the valuehiddenorscroll, the effect is that a new clipping path in the shape of a rectangle is created. The result is equivalent to defining a {{ SVGElement("clipPath") }} element whose content is a {{ SVGElement("rect") }} element which defines the equivalent rectangle, and then specifying the <uri> of this {{ SVGElement("clipPath") }} element on the {{ SVGAttr("clip-path") }} attribute for the given element.
- - If the
overflowattribute has a value other thanhiddenorscroll, the property has no effect.
- - Within SVG content, the value
autois equivalent to the valuevisible.
- - When an outermost svg element is embedded inline within HTML, if the
overflowattribute has the valuehiddenorscroll, then the browser will establish an initial clipping path equal to the bounds of the initial viewport; otherwise, the initial clipping path is set according to the CSS clipping rules.
- - When an outermost svg element is stand-alone, the
overflowattribute on the outermost svg element is ignored for the purposes of visual rendering and the initial clipping path is set to the bounds of the initial viewport.
- - The initial value for
overflowas defined in CSS isvisible, and this applies also to the root {{ SVGElement("svg") }} element; however, for child elements of an SVG document, SVG's browser style sheet overrides this initial value and sets theoverflowattribute on elements that establish new viewports, ‘pattern’ elements and ‘marker’ elements to the valuehidden.
- - {{ SVGElement("svg") }} -
- {{ SVGElement("symbol") }} -
- {{ SVGElement("image") }} -
- {{ SVGElement("foreignObject") }} -
- {{ SVGElement("pattern") }} -
- {{ SVGElement("marker") }} -
- {{ cssxref("overflow","CSS overflow") }} -
- userSpaceOnUse -
- This value indicates that all coordinates for the geometry preoperties refer to the user coordinate system as defined when the pattern was applied. -
- objectBoundingBox -
- This value indicates that all coordinates for the geometry properties represent fractions or percentages of the bounding box of the element to which the mask is applied. A bounding box could be considered the same as if the content of the {{ SVGElement("mask") }} were bound to a "
0 0 1 1" {{ SVGAttr("viewbox") }}.
- - {{ SVGElement("polyline") }} -
- {{ SVGElement("polygon") }} -
- alignment-baseline -
- baseline-shift -
- clip -
- clip-path -
- clip-rule -
- color -
- color-interpolation -
- color-interpolation-filters -
- color-profile -
- color-rendering -
- cursor -
- direction -
- display -
- dominant-baseline -
- enable-background -
- fill -
- fill-opacity -
- fill-rule -
- filter -
- flood-color -
- flood-opacity -
- font-family -
- font-size -
- font-size-adjust -
- font-stretch -
- font-style -
- font-variant -
- font-weight -
- glyph-orientation-horizontal -
- glyph-orientation-vertical -
- image-rendering -
- kerning -
- letter-spacing -
- lighting-color -
- marker-end -
- marker-mid -
- marker-start -
- mask -
- opacity -
- overflow -
- pointer-events -
- shape-rendering -
- solid-color -
- solid-opacity -
- stop-color -
- stop-opacity -
- stroke -
- stroke-dasharray -
- stroke-dashoffset -
- stroke-linecap -
- stroke-linejoin -
- stroke-miterlimit -
- stroke-opacity -
- stroke-width -
- text-anchor -
- text-decoration -
- text-rendering -
- transform -
- unicode-bidi -
- vector-effect -
- visibility -
- word-spacing -
- writing-mode -
- {{SVGAttr('alignment-baseline')}} -
- It specifies how an object is aligned along the font baseline with respect to its parent.
- Value:auto|baseline|before-edge|text-before-edge|middle|central|after-edge|text-after-edge|ideographic|alphabetic|hanging|mathematical|inherit; Animatable: Yes
- - {{SVGAttr('baseline-shift')}} -
- It allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element.
- Value:auto|baseline|super|sub|<percentage>|<length>|inherit; Animatable: Yes
- - {{SVGAttr('clip')}} {{deprecated_inline('css')}} -
- It defines what portion of an element is visible.
- Value:auto|{{cssxref("shape")}}|inherit; Animatable: Yes
- - {{SVGAttr('clip-path')}} -
- It binds the element it is applied to with a given {{SVGElement('clipPath')}} element.
- Value:none|<FuncIRI>|inherit; Animatable: Yes
- - {{SVGAttr('clip-rule')}} -
- It indicates how to determine what side of a path is inside a shape in order to know how a {{SVGElement('clipPath')}} should clip its target.
- Value:nonezero|evenodd|inherit; Animatable: Yes
- - {{SVGAttr('color')}} -
- It provides a potential indirect value (
currentColor) for thefill,stroke,stop-color,flood-colorandlighting-colorpresentation attributes.
- Value: <color>|inherit; Animatable: Yes
- - {{SVGAttr('color-interpolation')}} -
- It specifies the color space for gradient interpolations, color animations, and alpha compositing.
- Value:auto|sRGB|linearRGB|inherit; Animatable: Yes
- - {{SVGAttr('color-interpolation-filters')}} -
- It specifies the color space for imaging operations performed via filter effects.
- Value:auto|sRGB|linearRGB|inherit; Animatable: Yes
- - {{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}} -
- It defines which color profile a raster image included through the {{SVGElement('image')}} element should use.
- Value:auto|sRGB|linearRGB|<name>|<IRI>|inherit; Animatable: Yes
- - {{SVGAttr('color-rendering')}} -
- It provides a hint to the browser about how to optimize its color interpolation and compositing operations.
- Value:auto|optimizeSpeed|optimizeQuality|inherit; Animatable: Yes
- - {{SVGAttr('cursor')}} -
- It specifies the mouse cursor displayed when the mouse pointer is over an element.
- Value: <FuncIRI>|<keywords>|inherit; Animatable: Yes
- - {{SVGAttr('direction')}} -
- It specifies the base writing direction of text.
- Value:ltr|rtl|inherit; Animatable: Yes
- - {{SVGAttr('display')}} -
- It allows to control the rendering of graphical or container elements.
- Value: see css {{cssxref('display')}}; Animatable: Yes
- - {{SVGAttr('dominant-baseline')}} -
- It defines the baseline used to align the box’s text and inline-level contents.
- Value:auto|text-bottom|alphabetic|ideographic|middle|central|mathematical|hanging|text-top; Animatable: Yes
- - {{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}} -
- It tells the browser how to manage the accumulation of the background image.
- Value:accumulate|new|inherit; Animatable: No
- - {{SVGAttr('fill')}} -
- It defines the color of the inside of the graphical element it applies to.
- Value: <paint>; Animatable: Yes
- - {{SVGAttr('fill-opacity')}} -
- It specifies the opacity of the color or the content the current object is filled with.
- Value: <number>|<percentage>; Animatable: Yes
- - {{SVGAttr('fill-rule')}} -
- It indicates how to determine what side of a path is inside a shape.
- Value:nonzero|evenodd|inherit; Animatable: Yes
- - {{SVGAttr('filter')}} -
- It defines the filter effects defined by the {{SVGElement('filter')}} element that shall be applied to its element.
- Value: <FuncIRI>|none|inherit; Animatable: Yes
- - {{SVGAttr('flood-color')}} -
- It indicates what color to use to flood the current filter primitive subregion defined through the {{SVGElement('feFlood')}} or {{SVGElement('feDropShadow')}} element.
- Value: <color>; Animatable: Yes
- - {{SVGAttr('flood-opacity')}} -
- It indicates the opacity value to use across the current filter primitive subregion defined through the {{SVGElement('feFlood')}} or {{SVGElement('feDropShadow')}} element.
- Value: <number>|<percentage>; Animatable: Yes
- - {{SVGAttr('font-family')}} -
- It indicates which font family will be used to render the text of the element.
- Value: see css {{cssxref('font-family')}}; Animatable: Yes
- - {{SVGAttr('font-size')}} -
- It specifies the size of the font.
- Value: see css {{cssxref('font-size')}}; Animatable: Yes
- - {{SVGAttr('font-size-adjust')}} -
- It specifies that the font size should be chosen based on the height of lowercase letters rather than the height of capital letters.
- Value: <number>|none|inherit; Animatable: Yes
- - {{SVGAttr('font-stretch')}} -
- It selects a normal, condensed, or expanded face from a font.
- Value: see css {{cssxref('font-stretch')}}; Animatable: Yes
- - {{SVGAttr('font-style')}} -
- It specifies whether a font should be styled with a normal, italic, or oblique face from its {{SVGAttr('font-family')}}.
- Value:normal|italic|oblique; Animatable: Yes
- - {{SVGAttr('font-variant')}} -
- It specifies whether a font should be used with some of their variation such as small caps or ligatures.
- Value: see css {{cssxref('font-variant')}}; Animatable: Yes
- - {{SVGAttr('font-weight')}} -
- It specifies the weight (or boldness) of the font.
- Value:normal|bold|lighter|bolder|100|200|300|400|500|600|700|800|900; Animatable: Yes
- - {{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}} -
- It controls glyph orientation when the inline-progression-direction is horizontal.
- Value: <angle>|inherit; Animatable: No
- - {{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}} -
- It controls glyph orientation when the inline-progression-direction is vertical.
- Value:auto|<angle>|inherit; Animatable: No
- - {{SVGAttr('image-rendering')}} -
- It provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.
- Value:auto|optimizeQuality|optimizeSpeed; Animatable: Yes
- - {{SVGAttr('kerning')}} {{deprecated_inline('svg2')}} -
- It indicates whether the browser should adjust inter-glyph spacing.
- Value:auto|<length>|inherit; Animatable: Yes
- - {{SVGAttr('letter-spacing')}} -
- It controls spacing between text characters.
- Value:normal|<length>|inherit; Animatable: Yes
- - {{SVGAttr('lighting-color')}} -
- It defines the color of the light source for filter primitives elements {{SVGElement('feDiffuseLighting')}} and {{SVGElement('feSpecularLighting')}}.
- Value: <color>; Animatable: Yes
- - {{SVGAttr('marker-end')}} -
- It defines the arrowhead or polymarker that will be drawn at the final vertex of the given {{SVGElement('path')}} element or basic shape.
- Value: <FuncIRI>|none|inherit; Animatable: Yes
- - {{SVGAttr('marker-mid')}} -
- It defines the arrowhead or polymarker that will be drawn at every vertex other than the first and last vertex of the given {{SVGElement('path')}} element or basic shape.
- Value: <FuncIRI>|none|inherit; Animatable: Yes
- - {{SVGAttr('marker-start')}} -
- It defines the arrowhead or polymarker that will be drawn at the first vertex of the given {{SVGElement('path')}} element or basic shape.
- Value: <FuncIRI>|none|inherit; Animatable: Yes
- - {{SVGAttr('mask')}} -
- It alters the visibility of an element by either masking or clipping the image at specific points.
- Value: see css {{cssxref('mask')}}; Animatable: Yes
- - {{SVGAttr('opacity')}} -
- It specifies the transparency of an object or a group of objects.
- Value: <opacity-value>; Animatable: Yes
- - {{SVGAttr('overflow')}} -
- Specifies whether the content of a block-level element is clipped when it overflows the element's box.
- Value:visible|hidden|scroll|auto|inherit; Animatable: Yes
- - {{SVGAttr('pointer-events')}} -
- Defines whether or when an element may be the target of a mouse event.
- Value:bounding-box|visiblePainted|visibleFil|visibleStroke|visible|painted|fill|stroke|all|none; Animatable: Yes
- - {{SVGAttr('shape-rendering')}} -
- Hints about what tradeoffs to make as the browser renders {{SVGElement('path')}} element or basic shapes.
- Value:auto|optimizeSpeed|crispEdges|geometricPrecision|inherit; Animatable: Yes
- - {{SVGAttr('solid-color')}} -
- -
- Value:; Animatable: -
- - {{SVGAttr('solid-opacity')}} -
- -
- Value:; Animatable: -
- - {{SVGAttr('stop-color')}} -
- Indicates what color to use at that gradient stop.
- Value:currentColor|<color>|<icccolor>|inherit; Animatable: Yes
- - {{SVGAttr('stop-opacity')}} -
- Defines the opacity of a given gradient stop.
- Value: <opacity-value>|inherit; Animatable: Yes
- - {{SVGAttr('stroke')}} -
- Defines the color used to paint the outline of the shape.
- Value: <paint>; Animatable: Yes
- - {{SVGAttr('stroke-dasharray')}} -
- Defines the pattern of dashes and gaps used to paint the outline of the shape.
- Value:none|<dasharray>; Animatable: Yes
- - {{SVGAttr('stroke-dashoffset')}} -
- Defines an offset on the rendering of the associated dash array.
- Value: <percentage>|<length>; Animatable: Yes
- - {{SVGAttr('stroke-linecap')}} -
- Defines the shape to be used at the end of open subpaths when they are stroked.
- Value:butt|round|square; Animatable: Yes
- - {{SVGAttr('stroke-linejoin')}} -
- Defines the shape to be used at the corners of paths when they are stroked.
- Value:arcs|bevel|miter|miter-clip|round; Animatable: Yes
- - {{SVGAttr('stroke-miterlimit')}} -
- Defines a limit on the ratio of the miter length to the {{ SVGAttr("stroke-width") }} used to draw a miter join.
- Value: <number>; Animatable: Yes
- - {{SVGAttr('stroke-opacity')}} -
- Defines the opacity of the stroke of a shape.
- Value: <opacity-value>|<percentage>; Animatable: Yes
- - {{SVGAttr('stroke-width')}} -
- Defines the width of the stroke to be applied to the shape.
- Value: <length>|<percentage>; Animatable: Yes
- - {{SVGAttr('text-anchor')}} -
- Defines the vertical alignment a string of text.
- Value:start|middle|end|inherit; Animatable: Yes
- - {{SVGAttr('text-decoration')}} -
- Sets the appearance of decorative lines on text.
- Value:none|underline|overline|line-through|blink|inherit; Animatable: Yes
- - {{SVGAttr('text-rendering')}} -
- Hints about what tradeoffs to make as the browser renders text.
- Value:auto|optimizeSpeed|optimizeLegibility|geometricPrecision|inherit; Animatable: Yes
- - {{SVGAttr('transform')}} -
- Defines a list of transform definitions that are applied to an element and the element's children.
- Value: <transform-list>; Animatable: Yes
- - {{SVGAttr('unicode-bidi')}} -
- -
- Value:; Animatable: -
- - {{SVGAttr('vector-effect')}} -
- Specifies the vector effect to use when drawing an object.
- Value:default|non-scaling-stroke|inherit|<uri>; Animatable: Yes
- - {{SVGAttr('visibility')}} -
- Lets you control the visibility of graphical elements.
- Value:visible|hidden|collapse|inherit; Animatable: Yes
- - {{SVGAttr('word-spacing')}} -
- Specifies spacing behavior between words.
- Value: <length>|inherit; Animatable: Yes
- - {{SVGAttr('writing-mode')}} -
- Specifies whether the initial inline-progression-direction for a {{SVGElement('text')}} element shall be left-to-right, right-to-left, or top-to-bottom.
- Value:lr-tb|rl-tb|tb-rl|lr|rl|tb|inherit; Animatable: Yes
- - {{ SVGElement("feConvolveMatrix") }} -
- <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 的最大值对齐。
-
- - none
- <meetOrSlice> -
<meetOrSlice>是可选的，如果提供的话， 与<align>间隔一个或多个的空格 ，参数所选值必须是以下值之一： --
-
- meet (默认值) - 图形将缩放到：
-
-
-
- 宽高比将会被保留 -
- 整个 SVG 的 viewbox 在视图范围内是可见的 -
- 尽可能的放大 SVG 的 viewbox，同时仍然满足其他的条件。 -
- - slice - 图形将缩放到：
-
-
-
- 宽高比将会被保留 -
- 整个视图窗口将覆盖 viewbox -
- SVG 的 viewbox 属性将会被尽可能的缩小，但是仍然符合其他标准。 -
-
-- meet (默认值) - 图形将缩放到：
-
- {{ SVGElement("svg") }} -
- {{ SVGElement("symbol") }} -
- {{ SVGElement("image") }} -
- {{ SVGElement("feImage") }} -
- {{ SVGElement("marker") }} -
- {{ SVGElement("pattern") }} -
- {{ SVGElement("view") }} -
- userSpaceOnUse -
- 当{{ SVGElement("filter") }}元素使用该值的时候，过滤器中定义的任意长度的值都基于当前用户坐标系统 (例如通过{{ SVGAttr("filter") }}属性引用该{{ SVGElement("filter") }}元素的元素所在的用户坐标系统). -
- objectBoundingBox -
- 在 filter 中定义的任意长度值表示引用该 filter 的元素的包围盒的分数或百分比。 -
- {{ SVGElement("filter") }} -
- {{ SVGElement("feMorphology") }} -
- Animation elements » -
- 滤镜元素 » -
- 如果你为
rx属性指定了正确的值，但是没有定义 {{SVGAttr("ry")}} 属性的值，那么浏览器会让 {{SVGAttr("ry")}} 取rx属性被指定的相等的值。（反之亦然）
- - 如果
rx和 {{SVGAttr("ry")}} 都没有被正确的赋值，那么浏览器会绘制一个带有直角尖角的矩形。
- rx属性的有效值为矩形宽度的一半（即，如果为rx指定的值大于矩形宽度的一半，那么浏览器会视为rx的值为矩形宽度的一半）。
-- {{ SVGElement("feDisplacementMap") }} -
- {{ SVGElement("feTurbulence") }} -
- auto -
- 让浏览器自动权衡渲染速度、平滑度、精确度。默认是倾向于精确度而非平滑度和速度。 -
- optimizeSpeed -
- 偏向渲染速度，浏览器会关闭反锯齿模式。（速度） -
- crispEdges -
- 偏向更加清晰锐利的边缘的渲染。浏览器在渲染的时候会关闭反锯齿模式，且会让线条的位置和宽度和显示器边缘对齐。（锐度） -
- geometricPrecision -
- 偏向渲染平滑的曲线。（平滑） -
- Shape elements » -
« SVG 属性参考主页
- -keyTimes 属性是一个以分号分隔的时间值列表，用于控制动画的执行步骤。列表中的每个值与{{ SVGAttr("values") }}中的值一一对应，定义了{{ SVGAttr("values") }}中的值在动画中何时执行，keyTimes 列表中的每一个值都是指定在 [0-1] 之间的浮点数，表示动画的完成时间。
- -如果指定了 keyTimes 列表，那么一定有与之完全对应的{{ SVGAttr("values") }}列表。
- -每一个连续的时间值必须大于等于前一个时间值。
- -keyTimes 列表的语义取决于插值模式：
- --
-
- -
- -
-
-
- -
如果插值模式是 paced（踏步），keyTimes 属性被忽略。
- -如果 duration（持续时间）不确定，则将忽略任何 keyTimes 规范。
- -用法
- -| 类别 | -动画值属性 | -
|---|---|
| 值 | -<list> | -
| 可变性 | -No | -
示例
- -<?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 属性
-
-
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/keytimes/index.md b/files/zh-cn/web/svg/attribute/keytimes/index.md new file mode 100644 index 00000000000000..0887b07ed1e4e7 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/keytimes/index.md @@ -0,0 +1,73 @@ +--- +title: keyTimes +slug: Web/SVG/Attribute/keyTimes +tags: + - SVG + - SVG 属性 + - keyTimes +translation_of: Web/SVG/Attribute/keyTimes +--- +« [SVG ](/zh-CN/docs/Web/SVG/Attribute)属性参考主页 + +keyTimes 属性是一个以分号分隔的时间值列表，用于控制动画的执行步骤。列表中的每个值与{{ SVGAttr("values") }}中的值一一对应，定义了{{ SVGAttr("values") }}中的值在动画中何时执行，keyTimes 列表中的每一个值都是指定在 \[0-1] 之间的浮点数，表示动画的完成时间。 + +如果指定了 keyTimes 列表，那么一定有与之完全对应的{{ SVGAttr("values") }}列表。 + +每一个连续的时间值必须大于等于前一个时间值。 + +keyTimes 列表的语义取决于插值模式： + +- 对于 linear(线性) 和 spline(样条) 动画，列表中的第一个时间值必须为 0，列表的最后一个时间值必须为 1。与每个 value 关联的时间值定义了何时设置该 value，该 value 在 keyTimes 的时间 值的中间插值。 +- 对于 discrete(离线) 动画，列表中的第一个值必须为 0。与每个 value 关联的时间值定义了何时设置该 value，动画函数使用该 value，直到 keyTimes 中定义的下一个时间值。 + +如果插值模式是 paced（踏步），keyTimes 属性被忽略。 + +如果 duration（持续时间）不确定，则将忽略任何 keyTimes 规范。 + +## 用法 + +| 类别 | 动画值属性 | +| ------ | ---------- | +| 值 |- |
+| 可变性 | No |
+
+## 示例
+
+```html
+
+
+```
+
+## 元素
+
+以下元素可以使用 `keyTimes 属性`
+
+- {{ SVGElement("animate") }}
+- {{ SVGElement("animateColor") }}
+- {{ SVGElement("animateMotion") }}
+- {{ SVGElement("animateTransform") }}
+
+## 规范
+
+{{Specifications}}
diff --git a/files/zh-cn/web/svg/attribute/letter-spacing/index.html b/files/zh-cn/web/svg/attribute/letter-spacing/index.html
deleted file mode 100644
index 31bb91be7b9fab..00000000000000
--- a/files/zh-cn/web/svg/attribute/letter-spacing/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: letter-spacing
-slug: Web/SVG/Attribute/letter-spacing
-translation_of: Web/SVG/Attribute/letter-spacing
----
-
{{SVGRef}}
-
-The letter-spacing attribute controls spacing between text characters, in addition to any spacing from the {{SVGAttr("kerning")}} attribute.
If the attribute value is a unitless number (like 128), the browser processes it as a {{cssxref("length")}} in the current user coordinate system.
If the attribute value has a unit identifier, such as .25em or 1%, then the browser converts the <length> into its corresponding value in the current user coordinate system.
Note: As a presentation attribute, letter-spacing can be used as a CSS property. See the {{cssxref("letter-spacing", "CSS letter-spacing")}} property for more information.
As a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: {{SVGElement("altGlyph")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, and {{SVGElement("tspan")}}
- -
-
-
-
-
-
-html, body, svg {
- height: 100%;
-}
-<svg viewBox="0 0 400 30" xmlns="http://www.w3.org/2000/svg"> - <text y="20" letter-spacing="2">Bigger letter-spacing</text> - <text x="200" y="20" letter-spacing="-0.5">Smaller letter-spacing</text> -</svg>- -
{{EmbedLiveSample("topExample", "200", "30")}}
-Usage notes
- -| Value | -normal | {{cssxref("length")}} |
-
|---|---|
| Default value | -normal |
-
| Animatable | -Yes | -
For a description of the values, please refer to the CSS letter-spacing property.
As of May 2019, Firefox ignores letter-spacing and renders text without.
Specifications
- -{{Specifications}} - -Browser compatibility
- -{{Compat}}
- -See also
- --
-
{{SVGRef}}
-
-marker-end 属性将在给定形状的最终顶点绘制的箭头或者多边形标记。
对于除 SVG 的 polyline 和 path 元素之外的所有形状元素，最后的一个顶点与第一个顶点相同。在这种情况下，如果 SVG 的 marker-start 属性和 marker-end 的值都不是 none ，然后再最后一个顶点渲染两个图标。 对于一个 <path> 元素， 对于每个封闭的子路径，他的最后一个顶点都与第一个顶点相同。 marker-end 仅在路径数据的最终顶点上呈现。
Note: 作为一个图像属性，marker-end 可以用作 CSS 属性。
作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, and {{SVGElement("rect")}}
- -
-
-
-
-
-
-html, body, svg {
- height: 100%;
-}
-<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-end="url(#triangle)"/> -</svg> -- -
{{EmbedLiveSample("topExample", "200", "200")}}
-使用说明
- -| Value | -none | <marker-ref> |
-
|---|---|
| Default value | -none |
-
| Animatable | -Yes | -
-
-
规范
- -{{Specifications}} - -浏览器兼容性
- -{{Compat}}
- -另见
- --
-
{{SVGRef}}
-
-marker-start 属性将在给定形状的起始顶点绘制的箭头或者多边形标记
对于除 SVG 的 polyline 和 path 元素之外的所有形状元素，最后的一个顶点与第一个顶点相同。在这种情况下，如果 SVG 的marker-start属性和 {{SVGAttr("marker-end")}} 的值都不是 none ，然后再最后一个顶点渲染两个图标。 对于一个 <path> 元素， 对于每个封闭的子路径，他的最后一个顶点都与第一个顶点相同。 marker-end 仅在路径数据的起始顶点上呈现。
Note:作为一个图像属性， marker-start 可以用作 CSS 属性。
作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, 和{{SVGElement("rect")}}
- -
-
-
-
-
-
-html, body, svg {
- height: 100%;
-}
-<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> -- -
{{EmbedLiveSample("topExample", "200", "200")}}
-使用说明
- -| 值 | -none | <marker-ref> |
-
|---|---|
| 默认值 | -none |
-
| 可用作与动画 | -是 | -
-
-
规范
- -{{Specifications}} - -浏览器兼容性
- -{{Compat}}
- -另见
- --
-
mask属性绑定的元素将应用给定的{{ SVGElement("mask") }}元素。
作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。
- -用法
- -| 类别 | -外观属性 | -
|---|---|
| 值 | -<FuncIRI> | none | inherit | -
| 可变性 | -Yes | -
-
-
示例
- -元素
- -下列元素可以使用mask属性：
规范
- -{{Specifications}} - -相关内容
- --
-
{{SVGRef}}
-
-The max attribute specifies the maximum value of the active animation duration.
Five elements are using this attribute: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, and {{SVGElement("set")}}
- -
-
-
-
-
-
-html, body, svg {
- height: 100%;
-}
-<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> - <circle cx="60" cy="10" r="10"> - <animate attributeName="cx" dur="4s" max="6s" repeatCount="indefinite" - values="60 ; 110 ; 60 ; 10 ; 60" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> - <animate attributeName="cy" dur="4s" max="6s" repeatCount="indefinite" - values="10 ; 60 ; 110 ; 60 ; 10" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> - </circle> -</svg>- -
{{EmbedLiveSample("topExample", "200", "200")}}
-Usage notes
- -| Value | -<clock-value> |
-
|---|---|
| Default value | -None | -
| Animatable | -No | -
-
-
Specifications
- -{{Specifications}} - -Browser compatibility
- -{{Compat}}
- -See also
- --
-
{{SVGRef}}
-
-media属性指定只有符合{{Glossary("media query")}}的样式表才会被应用。
只有一个元素使用这个属性： {{SVGElement("style")}}
- -
-
-
-
-
-
-html, body, svg {
- height: 100%;
-}
-<svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg">
- <style>
- rect { fill: black; }
- </style>
- <style media="all and (min-width: 600px)">
- rect { fill: seagreen; }
- </style>
-
- <text y="15">Resize the window to see the effect</text>
- <rect y="20" width="200" height="200" />
-</svg>
-
-{{EmbedLiveSample("topExample", "200", "200")}}
-Usage notes
- -| Value | -<media-query-list> |
-
|---|---|
| Default value | -all |
-
| Animatable | -Yes | -
-
-
规范
- -{{Specifications}} - -浏览器兼容性
- -{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/media/index.md b/files/zh-cn/web/svg/attribute/media/index.md new file mode 100644 index 00000000000000..1e33bca1aec5d1 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/media/index.md @@ -0,0 +1,52 @@ +--- +title: media +slug: Web/SVG/Attribute/media +translation_of: Web/SVG/Attribute/media +--- +{{SVGRef}} + +**`media`**属性指定只有符合{{Glossary("media query")}}的样式表才会被应用。 + +只有一个元素使用这个属性： {{SVGElement("style")}} + +## 示例 + +```css hidden +html, body, svg { + height: 100%; +} +``` + +```html + +``` + +{{EmbedLiveSample("示例", "200", "200")}} + +## Usage notes + +| Value | [`opacity 属性指定了一个对象或一组对象的透明度，也就是说，元素后面的背景的透过率。
- -作为一个外观属性，它可以直接用作 CSS 样式表内部的属性，请阅读 {{ cssxref("opacity","CSS opacity") }}以了解更多信息。
- -用法
- -| 类别 | -外观属性 | -
|---|---|
| 值 | -<opacity-value> | inherit | -
| 可变性 | -Yes | -
-
-
示例
- -元素
- -以下元素可以使用opacity属性：
-
-
规范
- -{{Specifications}} - -参见
- --
-
« SVG Attribute reference home
- -order 属性确定被用作{{ SVGElement("feConvolveMatrix") }}元素的矩阵的大小。
- -提供的值必须是大于 0 的<整数>. 第一个值<orderX>,确定矩阵的列数。第二个值<orderY>确定矩阵的行数。如果<orderY>没有指定，那么它的默认值相当于<orderX>的值。
- -一个典型的值是 order="3". 建议只使用较小的值 (例如 3); 大值可能会导致较高的 CPU 开销而且通常界面上并不能表现出高耗能造成的效果。
- -如果未指定该属性，则其效果就如同指定值为 3.
- -Usage context
- -| Categories | -None | -
|---|---|
| Value | -<number-optional-number> | -
| Animatable | -Yes | -
Example
- -Elements
- -下列元素可以使用 order 属性
- --
-
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/order/index.md b/files/zh-cn/web/svg/attribute/order/index.md new file mode 100644 index 00000000000000..4f032e4ee56878 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/order/index.md @@ -0,0 +1,33 @@ +--- +title: order +slug: Web/SVG/Attribute/order +translation_of: Web/SVG/Attribute/order +--- +« [SVG Attribute reference home](/en/SVG/Attribute) + +order 属性确定被用作{{ SVGElement("feConvolveMatrix") }}元素的矩阵的大小。 + +提供的值必须是大于 0 的[<整数>](/en/SVG/Content_type#Integer). 第一个值\{{SVGRef}}
-
-该origin属性指定动画的运动原点。在 SVG 中无效。
只有一个元素正在使用此属性：{{SVGElement("animateMotion")}}
- -总体注释
- -| 值 | -default |
-
|---|---|
| 默认值 | -default |
-
| 可动画的 | -没有 | -
规范
- -{{Specifications}} - -也可以看看
- - diff --git a/files/zh-cn/web/svg/attribute/origin/index.md b/files/zh-cn/web/svg/attribute/origin/index.md new file mode 100644 index 00000000000000..71722488e14457 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/origin/index.md @@ -0,0 +1,25 @@ +--- +title: origin +slug: Web/SVG/Attribute/origin +translation_of: Web/SVG/Attribute/origin +--- +{{SVGRef}} + +该**`origin`**属性指定动画的运动原点。在 SVG 中无效。 + +只有一个元素正在使用此属性：{{SVGElement("animateMotion")}} + +## 总体注释 + +| 值 | `default` | +| -------- | --------- | +| 默认值 | `default` | +| 可动画的 | 没有 | + +## 规范 + +{{Specifications}} + +## 也可以看看 + +- [`origin`SMIL 动画规范中的定义](https://www.w3.org/TR/smil-animation/#MotionOriginAttribute) diff --git a/files/zh-cn/web/svg/attribute/overflow/index.html b/files/zh-cn/web/svg/attribute/overflow/index.html deleted file mode 100644 index ae374ae8dde1e1..00000000000000 --- a/files/zh-cn/web/svg/attribute/overflow/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: overflow -slug: Web/SVG/Attribute/overflow -translation_of: Web/SVG/Attribute/overflow ---- -« SVG Attribute reference home
- -The overflow attribute has the same parameter values as defined for the {{ cssxref("overflow","CSS overflow property") }}. However, the following additional points apply:
-
-
As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("overflow","CSS overflow") }} for further information.
- -Usage context
- -| Categories | -Presentation attribute | -
|---|---|
| Value | -visible | hidden | scroll | auto | inherit | -
| Animatable | -Yes | -
Example
- -Elements
- -The following elements can use the overflow attribute
-
-
规范
- -{{Specifications}} - -Browser compatibility
- -{{Compat}}
- -See also
- --
-
-
-
-{{SVGRef}}
- -The pathLength attribute lets authors specify a total length for the path, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio pathLength/(computed value of path length).
This can affect the actual rendered lengths of paths; including text paths, animation paths, and various stroke operations. Basically, all computations that require the length of the path. {{SVGAttr('stroke-dasharray')}}, for example, will assume the start of the path being 0 and the end point the value defined in the pathLength attribute.
Seven elements are using this attribute: {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, and {{SVGElement('rect')}}
-
-
-
-
-
-
-html,body,svg { height:100% }
-<svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
- <style>
- path {
- fill: none;
- stroke: black;
- stroke-width: 2;
- stroke-dasharray: 10;
- }
- </style>
-
- <!-- No pathLength, the real length of the path is used. In that case, 100 user units -->
- <path d="M 0,10 h100"/>
-
- <!-- compute everything like if the path length was 90 user units long -->
- <path d="M 0,20 h100" pathLength="90"/>
-
- <!-- compute everything like if the path length was 50 user units long -->
- <path d="M 0,30 h100" pathLength="50"/>
-
- <!-- compute everything like if the path length was 30 user units long -->
- <path d="M 0,40 h100" pathLength="30"/>
-
- <!-- compute everything like if the path length was 10 user units long -->
- <path d="M 0,50 h100" pathLength="10"/>
-</svg>
-
-{{EmbedLiveSample('topExample', '100%', 200)}}
-circle
- -For {{SVGElement('circle')}}, pathLength lets authors specify a total length for the circle, in user units.
| Value | -<number> | -
|---|---|
| Default value | -none | -
| Animatable | -Yes | -
ellipse
- -For {{SVGElement('ellipse')}}, pathLength lets authors specify a total length for the ellipse, in user units.
| Value | -<number> | -
|---|---|
| Default value | -none | -
| Animatable | -Yes | -
line
- -For {{SVGElement('line')}}, pathLength lets authors specify a total length for the line, in user units.
| Value | -<number> | -
|---|---|
| Default value | -none | -
| Animatable | -Yes | -
path
- -For {{SVGElement('path')}}, pathLength lets authors specify a total length for the path, in user units.
| Value | -<number> | -
|---|---|
| Default value | -none | -
| Animatable | -Yes | -
polygon
- -For {{SVGElement('polygon')}}, pathLength lets authors specify a total length for the shape, in user units.
| Value | -<number> | -
|---|---|
| Default value | -none | -
| Animatable | -Yes | -
polyline
- -For {{SVGElement('polyline')}}, pathLength lets authors specify a total length for the shape, in user units.
| Value | -<number> | -
|---|---|
| Default value | -none | -
| Animatable | -Yes | -
rect
- -For {{SVGElement('circle')}}, pathLength lets authors specify a total length for the rectangle, in user units.
| Value | -<number> | -
|---|---|
| Default value | -none | -
| Animatable | -Yes | -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/pathlength/index.md b/files/zh-cn/web/svg/attribute/pathlength/index.md new file mode 100644 index 00000000000000..4a5a7afc279a4c --- /dev/null +++ b/files/zh-cn/web/svg/attribute/pathlength/index.md @@ -0,0 +1,115 @@ +--- +title: pathLength +slug: Web/SVG/Attribute/pathLength +translation_of: Web/SVG/Attribute/pathLength +--- +{{SVGRef}} + +The **`pathLength`** attribute lets authors specify a total length for the path, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio `pathLength`/(_computed value of path length_). + +This can affect the actual rendered lengths of paths; including text paths, animation paths, and various stroke operations. Basically, all computations that require the length of the path. {{SVGAttr('stroke-dasharray')}}, for example, will assume the start of the path being 0 and the end point the value defined in the `pathLength` attribute. + +Seven elements are using this attribute: {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, and {{SVGElement('rect')}} + +## 示例 + +```css hidden +html,body,svg { height:100% } +``` + +```html + +``` + +{{EmbedLiveSample('示例', '100%', 200)}} + +## circle + +For {{SVGElement('circle')}}, `pathLength` lets authors specify a total length for the circle, in user units. + +| Value | **[{{SVGRef}}
-
-The patternUnits attribute indicates which coordinate system to use for the geometry properties of the {{ SVGElement("pattern") }} element.
Only one element is using this attribute: {{SVGElement('pattern')}}
- -
-
-
-
-
-
-html,body,svg { height:100% }
-<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> - <!-- All geometry properties are relative to the current user space --> - <pattern id="p1" x="12.5" y="12.5" width="25" height="25" - patternUnits="userSpaceOnUse"> - <circle cx="10" cy="10" r="10" /> - </pattern> - - <!-- All geometry properties are relative to the target bounding box --> - <pattern id="p2" x=".125" y=".125" width=".25" height=".25" - patternUnits="objectBoundingBox"> - <circle cx="10" cy="10" r="10" /> - </pattern> - - <!-- Left square with user space tiles --> - <rect x="10" y="10" width="80" height="80" - fill="url(#p1)" /> - - <!-- Right square with bounding box tiles --> - <rect x="110" y="10" width="80" height="80" - fill="url(#p2)" /> -</svg>- -
{{EmbedLiveSample('topExample', '100%', 200)}}
-pattern
- -For {{SVGElement('pattern')}}, patternUnits defines the coordinate system in use for the geometry properties ({{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }}) of the element.
| Value | -userSpaceOnUse | objectBoundingBox |
-
|---|---|
| Default value | -objectBoundingBox |
-
| Animatable | -Yes | -
-
-
Specifications
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/patternunits/index.md b/files/zh-cn/web/svg/attribute/patternunits/index.md new file mode 100644 index 00000000000000..99a402cf6cc5ea --- /dev/null +++ b/files/zh-cn/web/svg/attribute/patternunits/index.md @@ -0,0 +1,60 @@ +--- +title: patternUnits +slug: Web/SVG/Attribute/patternUnits +translation_of: Web/SVG/Attribute/patternUnits +--- +{{SVGRef}} + +The **`patternUnits`** attribute indicates which coordinate system to use for the geometry properties of the {{ SVGElement("pattern") }} element. + +Only one element is using this attribute: {{SVGElement('pattern')}} + +## 示例 + +```css hidden +html,body,svg { height:100% } +``` + +```html + +``` + +{{EmbedLiveSample('示例', '100%', 200)}} + +## pattern + +For {{SVGElement('pattern')}}, `patternUnits` defines the coordinate system in use for the geometry properties ({{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }}) of the element. + +| Value | `userSpaceOnUse` \| `objectBoundingBox` | +| ------------- | --------------------------------------- | +| Default value | `objectBoundingBox` | +| Animatable | Yes | + +- userSpaceOnUse + - : This value indicates that all coordinates for the geometry preoperties refer to the user coordinate system as defined when the pattern was applied. +- objectBoundingBox + - : This value indicates that all coordinates for the geometry properties represent fractions or percentages of the bounding box of the element to which the mask is applied. A bounding box could be considered the same as if the content of the {{ SVGElement("mask") }} were bound to a "`0 0 1 1`" {{ SVGAttr("viewbox") }}. + +## Specifications + +{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/pointer-events/index.html b/files/zh-cn/web/svg/attribute/pointer-events/index.html deleted file mode 100644 index 4c9307b643faaa..00000000000000 --- a/files/zh-cn/web/svg/attribute/pointer-events/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: pointer-events -slug: Web/SVG/Attribute/pointer-events -translation_of: Web/SVG/Attribute/pointer-events ---- -{{SVGRef}}
-
-pointer-events 属性是一个展示属性，用于定义元素是否或何时可能是鼠标事件的目标元素。
- -Note: 作为一个展示属性， {{cssxref('pointer-events')}} 可以被当做 CSS 属性使用。
- -
-
-
-
-
-
-html,body,svg { height:100% }
-<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>- -
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
-})
-
-{{EmbedLiveSample('topExample', '100%', 150)}}
-作为一个展示属性，他可以被很多元素使用，但和它紧密相关的只有下面的 23 个元素: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('switch')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tspan')}}, {{SVGElement('use')}}
- -用法
- -| 值 | -bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none |
-
|---|---|
| 默认值 | -visiblePainted |
-
| 是否可动画 | -Yes | -
为了详细了解每个可能的值，请参考 CSS 文档 {{cssxref('pointer-events')}}.
- -规范
- -{{Specifications}} - -浏览器兼容性
- -{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/pointer-events/index.md b/files/zh-cn/web/svg/attribute/pointer-events/index.md new file mode 100644 index 00000000000000..2b13527466a490 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/pointer-events/index.md @@ -0,0 +1,72 @@ +--- +title: pointer-events +slug: Web/SVG/Attribute/pointer-events +translation_of: Web/SVG/Attribute/pointer-events +--- +{{SVGRef}} + +pointer-events 属性是一个展示属性，用于定义元素是否或何时可能是鼠标事件的目标元素。 + +**Note:** 作为一个展示属性， {{cssxref('pointer-events')}} 可以被当做 CSS 属性使用。 + +## 示例 + +```css hidden +html,body,svg { height:100% } +``` + +```html + +``` + +```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 +}) +``` + +{{EmbedLiveSample('示例', '100%', 150)}} + +作为一个展示属性，他可以被很多元素使用，但和它紧密相关的只有下面的 23 个元素: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('switch')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tspan')}}, {{SVGElement('use')}} + +## 用法 + +| 值 | `bounding-box` \| `visiblePainted` \| `visibleFill` \| `visibleStroke` \| `visible` \| `painted` \| `fill` \| `stroke` \| `all` \| `none` | +| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| 默认值 | `visiblePainted` | +| 是否可动画 | Yes | + +_为了详细了解每个可能的值，请参考 CSS 文档 {{cssxref('pointer-events')}}._ + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} diff --git a/files/zh-cn/web/svg/attribute/points/index.html b/files/zh-cn/web/svg/attribute/points/index.html deleted file mode 100644 index 813832cf0ef7eb..00000000000000 --- a/files/zh-cn/web/svg/attribute/points/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: points -slug: Web/SVG/Attribute/points -tags: - - SVG - - SVG 属性 - - 需要兼容性表 - - 需要示例 -translation_of: Web/SVG/Attribute/points ---- - - -points属性定义了用来画一个{{ SVGElement("polyline") }}元素或画一个 SVGElement("polygon") }}元素的点的数列。
每个点用用户坐标系统中的一个 X 坐标和 Y 坐标定义。用逗号分开每个点的 X 和 Y 坐标标记是一个常用实践（但是并非必要），使用空间标注每个点。
- -用法
- -| 类别 | -无 | -
|---|---|
| 值 | -<list-of-points> | -
| 可变性 | -Yes | -
示例
- -<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属性：
-
-
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/points/index.md b/files/zh-cn/web/svg/attribute/points/index.md new file mode 100644 index 00000000000000..d16e14674f4cdb --- /dev/null +++ b/files/zh-cn/web/svg/attribute/points/index.md @@ -0,0 +1,42 @@ +--- +title: points +slug: Web/SVG/Attribute/points +tags: + - SVG + - SVG 属性 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/points +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +`points`属性定义了用来画一个{{ SVGElement("polyline") }}元素或画一个 SVGElement("polygon") }}元素的点的数列。 + +每个点用用户坐标系统中的一个 X 坐标和 Y 坐标定义。用逗号分开每个点的 X 和 Y 坐标标记是一个常用实践（但是并非必要），使用空间标注每个点。 + +## 用法 + +| 类别 | 无 | +| ------ | ---------------- | +| 值 |SVG 表现属性是能够被用在 SVG 元素属性上的 CSS 属性。
- -
-
-
--
-
Attributes
- --
-
Browser compatibility
- - - -{{Compat("svg.attributes.presentation")}}
diff --git a/files/zh-cn/web/svg/attribute/presentation/index.md b/files/zh-cn/web/svg/attribute/presentation/index.md new file mode 100644 index 00000000000000..b2cc384211ac63 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/presentation/index.md @@ -0,0 +1,266 @@ +--- +title: SVG Presentation Attributes +slug: Web/SVG/Attribute/Presentation +translation_of: Web/SVG/Attribute/Presentation +--- +SVG 表现属性是能够被用在 SVG 元素属性上的 CSS 属性。 + +- [alignment-baseline](#attr-alignment-baseline) +- [baseline-shift](#attr-baseline-shift) +- [clip](#attr-clip) +- [clip-path](#attr-clip-path) +- [clip-rule](#attr-clip-rule) +- [color](#attr-color) +- [color-interpolation](#attr-color-interpolation) +- [color-interpolation-filters](#attr-color-interpolation-filters) +- [color-profile](#attr-color-profile) +- [color-rendering](#attr-color-rendering) +- [cursor](#attr-cursor) +- [direction](#attr-direction) +- [display](#attr-display) +- [dominant-baseline](#attr-dominant-baseline) +- [enable-background](#attr-enable-background) +- [fill](#attr-fill) +- [fill-opacity](#attr-fill-opacity) +- [fill-rule](#attr-fill-rule) +- [filter](#attr-filter) +- [flood-color](#attr-flood-color) +- [flood-opacity](#attr-flood-opacity) +- [font-family](#attr-font-family) +- [font-size](#attr-font-size) +- [font-size-adjust](#attr-font-size-adjust) +- [font-stretch](#attr-font-stretch) +- [font-style](#attr-font-style) +- [font-variant](#attr-font-variant) +- [font-weight](#attr-font-weight) +- [glyph-orientation-horizontal](#attr-glyph-orientation-horizontal) +- [glyph-orientation-vertical](#attr-glyph-orientation-vertical) +- [image-rendering](#attr-image-rendering) +- [kerning](#attr-kerning) +- [letter-spacing](#attr-letter-spacing) +- [lighting-color](#attr-lighting-color) +- [marker-end](#attr-marker-end) +- [marker-mid](#attr-marker-mid) +- [marker-start](#attr-marker-start) +- [mask](#attr-mask) +- [opacity](#attr-opacity) +- [overflow](#attr-overflow) +- [pointer-events](#attr-pointer-events) +- [shape-rendering](#attr-shape-rendering) +- [solid-color](#attr-solid-color) +- [solid-opacity](#attr-solid-opacity) +- [stop-color](#attr-stop-color) +- [stop-opacity](#attr-stop-opacity) +- [stroke](#attr-stroke) +- [stroke-dasharray](#attr-stroke-dasharray) +- [stroke-dashoffset](#attr-stroke-dashoffset) +- [stroke-linecap](#attr-stroke-linecap) +- [stroke-linejoin](#attr-stroke-linejoin) +- [stroke-miterlimit](#attr-stroke-miterlimit) +- [stroke-opacity](#attr-stroke-opacity) +- [stroke-width](#attr-stroke-width) +- [text-anchor](#attr-text-anchor) +- [text-decoration](#attr-text-decoration) +- [text-rendering](#attr-text-rendering) +- [transform](#attr-transform) +- [unicode-bidi](#attr-unicode-bidi) +- [vector-effect](#attr-vector-effect) +- [visibility](#attr-visibility) +- [word-spacing](#attr-word-spacing) +- [writing-mode](#attr-writing-mode) + +## Attributes + +- {{SVGAttr('alignment-baseline')}} + - : It specifies how an object is aligned along the font baseline with respect to its parent. + _Value_: **`auto`**|`baseline`|`before-edge`|`text-before-edge`|`middle`|`central`|`after-edge`|`text-after-edge`|`ideographic`|`alphabetic`|`hanging`|`mathematical`|`inherit`; _Animatable_: **Yes** +- {{SVGAttr('baseline-shift')}} + - : It allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. + _Value_: **`auto`**|`baseline`|`super`|`sub`|[\« SVG 属性参考
- -preserveAlpha 属性表示{{ SVGElement("feConvolveMatrix") }} 元素怎样处透明度。
取值为 false 表示 feConvolveMatrix 元素将应用在包括透明度通道的所有的通道。这是默认的选项。
取值为 true 表示 feConvolveMatrix 仅应用在颜色通道。
用法
- -| 类别 | -None | -
|---|---|
| 值 | -true | false |
-
| 可变性 | -Yes | -
示例
- -元素
- -下列元素可以使用 preserveAlpha 属性
-
-
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/preservealpha/index.md b/files/zh-cn/web/svg/attribute/preservealpha/index.md new file mode 100644 index 00000000000000..1a3942885f4f53 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/preservealpha/index.md @@ -0,0 +1,31 @@ +--- +title: preserveAlpha +slug: Web/SVG/Attribute/preserveAlpha +translation_of: Web/SVG/Attribute/preserveAlpha +--- +« [SVG 属性参考](/en/SVG/Attribute) + +`preserveAlpha` 属性表示{{ SVGElement("feConvolveMatrix") }} 元素怎样处透明度。 + +取值为 `false` 表示 feConvolveMatrix 元素将应用在包括透明度通道的所有的通道。这是默认的选项。 + +取值为 `true` 表示 feConvolveMatrix 仅应用在颜色通道。 + +## 用法 + +| 类别 | None | +| ------ | ----------------- | +| 值 | `true` \| `false` | +| 可变性 | Yes | + +## 示例 + +## 元素 + +下列元素可以使用 `preserveAlpha` 属性 + +- {{ SVGElement("feConvolveMatrix") }} + +## 规范 + +{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/preserveaspectratio/index.html b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.html deleted file mode 100644 index 25153417b08c10..00000000000000 --- a/files/zh-cn/web/svg/attribute/preserveaspectratio/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: preserveAspectRatio -slug: Web/SVG/Attribute/preserveAspectRatio -tags: - - SVG - - SVG 属性 - - 需要实例 -translation_of: Web/SVG/Attribute/preserveAspectRatio ---- -« SVG Attribute reference home
- -有时候，通常我们使用 {{ SVGAttr("viewBox") }} 属性时，希望图形拉伸占据整个视口。 在其他情况下，为了保持图形的长宽比，必须使用统一的缩放比例。
-
- preserveAspectRatio属性表示是否强制进行统一缩放。
-
- 对于支持该属性的所有元素 (如上所示)，除了 {{ SVGElement("image") }} 元素之外，preserveAspectRatio 只适用于在同一元素上为 {{ SVGAttr("viewBox") }} 提供的值。对于这些元素，如果没有提供属性 {{ SVGAttr("viewBox") }} ，则忽略了 preserveAspectRatio。
-
- 对于 {{ SVGElement("image") }} 元素，preserveAspectRatio 指示引用的图像应该如何与参考矩形进行匹配，以及是否应该相对于当前用户坐标系保留参考图像的长宽比
上下文用法
- -| Categories | -None | -
|---|---|
| Value | -<align> [<meetOrSlice>] | -
| Animatable | -Yes | -
-
-
实例
- -元素
- -以下元素可使用 preserveAspectRatio 属性
-
-
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md new file mode 100644 index 00000000000000..ae29b4446f0716 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.md @@ -0,0 +1,75 @@ +--- +title: preserveAspectRatio +slug: Web/SVG/Attribute/preserveAspectRatio +tags: + - SVG + - SVG 属性 + - 需要实例 +translation_of: Web/SVG/Attribute/preserveAspectRatio +--- +« [SVG Attribute reference home](/en/SVG/Attribute) + +有时候，通常我们使用 {{ SVGAttr("viewBox") }} 属性时，希望图形拉伸占据整个视口。 在其他情况下，为了保持图形的长宽比，必须使用统一的缩放比例。 + +`preserveAspectRatio`属性表示是否强制进行统一缩放。 + +对于支持该属性的所有元素 (如上所示)，除了 {{ SVGElement("image") }} 元素之外，preserveAspectRatio 只适用于在同一元素上为 {{ SVGAttr("viewBox") }} 提供的值。对于这些元素，如果没有提供属性 {{ SVGAttr("viewBox") }} ，则忽略了 preserveAspectRatio。 + +对于 {{ SVGElement("image") }} 元素，preserveAspectRatio 指示引用的图像应该如何与参考矩形进行匹配，以及是否应该相对于当前用户坐标系保留参考图像的长宽比 + +## 上下文用法 + +| Categories | None | +| ---------- | ----------------------- | +| Value |« SVG Attribute reference home
- -primitiveUnits 属性为过滤器原语和定义过滤器原语子域中的各种各样的长度单位指定坐标系统.
如果 primitiveUnits 属性未指定，那么效果就如同指定值为 userSpaceOnUse 的效果是一样的。
- -Usage context
- -| Categories | -None | -
|---|---|
| Value | -userSpaceOnUse | objectBoundingBox |
-
| Animatable | -Yes | -
-
-
Examples
- -Elements
- -下列元素可以使用 primitiveUnits 属性：
- --
-
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/primitiveunits/index.md b/files/zh-cn/web/svg/attribute/primitiveunits/index.md new file mode 100644 index 00000000000000..41fc6fd0dcdcdb --- /dev/null +++ b/files/zh-cn/web/svg/attribute/primitiveunits/index.md @@ -0,0 +1,34 @@ +--- +title: primitiveUnits +slug: Web/SVG/Attribute/primitiveUnits +translation_of: Web/SVG/Attribute/primitiveUnits +--- +« [SVG Attribute reference home](/en/SVG/Attribute) + +`primitiveUnits 属性为过滤器原语和定义过滤器原语子域中的各种各样的长度单位指定坐标系统`. + +如果 primitiveUnits 属性未指定，那么效果就如同指定值为 userSpaceOnUse 的效果是一样的。 + +## Usage context + +| Categories | _None_ | +| ---------- | ------------------------------------------- | +| Value | **`userSpaceOnUse`** \| `objectBoundingBox` | +| Animatable | Yes | + +- userSpaceOnUse + - : 当{{ SVGElement("filter") }}元素使用该值的时候，过滤器中定义的任意长度的值都基于当前用户坐标系统 (例如通过{{ SVGAttr("filter") }}属性引用该{{ SVGElement("filter") }}元素的元素所在的用户坐标系统). +- objectBoundingBox + - : 在 filter 中定义的任意长度值表示引用该 filter 的元素的包围盒的分数或百分比。 + +## Examples + +## Elements + +下列元素可以使用 primitiveUnits 属性： + +- {{ SVGElement("filter") }} + +## 规范 + +{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/r/index.html b/files/zh-cn/web/svg/attribute/r/index.html deleted file mode 100644 index c0edbd07206f97..00000000000000 --- a/files/zh-cn/web/svg/attribute/r/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: r -slug: Web/SVG/Attribute/r -tags: - - SVG - - SVG 属性 -translation_of: Web/SVG/Attribute/r ---- -{{SVGRef}}
-
-r 属性用来定义圆的半径。
有两个元素在使用该属性：{{SVGElement("circle")}} 和 {{SVGElement("radialGradient")}}
- -
-
-
-
-
-
-html,body,svg { height:100% }
-<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>- -
{{EmbedLiveSample('topExample', '100%', 200)}}
-圆
- -对于 {{SVGElement('circle')}}，r 用来定义圆的半径以及它的大小。取值小于或等于零，圆将不会被绘制出来。
| 值 | -<length> | <percentage> | -
|---|---|
| 默认值 | -0 |
-
| 可变性 | -Yes | -
注：起始于 SVG2，r 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。
径向渐变
- -对于 {{ SVGElement("radialGradient") }}，r 用来定义径向渐变终止圆的半径。
渐变将以此绘制出来：100% 渐变停止点会被映射到终止圆的一周上。取值小于或等于零，将会使用最后一个渐变 {{ SVGElement("stop") }} 的颜色和不透明度，导致该区域被绘制为单色。
- -| 值 | -<length> | <percentage> | -
|---|---|
| 默认值 | -50% |
-
| 可变性 | -Yes | -
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/r/index.md b/files/zh-cn/web/svg/attribute/r/index.md new file mode 100644 index 00000000000000..0e5d8c73d620c2 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/r/index.md @@ -0,0 +1,72 @@ +--- +title: r +slug: Web/SVG/Attribute/r +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/r +--- +{{SVGRef}} + +**`r`** 属性用来定义圆的半径。 + +有两个元素在使用该属性：{{SVGElement("circle")}} 和 {{SVGElement("radialGradient")}} + +## 示例 + +```css hidden +html,body,svg { height:100% } +``` + +```html + +``` + +{{EmbedLiveSample('示例', '100%', 200)}} + +## 圆 + +对于 {{SVGElement('circle')}}，`r` 用来定义圆的半径以及它的大小。取值小于或等于零，圆将不会被绘制出来。 + +| 值 | **[radius属性代表了一个给定{{SVGElement("feMorphology")}}滤镜上的操作。如果提供了两个<number>，则第一个数代表了 x-radius，第二个数代表了 y-radius。如果只提供了一个数字，则值同时用于 x 和 y。值是在{{SVGElement("filter")}} 元素的属性{{SVGAttr("primitiveUnits")}} 确定的坐标系统内。
如果没有指定该属性值，效果等同于指定了一个0值。
- -用法
- -| 类别 | -无 | -
|---|---|
| 值 | -<number-optional-number> | -
| 可变性 | -Yes | -
示例
- -元素
- -以下元素可以使用radius属性：
-
-
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/radius/index.md b/files/zh-cn/web/svg/attribute/radius/index.md new file mode 100644 index 00000000000000..1bf1c38d4b2089 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/radius/index.md @@ -0,0 +1,35 @@ +--- +title: radius +slug: Web/SVG/Attribute/radius +tags: + - SVG + - SVG 属性 + - 滤镜 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/radius +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +`radius`属性代表了一个给定{{SVGElement("feMorphology")}}滤镜上的操作。如果提供了两个[\« SVG 属性参考
- -这个属性表示动画将发生的次数。
- -这个属性的值指定了重复的次数。它也可以包括用分数值表示。它的值必须大于 0。
- -用法解释
- -| 类别 | -动画时间属性 | -
|---|---|
| Value | -<number> | "indefinite" | -
| Animatable | -No | -
{{ page("/en/SVG/Content_type","Number") }}
- -Example
- -Elements
- -The following elements can use the repeatCount attribute
-
-
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/repeatcount/index.md b/files/zh-cn/web/svg/attribute/repeatcount/index.md new file mode 100644 index 00000000000000..e4c8c9f92f7294 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/repeatcount/index.md @@ -0,0 +1,31 @@ +--- +title: repeatCount +slug: Web/SVG/Attribute/repeatCount +translation_of: Web/SVG/Attribute/repeatCount +--- +« [SVG 属性参考](/en/SVG/Attribute) + +这个属性表示动画将发生的次数。 + +这个属性的值指定了重复的次数。它也可以包括用分数值表示。它的值必须大于 0。 + +## 用法解释 + +| 类别 | 动画时间属性 | +| ---------- | ------------------------------------------------------- | +| Value | [属性result定义了滤镜的分配名。如果提供了它，则经过滤镜处理的结果即图形可以再次滤镜处理，在后继滤镜（即另一个{{ SVGElement("filter") }}元素）上通过一个{{ SVGAttr("in") }}属性引用之前的结果。如果没有提供result值，而且如果下一个滤镜也没有提供{{ SVGAttr("in") }}属性值，则输出只可作为下一个滤镜的隐式输入。
用法
- -| 类别 | -无 | -
|---|---|
| 值 | -<filter-primitive-reference> | -
| 可变性 | -Yes | -
注意<filter-primitive-reference>不是一个 XML ID，换句话说，<filter-primitive-reference>只在给定的{{ SVGElement("filter") }}元素内部有意义，因此只有局部范围。在同一个{{ SVGElement("filter") }}元素内部，同一个<filter-primitive-reference>出现多次也是合法的。如果引用了，<filter-primitive-reference>将使用在给定结果前面、离给定结果最近的滤镜。
元素
- -下列元素可以使用result属性：
-
-
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/result/index.md b/files/zh-cn/web/svg/attribute/result/index.md new file mode 100644 index 00000000000000..a7d6626ab28dfb --- /dev/null +++ b/files/zh-cn/web/svg/attribute/result/index.md @@ -0,0 +1,31 @@ +--- +title: result +slug: Web/SVG/Attribute/result +tags: + - SVG + - SVG 属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/result +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +属性`result`定义了滤镜的分配名。如果提供了它，则经过滤镜处理的结果即图形可以再次滤镜处理，在后继滤镜（即另一个{{ SVGElement("filter") }}元素）上通过一个{{ SVGAttr("in") }}属性引用之前的结果。如果没有提供`result`值，而且如果下一个滤镜也没有提供{{ SVGAttr("in") }}属性值，则输出只可作为下一个滤镜的隐式输入。 + +## 用法 + +| 类别 | 无 | +| ------ | ---------------------------- | +| 值 |{{SVGRef}}
-
-rx 属性用于定义水平轴向的圆角半径尺寸。
{{SVGElement("ellipse")}} 和 {{SVGElement("rect")}} 两个基本图形使用了这个属性。
- -
-
-
-
-
-
-
-
-
-
-html,body,svg { height:100% }
-<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>- -
{{EmbedLiveSample('topExample', '100%', 200)}}
-椭圆
- -对于 {{SVGElement('ellipse')}}，rx 属性定义了水平方向的半径尺寸。如果使用了负值或者零，那么椭圆就不会被绘制。
| 取值 | -<length> | <percentage> | auto |
-
|---|---|
| 默认值 | -auto |
-
| 是否支持动画 | -是 | -
注释： 从 SVG2 开始， rx 是一个几何属性，也就是说，这个属性也可以用作椭圆的 CSS 属性。
矩形
- -对于 {{SVGElement('rect')}}，rx 定义了水平方向的圆角尺寸。
rx 属性的实际效果取决于矩形的 {{SVGAttr("ry")}} 属性和宽度：
-
-
| 取值 | -<length> | <percentage> | auto |
-
|---|---|
| 缺省值 | -auto |
-
| 是否支持动画 | -是 | -
注释： 从 SVG2 开始，rx 是一个几何属性，也就是说，这个属性也可以用作矩形（rect）的 CSS 属性。
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/rx/index.md b/files/zh-cn/web/svg/attribute/rx/index.md new file mode 100644 index 00000000000000..248c7e876356ec --- /dev/null +++ b/files/zh-cn/web/svg/attribute/rx/index.md @@ -0,0 +1,65 @@ +--- +title: rx +slug: Web/SVG/Attribute/rx +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/rx +--- +{{SVGRef}} + +**`rx`** 属性用于定义水平轴向的圆角半径尺寸。 + +{{SVGElement("ellipse")}} 和 {{SVGElement("rect")}} 两个基本图形使用了这个属性。 + +## 示例 + +```css hidden +html,body,svg { height:100% } +``` + +```html + +``` + +{{EmbedLiveSample('示例', '100%', 200)}} + +## 椭圆 + +对于 {{SVGElement('ellipse')}}，`rx` 属性定义了水平方向的半径尺寸。如果使用了负值或者零，那么椭圆就不会被绘制。 + +| 取值 | **[属性scale定义了用在{{SVGElement("feDisplacementMap")}}滤镜上的置换缩放因子。它的总值表达在{{SVGElement("filter")}}元素的属性{{SVGAttr("primitiveUnits")}}确定的坐标系统中。
如果这个属性的值是0，则它的操作对源图像没有影响。
- -如果没有指定这个属性，则效果等同于它被指定了0值。
- -用法
- -| 类别 | -无 | -
|---|---|
| 值 | -<number> | -
| 可变性 | -Yes | -
示例
- -元素
- -下列元素可以使用scale属性：
-
-
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/scale/index.md b/files/zh-cn/web/svg/attribute/scale/index.md new file mode 100644 index 00000000000000..5eb6f30e0553cb --- /dev/null +++ b/files/zh-cn/web/svg/attribute/scale/index.md @@ -0,0 +1,37 @@ +--- +title: scale +slug: Web/SVG/Attribute/scale +tags: + - SVG + - SVG 属性 + - 滤镜 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/scale +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +属性`scale`定义了用在{{SVGElement("feDisplacementMap")}}滤镜上的置换缩放因子。它的总值表达在{{SVGElement("filter")}}元素的属性{{SVGAttr("primitiveUnits")}}确定的坐标系统中。 + +如果这个属性的值是**0**，则它的操作对源图像没有影响。 + +如果没有指定这个属性，则效果等同于它被指定了**0**值。 + +## 用法 + +| 类别 | _无_ | +| ------ | --------------------------------------- | +| 值 | [seed属性代表了{{SVGElement("feTurbulence")}}元素生成的伪随机数的开始数字。
如果没有指定这个属性，它等效于指定了一个0值。
用法
- -| 类别 | -None | -
|---|---|
| 值 | -<number> | -
| 可变性 | -Yes | -
示例
- -元素
- -以下元素可以使用seed属性：
-
-
规范
- -{{Specifications}} diff --git a/files/zh-cn/web/svg/attribute/seed/index.md b/files/zh-cn/web/svg/attribute/seed/index.md new file mode 100644 index 00000000000000..46b234e7ea3d2f --- /dev/null +++ b/files/zh-cn/web/svg/attribute/seed/index.md @@ -0,0 +1,35 @@ +--- +title: seed +slug: Web/SVG/Attribute/seed +tags: + - SVG + - SVG 属性 + - 滤镜 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/seed +--- +« [SVG 属性参考主页](/en/SVG/Attribute) + +`seed`属性代表了{{SVGElement("feTurbulence")}}元素生成的伪随机数的开始数字。 + +如果没有指定这个属性，它等效于指定了一个`0`值。 + +## 用法 + +| 类别 | _None_ | +| ------ | ----------------------------------------------- | +| 值 | [指定 SVG 元素{{SVGElement("path")}}的渲染模式。
- -使用参考
- -| 类型 | -外观属性 | -
|---|---|
| 值 | -auto | optimizeSpeed | crispEdges | geometricPrecision | inherit | -
| 可运动 | -Yes | -
-
-
示例
- -<svg xmlns="http://www.w3.org/2000/svg" - version="1.1" width="100" height="100" - shape-rendering="optimizeSpeed"><!-- 这个示例在 Firefox 下看区别更明显 -->- -
|
- shape-rendering: geometricPrecision: - -
|
-
- shape-rendering: optimizeSpeed - -
|
-
同样，你也可以在 CSS 样式中使用 shape-rendering:
- -<svg xmlns="http://www.w3.org/2000/svg" - version="1.1" width="100" height="100" - style="shape-rendering:optimizeSpeed;">- -
关联元素
- -下面的元素可以使用这个属性
- --
-