diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/svg/attribute | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/svg/attribute')
92 files changed, 8233 insertions, 0 deletions
diff --git a/files/zh-cn/web/svg/attribute/accent-height/index.html b/files/zh-cn/web/svg/attribute/accent-height/index.html new file mode 100644 index 0000000000..ba39552047 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/accent-height/index.html @@ -0,0 +1,43 @@ +--- +title: accent-height +slug: Web/SVG/Attribute/accent-height +translation_of: Web/SVG/Attribute/accent-height +--- +<p>« 回到SVG属性指南首页</p> + +<p>此属性定义从原点到重点字符顶部的距离，通过字体坐标系内的距离测量。</p> + +<p>若未定义该属性，那么该属性就会被设置为{{ SVGAttr("ascent") }}。</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/fonts.html#FontFaceElementAccentHeightAttribute" title="http://www.w3.org/TR/SVG/fonts.html#FontFaceElementAccentHeightAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en-US/docs/SVG/Content_type","Number") }}</p> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>accent-height</code> attribute</p> + +<ul> + <li>{{ SVGElement("font-face") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/accumulate/index.html b/files/zh-cn/web/svg/attribute/accumulate/index.html new file mode 100644 index 0000000000..8a779fd704 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/accumulate/index.html @@ -0,0 +1,58 @@ +--- +title: accumulate +slug: Web/SVG/Attribute/accumulate +tags: + - SVG + - SVG属性 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/accumulate +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性控制了动画是否是累加的。</p> + +<p>在原来的结果的基础上重复动画的时候，它通常很有用，每一次循环都累加。这个属性告诉动画是否是每次循环，前一个动画属性值要加上去。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画累加属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong title="this is the default value">none</strong> | sum</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#AdditionAttributes" title="http://www.w3.org/TR/SVG/animate.html#AdditionAttributes">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>sum</dt> + <dd>指定第一次循环后的每次循环建立在上次循环的终值上。</dd> + <dt>none</dt> + <dd>指定重复循环是不累加的。这是默认值。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>additive</code>属性：</p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateMotion") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/alignment-baseline/index.html b/files/zh-cn/web/svg/attribute/alignment-baseline/index.html new file mode 100644 index 0000000000..33eb2afa6c --- /dev/null +++ b/files/zh-cn/web/svg/attribute/alignment-baseline/index.html @@ -0,0 +1,92 @@ +--- +title: alignment-baseline +slug: Web/SVG/Attribute/alignment-baseline +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/alignment-baseline +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>alignment-baseline</code>属性指定了一个对象如何相对于它的父元素对齐。这个属性指定了该元素的基线对齐到相应的父元素的基线。举个例子，允许罗马文字中的字母表基线在字体大小发生变化时保持一致。它的默认值是baseline，与该<code>alignment-baseline</code>属性的计算值同名。</p> + +<p>作为一个外观属性，它还可以直接作为CSS样式表内部的属性使用。请阅读{{ cssxref("alignment-baseline","CSS alignment-baseline") }}以了解更多信息。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong>auto</strong> | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AlignmentBaselineProperty" title="http://www.w3.org/TR/SVG11/text.html#AlignmentBaselineProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre><code><?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></code> +</pre> + +<h2 id="元素">元素</h2> + +<p>下列元素使用<code>alignment-baseline属性：</code></p> + +<ul> + <li>{{ SVGElement("tspan") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("textPath") }}</li> +</ul> + +<p>如果对象要在别的元素中对齐（比如在{{ SVGElement("text") }}元素中），请阅读{{ SVGAttr("dominant-baseline") }}。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ cssxref("alignment-baseline","CSS alignment-baseline") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/attributename/index.html b/files/zh-cn/web/svg/attribute/attributename/index.html new file mode 100644 index 0000000000..0f7b065b02 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/attributename/index.html @@ -0,0 +1,64 @@ +--- +title: attributeName +slug: Web/SVG/Attribute/attributeName +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/attributeName +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性标识了在一个动画动作环节中，父元素的需要被改变的属性名。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画属性目标属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><attributeName></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#AttributeNameAttribute" title="http://www.w3.org/TR/SVG/animate.html#AttributeNameAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>下面的示例使用了y作为<code>attributeName</code>，通过改变一个矩形在Y轴上的位置来变动这个矩形。</p> + +<pre class="brush: xml"><?xml version="1.0"?> +<svg width="250" height="250" + viewPort="0 0 250 250" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <rect x="50" y="50" width="100" height="100"> + <animate attributeType="XML" + attributeName="y" + from="0" to="50" + dur="5s"/> + </rect> +</svg></pre> + +<p> </p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>attributeName</code>属性：</p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> + <li>{{ SVGElement("set") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/attributetype/index.html b/files/zh-cn/web/svg/attribute/attributetype/index.html new file mode 100644 index 0000000000..371d672c2b --- /dev/null +++ b/files/zh-cn/web/svg/attribute/attributetype/index.html @@ -0,0 +1,60 @@ +--- +title: attributeType +slug: Web/SVG/Attribute/attributeType +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/attributeType +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性指定目标属性和它相对应的值处于哪个命名空间里。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画属性目标属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td>CSS | XML | <strong title="this is the default value">auto</strong></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#AttributeTypeAttribute" title="http://www.w3.org/TR/SVG/animate.html#AttributeTypeAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>这个属性可取下列值之一：</p> + +<dl> + <dt>CSS</dt> + <dd>指定{{ SVGAttr("attributeName") }}的值是一个CSS属性名。</dd> + <dt> </dt> + <dt>XML</dt> + <dd>指定{{ SVGAttr("attributeName") }}的值是一个XML属性名，在目标元素的默认XML命名空间里。</dd> + <dt>auto</dt> + <dd>编译器将把{{ SVGAttr("attributeName") }}匹配到目标元素的一个属性。用户代理先搜索CSS属性列表以找出一个匹配的属性名，如果找不到，再为这个元素搜索默认XML命名空间。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>attributeType</code>属性：</p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> + <li>{{ SVGElement("set") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/baseline-shift/index.html b/files/zh-cn/web/svg/attribute/baseline-shift/index.html new file mode 100644 index 0000000000..b8f1c8f5f5 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/baseline-shift/index.html @@ -0,0 +1,69 @@ +--- +title: baseline-shift +slug: Web/SVG/Attribute/baseline-shift +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/baseline-shift +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>属性<code>baseline-shift</code>允许相对于父文本内容元素的<code>dominant-baseline</code>重定位<code>dominant-baseline</code>。该切换对象必须是一个下标或上标。</p> + +<p>作为一个外观属性，它还可以直接作为CSS样式表内部的属性使用。请看{{ cssxref("baseline-shift","CSS baseline-shift") }}以了解更多信息。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong>auto</strong> | baseline | super | sub | <percentage> | <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a> | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty" title="http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>baseline</dt> + <dd>没有基线切换，<code>dominant-baseline</code>依然在原来的位置。</dd> + <dt>sub</dt> + <dd><code>dominant-baseline</code>切换到下标的默认位置。</dd> + <dt>super</dt> + <dd><code>dominant-baseline</code>切换到上标的默认位置</dd> + <dt><percentage></dt> + <dd>该属性的结果值是这个百分数乘以 {{ SVGElement("text") }}元素的{{ SVGAttr("line-height") }}。如果是正值，dominant-baseline向shift同方向移动结果值；如果是负值，dominant-baseline向shift反方向移动结果值，相对于父文本内容元素。值“0%”等于”baseline“。</dd> + <dt><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></dt> + <dd>如果是正值，dominant-baseline向shift同方向移动<a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>距离；如果是负值，dominant-baseline向shift反方向移动<a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>距离。值”0cm“等于”baseline“。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p><code><font face="Open Sans, Arial, sans-serif">下列这些元素可以使用</font>baseline-shift</code>属性。</p> + +<ul> + <li>{{ SVGElement("tspan") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("textPath") }}</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ cssxref("baseline-shift","CSS baseline-shift") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/baseprofile/index.html b/files/zh-cn/web/svg/attribute/baseprofile/index.html new file mode 100644 index 0000000000..973a26bcf7 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/baseprofile/index.html @@ -0,0 +1,61 @@ +--- +title: baseProfile +slug: Web/SVG/Attribute/baseProfile +translation_of: Web/SVG/Attribute/baseProfile +--- +<p>« 返回 SVG 特性参考</p> + +<p><code>baseProfile</code> 特性描述了作者认为正确渲染内容所需要的最小的 SVG 语言概述。这个特性不会说明任何处理限制，可以把它看作是元数据。 比如，这个特性的值可以被编辑工具用来在用户的修改超出所指定的基准概述范围时发出警告。</p> + +<p>每个 SVG 概述应该为这个特性定义一个适合的文本。如果没有指定这个特性，效果就跟指定 <code>none</code> 一样。</p> + +<h2 id="使用背景">使用背景</h2> + +<table> + <tbody> + <tr> + <th scope="row">目录</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong>none</strong> | full| basic| tiny </td> + </tr> + <tr> + <th scope="row">动画特性</th> + <td>无</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a href="http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty" title="http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty">SVG 1.1 (第二版)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>none</dt> + <dd>代表了最小的 SVG 语言配置，没有描述作者关于正确渲染内容的观点。</dd> + <dt>full</dt> + <dd>代表一个正常的概述，适用于 PC。</dd> + <dt>basic</dt> + <dd>代表一个轻量级的概述，适用于 PDA。</dd> + <dt>tiny </dt> + <dd>代表更轻量的概述，适用于手机。</dd> +</dl> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><svg width="120" height="120" version="1.1" + xmlns="http://www.w3.org/2000/svg" baseProfile="full"> + + ... + +</svg></pre> + +<h2 id="元素">元素</h2> + +<p>以下元素会用到 <code>baseProfile</code> 特性</p> + +<ul> + <li>{{ SVGElement("svg") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/begin/index.html b/files/zh-cn/web/svg/attribute/begin/index.html new file mode 100644 index 0000000000..a7c87621b0 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/begin/index.html @@ -0,0 +1,85 @@ +--- +title: begin +slug: Web/SVG/Attribute/begin +tags: + - SVG + - SVG属性 + - 参考 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/begin +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>这个属性定义了动画何时开始。</p> + +<p>这个属性值是一个分号分隔的数列值。SMIL规范的<a class="external" href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists" title="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists">"Evaluation of begin and end time lists"</a>章节详细解释了开始时间数列。每个单独的值可以是下述之一：<code><offset-value></code>、 <code><syncbase-value></code>、 <code><event-value></code>、 <code><repeat-value></code>、 <code><accessKey-value></code>、 <code><wallclock-sync-value></code>或者关键词<code>indefinite</code>。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画定时属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><begin-value-list></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#BeginAttribute" title="http://www.w3.org/TR/SVG/animate.html#BeginAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p><code><begin-value-list></code>中的每一个值可以是下述之一：</p> + +<dl> + <dt><offset-value></dt> + <dd>一个<a href="/en/SVG/Content_type#Clock-value" title="en/SVG/Content_type#Clock-value">时钟值</a>代表了一个相对于SVG文档开头的时间点，SVG文档开头通常是指load事件或者DOMReady事件触发的时间点。负值是合法的。</dd> + <dt><syncbase-value></dt> + <dd>描述一个<em>syncbase</em>以及一个可选的来自于<em>syncbase</em>的时偏移。元素的动画开始时间被定义为相对于另一个动画的开头或者激活结束。一个ID及其后面跟着的.begin或.end构成了一个syncbase，ID引用到另一个动画元素，.begin或.end用来确定到底是与引用的动画元素的动画开头同步、 还是与引用的动画元素的动画激活结束同步。</dd> + <dt><event-value></dt> + <dd><font face="Consolas, Liberation Mono, Courier, monospace">描述了一个事件以及一个可选的时偏移，用来确定动画开始的时点。触发指定事件的时点，被定义为动画开始的时点。一个元素ID及其后面跟着的一个点及其后面跟着事件名构成了一个合法的event-value值。事件名必须是元素支持的事件名。全部合法的事件（不一定是所有元素都支持的事件）包括这些：focusin、 focusout、 </font><code>activate</code>、 <code>click</code>、 <code>mousedown</code>、 <code>mouseup</code>、 <code>mouseover</code>、 <code>mousemove</code>、 <code>mouseout</code>、 <code>DOMSubtreeModified</code>、 <code>DOMNodeInserted</code>、 <code>DOMNodeRemoved</code>、 <code>DOMNodeRemovedFromDocument</code>、 <code>DOMNodeInsertedIntoDocument</code>、 <code>DOMAttrModified</code>、 <code>DOMCharacterDataModified</code>、 <code>SVGLoad</code>、 <code>SVGUnload</code>、 <code>SVGAbort</code>、 <code>SVGError</code>、 <code>SVGResize</code>、 <code>SVGScroll</code>、 <code>SVGZoom</code>、 <code>beginEvent</code>、 <code>endEvent</code>和<code>repeatEvent。</code></dd> + <dt><repeat-value></dt> + <dd>描述了一个符合条件重复事件。repeat事件发生了指定次数的时间点，被定义为元素动画的开始时间点。</dd> + <dt><accessKey-value></dt> + <dd>描述了一个用来触发动画的访问键。当用户按下指定的键时，元素动画就开始了。</dd> + <dt><wallclock-sync-value></dt> + <dd>描述了一个动画开始时间，是真实世界钟的时点。时点的句法遵守ISO8601定义的句法。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Offset示例">Offset示例</h3> + +<p>» <a href="https://developer.mozilla.org/files/3290/begin-1-offset.svg" title="https://developer.mozilla.org/files/3290/begin-1-offset.svg">begin-1-offset.svg</a></p> + +<h3 id="Syncbase示例">Syncbase示例</h3> + +<p>» <a href="https://developer.mozilla.org/files/3291/begin-2-syncbase.svg" title="https://developer.mozilla.org/files/3291/begin-2-syncbase.svg">begin-2-syncbase.svg</a></p> + +<h3 id="Event示例">Event示例</h3> + +<p>» <a href="https://developer.mozilla.org/files/3292/begin-3-event.svg" title="https://developer.mozilla.org/files/3292/begin-3-event.svg">begin-3-event.svg</a></p> + +<h3 id="Repeat示例">Repeat示例</h3> + +<p>» <a href="https://developer.mozilla.org/files/3293/begin-4-repeat.svg" title="https://developer.mozilla.org/files/3293/begin-4-repeat.svg">begin-4-repeat.svg</a></p> + +<h3 id="Accesskey示例">Accesskey示例</h3> + +<p>» <a href="https://developer.mozilla.org/files/3294/begin-5-accesskey.svg" title="https://developer.mozilla.org/files/3294/begin-5-accesskey.svg">begin-5-accesskey.svg</a></p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>begin</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">动画元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/calcmode/index.html b/files/zh-cn/web/svg/attribute/calcmode/index.html new file mode 100644 index 0000000000..dc03724a62 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/calcmode/index.html @@ -0,0 +1,17 @@ +--- +title: calcMode +slug: Web/SVG/Attribute/calcMode +translation_of: Web/SVG/Attribute/calcMode +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>This attribute specifies the interpolation mode for the animation. The default mode is <strong>linear</strong>, however if the attribute does not support linear interpolation (e.g. for strings), the <code>calcMode</code> attribute is ignored and discrete interpolation is used.</p> +<h2 id="Usage_context">Usage context</h2> +<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Animation value attribute</td> </tr> <tr> <th scope="row">Value</th> <td>discrete | linear | paced | spline</td> </tr> <tr> <th scope="row">Animatable</th> <td>No</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute" title="http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> +</table> +<dl> <dt>discrete</dt> <dd>This specifies that the animation function will jump from one value to the next without any interpolation.</dd> <dt>linear</dt> <dd>Simple linear interpolation between values is used to calculate the animation function. Except for {{ SVGElement("animateMotion") }}, this is the default value.</dd> <dt>paced</dt> <dd>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.</dd> <dt>spline</dt> <dd>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.</dd> +</dl> +<h2 id="Example">Example</h2> +<h2 id="Elements">Elements</h2> +<p>The following elements can use the <code>calcMode</code> attribute</p> +<ul> <li>{{ SVGElement("animate") }}</li> <li>{{ SVGElement("animateColor") }}</li> <li>{{ SVGElement("animateMotion") }}</li> <li>{{ SVGElement("animateTransform") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/clip-path/index.html b/files/zh-cn/web/svg/attribute/clip-path/index.html new file mode 100644 index 0000000000..c05dcf75d4 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/clip-path/index.html @@ -0,0 +1,111 @@ +--- +title: clip-path +slug: Web/SVG/Attribute/clip-path +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/clip-path +--- +<div>{{SVGRef}}</div> + +<p>元素的表现属性 <strong><code>clip-path</code></strong> 为其定义或关联一条剪切路径。</p> + +<p class="note"><strong>注意：</strong><code>clip-path</code> 是一个表现属性，可以作为 CSS 属性使用。</p> + +<p>作为一种表现属性，<code>clip-path</code> 可以用于任何元素，不过效果最明显的是下列十九种元素：{{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')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + <clipPath id="myClip" clipPathUnits="objectBoundingBox"> + <circle cx=".5" cy=".5" r=".5" /> + </clipPath> + + <!-- 左上：应用自定义的剪切路径 --> + <rect x="1" y="1" width="8" height="8" stroke="green" + clip-path="url(#myClip)" /> + + <!-- 右上：应用 CSS 基本形状和 fill-box 几何。 + 实质上和自定义剪切路径并把 clipPathUnits + 设成 objectBoundingBox 一样 --> + <rect x="11" y="1" width="8" height="8" stroke="green" + clip-path="circle() fill-box" /> + + <!-- 左下 --> + <rect x="1" y="11" width="8" height="8" stroke="green" + clip-path="circle() stroke-box" /> + + <!-- 右下：应用CSS基本形状和 view-box 几何。 + 实质上和自定义剪切路径并把 clipPathUnits + 设成 userSpaceOnUse 一样 --> + <rect x="11" y="11" width="8" height="8" stroke="green" + clip-path="circle() view-box" /> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">值</th> + <td>{{cssxref('url')}} | [ {{cssxref('basic-shape')}} || <code><geometry-box></code> ] | <code>none</code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>是</td> + </tr> + </tbody> +</table> + +<dl> + <dt><geometry-box></dt> + <dd>geometry-box 是应用 {{cssxref('basic-shape')}} 的额外信息，用于区分 CSS 基本形状如何应用于元素上：<code>fill-box</code> 表示将对象的包围框作为参照框；<code>stroke-box</code> 表示将对象的包围框加上描边的范围作为参照框；<code>view-box</code> 表示使用最近的 SVG 视窗作为参照框。</dd> +</dl> + +<p class="note"><strong>注意：</strong>clip-path 语法的更多细节可参考 CSS 属性 {{cssxref('clip-path')}} 的参考页面。</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容</h2> + + + +<p>{{Compat("svg.attributes.presentation.clip-path")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td> + <td>{{Spec2('CSS Masks')}}</td> + <td>Extends its application to HTML elements. The <code>clip-path</code> property replaces the deprecated {{cssxref("clip")}} property.</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition (applies to SVG elements only).</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The CSS {{cssxref("clip-path")}} property</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/clip/index.html b/files/zh-cn/web/svg/attribute/clip/index.html new file mode 100644 index 0000000000..8409d35fca --- /dev/null +++ b/files/zh-cn/web/svg/attribute/clip/index.html @@ -0,0 +1,92 @@ +--- +title: clip +slug: Web/SVG/Attribute/clip +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/clip +--- +<div>{{SVGRef}}{{deprecated_header}}</div> + +<p><strong><code>clip</code></strong> 属性是定义元素可见区域的属性。</p> + +<p><code>clip</code> 属性的参数值与 {{ cssxref("clip","CSS clip property") }} 的参数值定义相同。指示当前用户坐标的无单位的值，可以用在 <code><shape></code> 的坐标值上。<code>auto</code> 值定义了一个剪切路径，其边界沿着由给定元素创建的视口的边界。</p> + +<p>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") }}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> + <!-- Auto clipping --> + <svg x="0" width="10" height="10" + clip="auto"> + <circle cx="5" cy="5" r="4" stroke="green" /> + </svg> + + <!-- Rect(top, right, bottom, left) clipping --> + <svg x="10" width="10" height="10" + clip="rect(1, 9, 8, 2)"> + <circle cx="5" cy="5" r="4" stroke="green" /> + </svg> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p> +</div> + +<h2 id="用法">用法</h2> + +<p class="warning"><strong>Warning:</strong> This property is deprecated. Use {{cssxref("clip-path")}} instead.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">可用值</th> + <td><strong>auto</strong> | <shape> | inherit</td> + </tr> + <tr> + <th scope="row">默认值</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p>The value <code>auto</code> defines a clipping path along the bounds of the viewport created by the given element.</p> + +<p>The value <code>rect()</code> defines a clipping rectangle following the following syntax: <code>rect(<top>, <right>, <bottom>, <left>)</code>. The <code><top></code> and <code><bottom></code> values specify offsets from the <em>top border edge</em> of the element viewport, while <code><right></code> and <code><left></code> specify offsets from the <em>left border edge</em> of the element viewport.</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.attributes.presentation.clip")}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Masks', '#clip-property', 'clip')}}</td> + <td>{{Spec2('CSS Masks')}}</td> + <td>Deprecates <code>clip</code> property, suggests {{cssxref("clip-path")}} as replacement.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "masking.html#ClipProperty", "clip")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/color/index.html b/files/zh-cn/web/svg/attribute/color/index.html new file mode 100644 index 0000000000..787576df09 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/color/index.html @@ -0,0 +1,63 @@ +--- +title: color +slug: Web/SVG/Attribute/color +tags: + - SVG + - SVG属性 +translation_of: Web/SVG/Attribute/color +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考主页</a></p> + +<p><code>color</code> 属性用来为 {{ SVGAttr("fill") }} 属性、{{ SVGAttr("stroke") }} 属性、{{ SvgAttr("stop-color") }} 属性、{{ SVGAttr("flood-color") }} 属性和 {{ SVGAttr("lighting-color") }} 属性提供一个潜在的间接值（<code>currentColor</code>）。</p> + +<p>作为一个外观属性，它还可以直接用作CSS样式表的属性。请阅读 {{ cssxref("color","CSS color") }} 以了解更多信息。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a> | inherit</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProperty" title="http://www.w3.org/TR/SVG11/color.html#ColorProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><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> +</pre> + +<p>{{ EmbedLiveSample('Example', '100%', '110') }}</p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>color</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">文本内容元素</a> »</li> + <li><a href="/en/SVG/Element#Shape_elements" title="en/SVG/Element#Shape_elements">形状元素</a> »</li> + <li>{{ SVGElement("stop") }}</li> + <li>{{ SVGElement("feFlood") }}</li> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> +</ul> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.attributes.presentation.color")}}</p> diff --git a/files/zh-cn/web/svg/attribute/cx/index.html b/files/zh-cn/web/svg/attribute/cx/index.html new file mode 100644 index 0000000000..bb7c027b2d --- /dev/null +++ b/files/zh-cn/web/svg/attribute/cx/index.html @@ -0,0 +1,172 @@ +--- +title: cx +slug: Web/SVG/Attribute/cx +tags: + - SVG + - SVG属性 +translation_of: Web/SVG/Attribute/cx +--- +<div>{{SVGRef}}</div> + +<p><strong><code>cx</code></strong> 属性定义一个中心点的 x 轴坐标。</p> + +<p>有三个元素在使用此属性：{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, 和 {{SVGElement("radialGradient")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> + <radialGradient cx="25%" id="myGradient"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + + <circle cx="50" cy="50" r="45"/> + <ellipse cx="150" cy="50" rx="45" ry="25" /> + <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" /> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', 100, 100)}}</p> +</div> + +<h2 id="圆">圆</h2> + +<p>对于 {{SVGElement('circle')}}，<code>cx</code> 用来定义图形中心的 x 轴坐标。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note">注：起始于 SVG2 <code>cx</code>，是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。</p> + +<h2 id="椭圆">椭圆</h2> + +<p>对于 {{SVGElement('ellipse')}}，<code>cx</code> 用来定义图形中心的 x 轴坐标。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注：</strong> 起始于 SVG2 <code>cx</code>，是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。</p> + +<h2 id="径向渐变">径向渐变</h2> + +<p>对于 {{SVGElement('radialGradient')}}, <code>cx</code> 用来定义径向渐变终止圆的 x 轴坐标。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>50%</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h4 id="示例">示例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient cx="0" id="myGradient000"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + + <radialGradient cx="50%" id="myGradient050"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + + <radialGradient cx="100%" id="myGradient100"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + </defs> + + <rect x="1" y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /> + <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /> + <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /> +</svg></pre> + +<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</p> + +<h2 id="技术规范">技术规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">技术规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#CX", "cx")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition as a geometry property</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for SVG2 paint servers.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><radialGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><ellipse></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><circle></code></td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/cy/index.html b/files/zh-cn/web/svg/attribute/cy/index.html new file mode 100644 index 0000000000..c4468107ba --- /dev/null +++ b/files/zh-cn/web/svg/attribute/cy/index.html @@ -0,0 +1,172 @@ +--- +title: cy +slug: Web/SVG/Attribute/cy +tags: + - SVG + - SVG属性 +translation_of: Web/SVG/Attribute/cy +--- +<div>{{SVGRef}}</div> + +<p><strong><code>cy</code></strong> 属性定义一个中心点的 y 轴坐标。</p> + +<p>有三个元素在使用此属性：{{SVGElement("circle")}}，{{SVGElement("ellipse")}} 和 {{SVGElement("radialGradient")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> + <radialGradient cy="25%" id="myGradient"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + + <circle cy="50" cx="50" r="45"/> + <ellipse cy="150" cx="50" rx="45" ry="25" /> + <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" /> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 300)}}</p> +</div> + +<h2 id="圆">圆</h2> + +<p>对于 {{SVGElement('circle')}}，<code>cy</code> 用来定义图形中心的 y 轴坐标。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注：</strong>起始于 SVG2，<code>cy</code> 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。</p> + +<h2 id="椭圆">椭圆</h2> + +<p>对于 {{SVGElement('ellipse')}}，<code>cy</code> 用来定义图形中心的 y 轴坐标。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注：</strong>起始于 SVG2，<code>cy</code> 是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。</p> + +<h2 id="径向渐变">径向渐变</h2> + +<p>对于 {{SVGElement('radialGradient')}}，<code>cy</code> 用来定义径向渐变终止圆的 y 轴坐标。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>50%</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h4 id="示例">示例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient cy="0" id="myGradient000"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + + <radialGradient cy="50%" id="myGradient050"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + + <radialGradient cy="100%" id="myGradient100"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + </defs> + + <rect x="1" y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /> + <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /> + <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /> +</svg></pre> + +<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</p> + +<h2 id="技术规范">技术规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">技术规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#CY", "cy")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition as a geometry property</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementCYAttribute", "cy")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for SVG2 paint servers.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCYAttribute", "cy")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><radialGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCYAttribute", "cy")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><ellipse></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCYAttribute", "cy")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><circle></code></td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/d/index.html b/files/zh-cn/web/svg/attribute/d/index.html new file mode 100644 index 0000000000..70fd4309b9 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/d/index.html @@ -0,0 +1,200 @@ +--- +title: d +slug: Web/SVG/Attribute/d +tags: + - SVG + - SVG元素 + - 参考 +translation_of: Web/SVG/Attribute/d +--- +<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性定义了一个路径。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>路径定义属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td> </td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#DurAttribute" title="http://www.w3.org/TR/SVG/animate.html#DurAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>属性<code>d</code>实际上是一个字符串，包含了一系列路径描述。这些路径由下面这些指令组成：</p> + +<ul> + <li>Moveto</li> + <li>Lineto</li> + <li>Curveto</li> + <li>Arcto</li> + <li>ClosePath</li> +</ul> + +<p>这些组合在一个字符串中。这些不同的命令是大小写敏感的；一个大写的命令指明它的参数是绝对位置，而小写的命令指明相对于当前位置的点。可以指定一个负数值作为命令的参数：负角度将是逆时针的，绝对x和y位置将视为负坐标。负相对x值将会往左移，而负相对y值将会向上移。</p> + +<h2 id="Moveto">Moveto</h2> + +<p><code>Moveto</code>指令可以被想象成拎起绘图笔，落脚到另一处。在上一个点和这个指定点之间没有线段绘制。用一个Moveto命令开始一个路径是好的作法，因为如果没有一个初始化的Moveto，执行命令时开始点会是上一个操作发生过的地方，这样可能造成不确定的行为。</p> + +<p>句法：</p> + +<ul> + <li><code>M x,y</code> 在这里x和y是绝对坐标，分别代表水平坐标和垂直坐标。</li> + <li><code>m dx,dy</code> 在这里dx和dy是相对于当前点的距离，分别是向右和向下的距离。</li> +</ul> + +<p>示例：</p> + +<ul> + <li>位于绝对位置x=50, y= 100：<code><path d="M50,100..." /></code></li> + <li>往右移50，往下移100：<code><path d="m50,100..." /></code></li> +</ul> + +<h2 id="Lineto">Lineto</h2> + +<p>和<code>Moveto</code>指令不同，<code>Lineto</code>指令将绘制一条直线段。这个直线段从当前位置移到指定位置。原生的<code>Lineto</code>命令的句法是”L x, y“或者”l dx, dy“，在这里x和y是绝对坐标，而dx和dy分别是向右和向下的距离。还有字母H和V，分别指定水平和垂直移动。它们的句法与L相同，它的小写版本是相对距离，大写版本是绝对位置。</p> + +<h2 id="Curveto">Curveto</h2> + +<p>Curvto命令指定了一个<a href="/User:Jt//Sandbox/Curves_in_Paths" title="Curves in Paths">贝塞尔曲线</a>。有两种类型的贝塞尔曲线：立方曲线和二次方曲线。二次方贝塞尔曲线是一种特殊的立方贝塞尔曲线，在这里，控制点的两端是相同的。二次方贝塞尔曲线的句法是”Q cx, cy x, y“或”q dcx, dcy dx, dy“。cx和cy都是控制点的绝对坐标，而dcx和dcy分别是控制点在x和y方向上的距离。</p> + +<div> +<p>立方贝赛尔曲线遵守二次方贝赛尔曲线同样的概念，但是它需要考虑两个控制点。立方贝塞尔曲线的句法是：”C c1x,c1y c2x,c2y x,y“或者”c dc1x,dc1y dc2x,dc2y dx,dy“，在这里，c1x、c1y和c2x、c2y是分别是初始点和结束点的控制点的绝对坐标。dc1x、dc1y和dc2x、dc2y都是相对于初始点，而不是相对于结束点的。dx和dy分别是向右和向下的距离。</p> + +<p>为了连缀平滑的贝塞尔曲线，还可以使用T和S命令。它们的语法比别的Curveto命令简单，因为它假定第一个控制点是从前一个控制点关于前一个点的反射，或者说如果没有前一个控制点的话它实际上就是前一个点。T的句法是”T x,y“或者”t dx,dy“，分别对应于绝对坐标和相对距离，用来创建二次方贝塞尔曲线。S用来创建立方贝塞尔曲线，语法是”S cx,cy x,y“或者”s dcx,dcy dx,dy“，在这里(d)cx指定第二个控制点。</p> + +<p>最后，所有的贝塞尔曲线命令可以制作出一个多边贝塞尔图形，先初始化命令，然后多次指定所有的参数，就可以制作出一个多边贝赛尔图形。因此，下面的两个命令可以创建完全相同的路径：</p> + +<div class="geckoVersionNote"> +<p><path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100" /><br> + <path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" /></p> +</div> + +<h2 id="Arcto">Arcto</h2> + +<p>有时候描述一个椭圆弧曲线路径要比描述一个贝塞尔曲线路径更简单。说到底，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中，这个参数看起来没什么效果。</p> + +<h2 id="ClosePath">ClosePath</h2> + +<p>ClosePath命令将在当前路径从，从当前点到第一个点简单画一条直线。它是最简单的命令，而且不带有任何参数。它沿着到开始点的最短的线性路径，如果别的路径落在这路上，将可能路径相交。句法是”Z“或”z“，两种写法作用都一样。</p> +</div> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>d</code>属性：</p> + +<ul> + <li>{{SVGElement("path")}} »</li> + <li>{{SVGElement("glyph")}} »</li> +</ul> + +<p>同样的规则可以应用到{{SVGElement("animate")}}动画路径上。</p> + +<h2 id="提醒">提醒</h2> + +<p>原点（坐标系0,0点）经常是上下文的<strong>左上角</strong>。然而{{SVGElement("glyph")}}元素的原点在它的字母框的<strong>左下角</strong>。</p> + +<p>在任何两个数字之间允许加一个逗号，但是在别的地方不允许加逗号。</p> + +<h2 id="示例">示例</h2> + +<pre><code><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></code></pre> + +<p>为了演示<code>d="M37,17v15H14V17H37z M50,0H0v50h50V0z"的实际意义，我们来讨论这个字符串的每一小段。</code></p> + +<p style="margin-bottom: 1em; font-size: 15px; color: rgb(34, 34, 34); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 19.5px;"><img alt="enter image description here" src="http://img3.douban.com/view/photo/large/public/p2316231190.jpg" style="height: 400px; max-width: 630px; width: 400px;"></p> + +<ul> + <li><code>d=" M37,17 || v15 || H14 || V17 || H37 ||z // M50,0 || H0 || v50 || h50 || V0 || z"</code></li> + <li><code>d=</code> + <ul> + <li>这个属性包含了构成整个SVG的字符串。</li> + </ul> + </li> + <li><code>M37,17</code> + <ul> + <li><font face="Consolas, Liberation Mono, Courier, monospace">M是MoveTo的缩写。大写的“M”意味着绝对坐标，小写的“m”意味着相对距离。它暗含着是基于开始坐标，线在框里面，而且你在方框内矩形的右上角开始。</font></li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">37是开始svg位置的缩写，在X轴坐标37像素处。</font></li> + <li><code>17开始svg位置，在y轴的17像素处。</code></li> + </ul> + </li> + <li>v15 + <ul> + <li>v代表垂直。大写的V意味着绝对坐标，小写的v表示相对的长度、距离。dx/dy和x/y可以用在H/V和h/v相应的位置里。</li> + <li>这里是表示相对于给定坐标画一条15像素的垂直线。它意味着你向下画15像素，到坐标37,32。</li> + </ul> + </li> + <li><code>H14</code> + <ul> + <li>H代表水平，它是绝对坐标，因为它是大写的。</li> + <li>从v15的终点开始，画一条水平线直到到达绝对坐标14，当到达x坐标14时结束画线。笔触位于坐标14,32。</li> + </ul> + </li> + <li><code>V17</code> + <ul> + <li>就像前面那样，从上一条线的终点开始，画一条垂直线，直到到达y轴坐标17。笔触位于坐标14,17。</li> + </ul> + </li> + <li>H37 + <ul> + <li>最后，从14,17开始，画一条水平线，直到到达x轴坐标37。笔触位于坐标37,17（M的值）</li> + </ul> + </li> + <li><code>z</code> + <ul> + <li>小写的z和大写的Z都是闭合一系列svg线段。</li> + </ul> + </li> + <li><code>,</code> + <ul> + <li>逗号开始下一串简单矢量图形线段。下一系列简单矢量线段将制作外层方框。</li> + </ul> + </li> + <li><code>M50,0</code> + <ul> + <li>在x轴50和y轴0处开始。</li> + </ul> + </li> + <li><code>H0</code> + <ul> + <li>画一条直线直到(0,0)。</li> + </ul> + </li> + <li><code>v50</code> + <ul> + <li>相对于0,0画一条50像素的垂直线。这条线将画到(0,50)。</li> + </ul> + </li> + <li><code>h50</code> + <ul> + <li>相对于(0,-50)画一条50像素的水平线。这条线将向右画到(50,50)。</li> + </ul> + </li> + <li><code>V0</code> + <ul> + <li>画一条垂直线直到到达y轴坐标0。这将画线到(50,0)，即M的值。</li> + </ul> + </li> + <li><code>z</code> + <ul> + <li>小写的z和大写的Z都是闭合一系列svg线段。</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/display/index.html b/files/zh-cn/web/svg/attribute/display/index.html new file mode 100644 index 0000000000..ca8987c416 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/display/index.html @@ -0,0 +1,130 @@ +--- +title: display +slug: Web/SVG/Attribute/display +translation_of: Web/SVG/Attribute/display +--- +<div>{{SVGRef}}</div> + +<p>The <code><strong>display</strong></code> attribute lets you control the rendering of graphical or container elements.</p> + +<p><code><strong>display</strong></code>属性让你可以控制图形元素或容器元素的渲染。</p> + +<p>A value of <code>display="none"</code> indicates that the given element and its children will not be rendered. Any value other than <code>none</code> or <code>inherit</code> indicates that the given element will be rendered by the browser.</p> + +<p><code>display="none"</code>表示该元素和它的子元素不会被渲染。而非<code>none</code>或<code>inherit</code>的值表示元素会被浏览器渲染。</p> + +<p>When applied to a container element, setting <code>display</code> to <code>none</code> 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 <code>display="none"</code> will never be rendered even if the child has a value for <code>display</code> other than <code>none</code>.</p> + +<p>当应用到容器元素时，将<code>display</code>设为<code>none</code>会导致容器与它所有的子元素不可见，如此看来，它在一组元素中表现地像一个元素组。这表示具有<code>display="none"</code>属性元素的所有子元素都不会被渲染，即使子元素的<code>display</code>并不是<code>none</code>。</p> + +<p>When the <code>display</code> attribute is set to <code>none</code>, 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:</p> + +<p><code>display</code>属性被设为<code>none</code>的元素不会成为渲染树的一部分。它涉及到{{SVGElement("tspan")}}, {{SVGElement("tref")}}, 和 {{SVGElement("altGlyph")}}元素、用于盒边界与路径剪裁计算的事件处理。</p> + +<ul> + <li>If <code>display</code> is set to <code>none</code> on a {{SVGElement("tspan")}}, {{SVGElement("tref")}}, or {{SVGElement("altGlyph")}} element, then the text string is ignored for the purposes of text layout.</li> +</ul> + +<p> 如果在{{SVGElement("tspan")}}, {{SVGElement("tref")}}, 或{{SVGElement("altGlyph")}}元素中<code>display</code>的属性值被设为<code>none</code>,则为了文字布局，文字字符串会被忽视掉。</p> + +<ul> + <li>Regarding events, if <code>display</code> is set to <code>none</code>, the element receives no events.</li> +</ul> + +<p> 至于事件，如果<code>display</code>被设为<code>none</code>则该元素不接受任何事件。</p> + +<ul> + <li>The geometry of a <a href="/en-US/docs/Web/SVG/Element#Graphics_elements">graphics element</a> with <code>display</code> set to <code>none</code> is not included in bounding box and clipping paths calculations.</li> +</ul> + +<p> 图形元素的<code>display</code>属性被设为<code>none</code>则不会被盒边界和路径剪裁计算中包含进去。</p> + +<p>The <code>display</code> 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 <code>none</code> 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 <code>display</code> value of <code>none</code>.</p> + +<p><code>display</code>属性只影响能被直接渲染的元素，尽管它不能防止该元素被其他元素参考。例如：将{SVGElement("path")}}元素设为none，会使得该元素不会被直接渲染到canvas上，但是{{SVGElement("textPath")}}元素依旧会参考{{SVGElement("path")}}。此外，即便{SVGElement("path")}}的<code>display</code>为<code>none</code>，它的形状在处理路径上的文本时仍然会被用到。</p> + +<p>This attribute also affects direct rendering into offscreen canvases, such as occurs with masks or clip paths. Thus, setting <code>display="none"</code> on a child of a {{SVGElement("mask")}} will prevent the given child element from being rendered as part of the mask. Similarly, setting <code>display="none"</code> on a child of a {{SVGElement("clipPath")}} element will prevent the given child element from contributing to the clipping path.</p> + +<p>这个属性也能影响直接渲染到屏幕外的画布，比如遮罩或路径剪裁。因此，把{{SVGElement("mask")}}元素的一个子元素设为<code>display="none"</code>将会阻止子元素参与到路径剪裁中。</p> + +<p class="note"><strong>Note:</strong> As a presentation attribute, <code>display</code> can be used as a CSS property. See {{cssxref("display", "CSS display")}} for further information.</p> + +<p>As a presentation attribute, it can be applied to any element.</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css notranslate">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html notranslate"><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></pre> + +<p>{{EmbedLiveSample("topExample", "240", "120")}}</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Default value</th> + <td><code>inline</code></td> + </tr> + <tr> + <th scope="row">Value</th> + <td>{{csssyntax("display")}}</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p>For a description of the values, please refer to the {{cssxref("display", "CSS display")}} property.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "render.html#VisibilityControl", "display")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Refers to the CSS 2 specification of the <code>display</code> property, but outlines the differences regarding SVG.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#DisplayProperty", "display")}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.presentation.display")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{SVGAttr("visibility")}} attribute</li> + <li>{{cssxref("display", "CSS display")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/dominant-baseline/index.html b/files/zh-cn/web/svg/attribute/dominant-baseline/index.html new file mode 100644 index 0000000000..5df260eb1f --- /dev/null +++ b/files/zh-cn/web/svg/attribute/dominant-baseline/index.html @@ -0,0 +1,92 @@ +--- +title: dominant-baseline +slug: Web/SVG/Attribute/dominant-baseline +translation_of: Web/SVG/Attribute/dominant-baseline +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>The <code>dominant-baseline</code> 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, <span class="prop-value">auto</span>, would give an undesired result, this property can be used to explicitly set the desire scaled-baseline-table.</p> +<p>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.</p> +<p>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.</p> +<h2 id="Usage_context">Usage context</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><strong>auto</strong> | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#DominantBaselineProperty" title="http://www.w3.org/TR/SVG11/text.html#DominantBaselineProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> +<dl> + <dt> + auto</dt> + <dd> + <p>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 <code>alphabetic</code>, else if the {{ SVGAttr("writing-mode") }} is vertical, then the value of the dominant-baseline component is <code>central</code>. </p> + <p>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 <code>dominant-baseline</code> attribute 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.</p> + </dd> + <dt> + use-script</dt> + <dd> + 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 <code>dominant-baseline</code> attribute occurs.</dd> + <dt> + no-change</dt> + <dd> + The dominant-baseline, the baseline-table, and the baseline-table font-size remain the same as that of the parent text content element.</dd> + <dt> + reset-size</dt> + <dd> + 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") }}.</dd> + <dt> + ideographic</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>ideographic</code>, the derived baseline-table is constructed using the <code>ideographic</code> baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.</dd> + <dt> + alphabetic</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>alphabetic</code>, the derived baseline-table is constructed using the <code>alphabetic</code> baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.</dd> + <dt> + hanging</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>hanging</code>, the derived baseline-table is constructed using the <code>hanging</code> baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.</dd> + <dt> + mathematical</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>mathematical</code>, the derived baseline-table is constructed using the <code>mathematical</code> baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.</dd> + <dt> + central</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>central</code>. 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: <code>ideographic</code>, <code>alphabetic</code>, <code>hanging</code>, <code>mathematical</code>. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.</dd> + <dt> + middle</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>middle</code>. 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: <code>alphabetic</code>, <code>ideographic</code>, <code>hanging</code>, <code>mathematical</code>. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.</dd> + <dt> + text-after-edge</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>text-after-edge</code>. 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.</dd> + <dt> + text-before-edge</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>text-before-edge</code>. 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.</dd> +</dl> +<h2 id="Example">Example</h2> +<h2 id="Elements">Elements</h2> +<p>The following elements can use the <code>dominant-baseline-shift</code> attribute</p> +<ul> + <li><a href="/en/SVG/Element#Text_content_elements" title="https://developer.mozilla.org/en/SVG/Element#Text_content_elements">Text content elements</a> »</li> +</ul> +<h2 id="See_also">See also</h2> +<ul> + <li>{{ cssxref("dominant-baseline","CSS dominant-baseline") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/dur/index.html b/files/zh-cn/web/svg/attribute/dur/index.html new file mode 100644 index 0000000000..8121bf4bfb --- /dev/null +++ b/files/zh-cn/web/svg/attribute/dur/index.html @@ -0,0 +1,52 @@ +--- +title: dur +slug: Web/SVG/Attribute/dur +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/dur +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性标识了动画的简单持续时间。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画定时属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Clock-value" title="en/SVG/Content_type#Clock-value"><clock-value></a> | <strong title="this is the default value">indefinite</strong></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#DurAttribute" title="http://www.w3.org/TR/SVG/animate.html#DurAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><a href="/en/SVG/Content_type#Clock-value" title="en/SVG/Content type#Clock-value"><clock-value></a></dt> + <dd>指定简单持续时间的时长。值必须大于0。可以用小时（h）、分钟（m）、秒（s）、毫秒（ms）表达这个值。可以组合这些时间表达式以提供一个复合的持续时间，比如这样：<code>hh:mm:ss.iii</code>或者这样：<code>mm:ss.iii</code>。</dd> +</dl> + +<p>如果一个动画元素不带有<code>dur</code>属性，简单持续时间就是无限期的。请注意：如果一个简单持续时间是无限期的，则插值不能起作用（虽然它对 {{ SVGElement("set") }} 元素依然是有用的）。</p> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>dur</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">动画元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/dx/index.html b/files/zh-cn/web/svg/attribute/dx/index.html new file mode 100644 index 0000000000..66452d48a5 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/dx/index.html @@ -0,0 +1,68 @@ +--- +title: dx +slug: Web/SVG/Attribute/dx +tags: + - SVG + - SVG标签 +translation_of: Web/SVG/Attribute/dx +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考汇总</a></p> + +<p><code>dx属性表示一个元素或其内容在x轴方向上的偏移，偏移量取决于设置该属性的元素。</code></p> + +<p>对于{{SVGElement("feOffset")}}元素，它的值代表所有输入的图像的偏移量之和。这个总和被表达在由{{SVGElement("filter")}}元素的{{SVGAttr("primitiveUnits")}}属性定义的坐标系中。</p> + +<p>对于{{SVGElement("glyphRef")}}元素，它的值代表该符号在字体坐标系中x轴上的相对坐标。</p> + +<p>对于{{SVGElement("text")}}、{{SVGElement("tspan")}}、{{SVGElement("tref")}}和{{SVGElement("altGlyph")}}元素，由于这些元素允许设置<a href="/en/SVG/Content_type#List-of-Ts" title="/en/SVG/Content_type#List-of-Ts"><list-of-length></a>，所以更复杂。</p> + +<p>如果只提供了一个<a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>，当前文本位置会沿着坐标系内x轴方向偏移<a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a> 。</p> + +<p>如果提供了一个由逗号或者空格分隔的<a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>列表，列表中的值将会表示前n个字符沿x轴方向偏移的增量。因此，当前文本位置也因为绘制当前{{SVGElement("text")}}元素而沿x轴方向偏移。</p> + +<p>如果在<a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>列表中有更多的字符，那么对于每个字符，都有</p> + +<ul> + <li>如果祖先{{SVGElement("text")}}或{{SVGElement("tspan")}}元素对于给定的字符，通过dx的属性指定了相对x坐标，那么当前文本位置会沿坐标系的x轴方向偏移该数值（最近的祖先具有优先级）</li> + <li>否则没有额外的x轴方向的偏移发生</li> +</ul> + +<h2 id="用法上下文">用法上下文</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">分类</th> + <td>无</td> + </tr> + <tr> + <th scope="row">数值类型</th> + <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a> | <a href="/en/SVG/Content_type#List-of-<var>T<.2Fvar>s" title="/en/SVG/Content_type#List-of-<var>T<.2Fvar>s"><list-of-length></a></td> + </tr> + <tr> + <th scope="row">可变</th> + <td>是</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElementDXAttribute" rel="external" title="http://www.w3.org/TR/SVG11/text.html#AltGlyphElementDXAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetDxAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feOffsetDxAttribute">SVG 1.1 (2nd Edition): feOffset element</a><br> + <a href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElementDXAttribute" rel="external" title="http://www.w3.org/TR/SVG11/text.html#GlyphRefElementDXAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br> + <a href="http://www.w3.org/TR/SVG11/text.html#TextElementDXAttribute" rel="external" title="http://www.w3.org/TR/SVG11/text.html#TextElementDXAttribute">SVG 1.1 (2nd Edition): text element</a><br> + <a href="http://www.w3.org/TR/SVG11/text.html#TSpanElementDXAttribute" rel="external" title="http://www.w3.org/TR/SVG11/text.html#TSpanElementDXAttribute">SVG 1.1 (2nd Edition): tspan element</a></td> + </tr> + </tbody> +</table> + +<h2 id="元素">元素</h2> + +<p>这些元素可以使用dx属性</p> + +<ul> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("text") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("tspan") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/edgemode/index.html b/files/zh-cn/web/svg/attribute/edgemode/index.html new file mode 100644 index 0000000000..9b624cd315 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/edgemode/index.html @@ -0,0 +1,58 @@ +--- +title: edgeMode +slug: Web/SVG/Attribute/edgeMode +tags: + - SVG + - SVG属性 + - 滤镜 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/edgeMode +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>edgeMode</code>属性确定了当核心位于输入图像的边缘或贴近输入图像的边缘时，如何取用颜色值用于扩展输入图像，从而可以应用矩阵操作。</p> + +<p>如果没有指定<code>edgeMode</code>属性，等效于值被指定为<code>duplicate</code>。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong>duplicate</strong> | wrap | none</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementEdgeModeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementEdgeModeAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>duplicate</dt> + <dd>它指示输入图像沿着每条边扩展，复制输入图像的给定边缘上的颜色值。</dd> + <dt>wrap</dt> + <dd>它指示扩展输入图像，从图像相对的边缘取色。</dd> + <dt>none</dt> + <dd>它指示扩展输入图像，用0作为RGBA的像素值。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>edgeMode</code>属性：</p> + +<ul> + <li>{{ SVGElement("feConvolveMatrix") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/enable-background/index.html b/files/zh-cn/web/svg/attribute/enable-background/index.html new file mode 100644 index 0000000000..0d54c98265 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/enable-background/index.html @@ -0,0 +1,74 @@ +--- +title: enable-background +slug: Web/SVG/Attribute/enable-background +translation_of: Web/SVG/Attribute/enable-background +--- +<div>{{SVGRef}} {{deprecated_header("SVG 2")}}</div> + +<p>该<strong><code>enable-background</code></strong>属性指定如何管理背景图像的累积。</p> + +<p class="note"><strong>注意：</strong>作为演示文稿属性，<code>enable-background</code>可以用作CSS属性。</p> + +<p>作为表示属性，它可以应用于任何元素，但仅对以下11个元素有效：{{SVGElement("a")}}，{{SVGElement("defs")}}，{{SVGElement("字形")}}，{{SVGElement("g")}}，{{SVGElement("marker")}}，{{SVGElement("mask")}}，{{SVGElement("missing-glyph")}}，{{SVGElement("pattern")}}，{{SVGElement("svg")}}，{{SVGElement("switch")}}和{{SVGElement("symbol")}}}</p> + +<h2 id="上下文注释">上下文注释</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">值</th> + <td><code>accumulate</code>| <code>new</code>[ <code><x></code> <code><y></code> <code><width></code> <code><height></code>]？</td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>accumulate</code></td> + </tr> + <tr> + <th scope="row">可动画的</th> + <td>没有</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code>accumulate</code></dt> + <dd> + <p>如果祖先容器元素的属性值为<code>enable-background: new</code>，则当前容器元素内的所有图形元素都将呈现到父容器元素的背景图像画布上以及目标设备上。</p> + + <p>否则，没有当前的背景图像画布，因此图形元素仅渲染到目标设备上。</p> + </dd> + <dt><code>new [ <x> <y> <width> <height> ]?</code></dt> + <dd> + <p>该值使当前容器元素的子代能够访问背景图像。</p> + + <p>它还指示建立了新的（即最初为透明的黑色）背景图像画布，并且实际上，除了将当前容器元素的所有子对象呈现到目标设备上之外，还应将其呈现到新的背景图像画布中。</p> + + <p>The optional <code><x></code>, <code><y></code>, <code><width></code>, and <code><height></code> parameters are <code><a href="/en-US/docs/Web/SVG/Content_type#Number"><number></a></code> 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.<br> + Negative values for <code><width></code> or <code><height></code> are forbidden. If one, two, or three values are specified or if neither <code><width></code> nor <code><height></code> are specified, the <code>BackgroundImage</code> and <code>BackgroundAlpha</code> of a filter primitive are processed as if background image processing were not enabled.</p> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG1.1", "filters.html#EnableBackgroundProperty", "enable-background")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求。</div> + +<p>{{Compat("svg.attributes.presentation.enable-background")}}</p> diff --git a/files/zh-cn/web/svg/attribute/end/index.html b/files/zh-cn/web/svg/attribute/end/index.html new file mode 100644 index 0000000000..a2e363e82e --- /dev/null +++ b/files/zh-cn/web/svg/attribute/end/index.html @@ -0,0 +1,49 @@ +--- +title: end +slug: Web/SVG/Attribute/end +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/end +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>这个属性定义了一个动画的结束值，可以约束激活持续时间。</p> + +<p>这个属性值是一个分号分隔的数列值。每个单独值可以是定义在{{ SVGAttr("begin") }}属性中同种类型。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画定时属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><End-value-list></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#EndAttribute" title="http://www.w3.org/TR/SVG/animate.html#EndAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>欲知在<code><end-value-list></code>中允许用哪些值，请阅读{{ SVGAttr("begin") }}属性。</p> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>end</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/fill-opacity/index.html b/files/zh-cn/web/svg/attribute/fill-opacity/index.html new file mode 100644 index 0000000000..183e6c632f --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fill-opacity/index.html @@ -0,0 +1,58 @@ +--- +title: fill-opacity +slug: Web/SVG/Attribute/fill-opacity +tags: + - SVG + - SVG属性 + - 参考 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/fill-opacity +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性指定了填色的不透明度或当前对象的内容物的不透明度。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value"><opacity-value></a> | inherit</td> + </tr> + <tr> + <th scope="row">初始值</th> + <td>1</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#FillOpacityProperty" title="http://www.w3.org/TR/SVG/painting.html#FillOpacityProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>fill-opacity</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">元素元素</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TexteContent">文本内容元素</a> »</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGAttr("stroke-opacity") }}</li> + <li>{{ SVGAttr("opacity") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/fill-rule/index.html b/files/zh-cn/web/svg/attribute/fill-rule/index.html new file mode 100644 index 0000000000..0a9cad8a92 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fill-rule/index.html @@ -0,0 +1,180 @@ +--- +title: fill-rule +slug: Web/SVG/Attribute/fill-rule +tags: + - SVG + - SVG属性 + - 参考 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/fill-rule +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><strong><code>fill-rule</code></strong> 是一个外观属性，它定义了用来确定一个多边形内部区域的算法。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>作为一个外观属性，fill-rule 可以被用于 CSS。</p> +</div> + +<p>作为一个外观属性，它可以被应用于任何元素，但只会在这八个元素中有效：{{SVGElement('altGlyph')}}、{{SVGElement('path')}}、{{SVGElement('polygon')}}、{{SVGElement('polyline')}}、{{SVGElement('text')}}、{{SVGElement('textPath')}}、{{SVGElement('tref')}} 和 {{SVGElement('tspan')}}。</p> + +<p>如何判断一个路径组成的多边形的内部区域，从而给它上色，对于一个简单的、没有交错的路径来说，是很显然的；然而，对于一个更为复杂的路径，比如一条与自身相交的路径，或者是这条路径上的其中一段将另一段包围着，要解释什么是“内部”，就不再这么显然了。</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td>nonzero | evenodd</td> + </tr> + <tr> + <th scope="row">默认值</th> + <td>nonzero</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty" title="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p><code>fill-rule</code> 属性为如何确定一个形状的内部（即可以被填充的区域）提供了两个可选值：</p> + +<dl> + <dt> + <h3 id="nonzero_2">nonzero</h3> + </dt> +</dl> + +<p>这个值确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。</p> + +<h4 id="Example">Example</h4> + +<div id="nonzero"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> +</div> + +<p>{{EmbedLiveSample('nonzero', '100%', 200)}}</p> + +<dl> + <dt> + <h3 id="evenodd_2">evenodd</h3> + </dt> +</dl> + +<p>这个值用确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。</p> + +<h4 id="Example_2">Example</h4> + +<div id="evenodd"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> +</div> + +<p>{{EmbedLiveSample('evenodd', '100%', 200)}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容</h2> + +<p>{{Compat("svg.attributes.presentation.fill-rule")}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#FillRuleProperty", "fill-rule")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for shapes and text</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for shapes and text</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/fill/index.html b/files/zh-cn/web/svg/attribute/fill/index.html new file mode 100644 index 0000000000..1367e0ee8a --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fill/index.html @@ -0,0 +1,83 @@ +--- +title: fill +slug: Web/SVG/Attribute/fill +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/fill +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>fill</code>属性根据它的使用环境，拥有两个意义。</p> + +<p><span style="line-height: 22.008px;">默认地，当动画元素结束时，目标元素的外观属性不再应用该效果。在动画元素结束后，要还保持这个动画的的值，就需要用到<code>fill</code>属性。</span></p> + +<p>对于形状元素和文本，<span style="line-height: 22.008px;"><code>fill</code>属性是外观属性，用来定义给定图形元素内部的颜色。哪一块算是“内部”取决于形状本身以及</span>{{ SVGAttr("fill-rule") }} 属性的值。作为一个外观属性，它可以直接用作CSS样式表内部的属性。</p> + +<h2 id="用法">用法</h2> + +<h3 id="对动画元素">对动画元素</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画定时属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong title="this is the default value">remove</strong> | freeze</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#FillAttribute" title="http://www.w3.org/TR/SVG/animate.html#FillAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>remove（默认值）</dt> + <dd>在动画的激活持续时间结束后，动画效果会移除（不再应用）。在动画的激活结束后，动画不再对目标元素有影响（除非动画重新开始）。</dd> + <dt>freeze</dt> + <dd>在动画激活持续时间结束后，文档持续时间的剩余时间里（或者直到动画重新开始）动画效果会“冻结”着。</dd> +</dl> + +<h3 id="对形状元素">对形状元素</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint"><paint></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#FillProperty" title="http://www.w3.org/TR/SVG/painting.html#FillProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>fill</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Animation_elements" title="en/SVG/Element#Animation">动画元素</a> »</li> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">形状元素</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">文本内容元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/filter/index.html b/files/zh-cn/web/svg/attribute/filter/index.html new file mode 100644 index 0000000000..3f4893168f --- /dev/null +++ b/files/zh-cn/web/svg/attribute/filter/index.html @@ -0,0 +1,68 @@ +--- +title: filter +slug: Web/SVG/Attribute/filter +tags: + - SVG + - SVG过滤器 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/filter +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><font face="Open Sans, Arial, sans-serif">属性</font><code>filter</code>定义了由{{ SVGElement("filter") }}元素定义滤镜效果，该滤镜效果将应用到该元素上。</p> + +<p>作为一个外观属性，它可以直接用作CSS样式表内部的属性。请阅读{{ cssxref("filter","CSS filter") }}以了解更多信息。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#FuncIRI" title="https://developer.mozilla.org/en/SVG/Content_type#FuncIRI"><funciri></a> | <strong>none</strong> | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterProperty" title="http://www.w3.org/TR/SVG11/filters.html#FilterProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><a href="/en/SVG/Content_type#FuncIRI" title="https://developer.mozilla.org/en/SVG/Content_type#FuncIRI"><funciri></a></dt> + <dd>元素的引用，它定义了将要应用到该元素的滤镜效果。</dd> + <dt>none</dt> + <dd>不对该元素应用任何滤镜效果。</dd> +</dl> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>filter</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Graphics_elements" title="en/SVG/Element#Graphics_elements">图形元素</a> »</li> + <li>{{ SVGElement("a") }}</li> + <li>{{ SVGElement("defs") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("g") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("missing-glyph") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("switch") }}</li> + <li>{{ SVGElement("symbol") }}</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ cssxref("filter","CSS filter") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/filterunits/index.html b/files/zh-cn/web/svg/attribute/filterunits/index.html new file mode 100644 index 0000000000..f9cd714104 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/filterunits/index.html @@ -0,0 +1,50 @@ +--- +title: filterUnits +slug: Web/SVG/Attribute/filterUnits +translation_of: Web/SVG/Attribute/filterUnits +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>filterUnits 属性定义{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和{{ SVGAttr("height") }}使用的坐标系系统.</p> + +<p>如果filterUnits属性未指定,那么效果如同指定了值为<code>objectBoundingBox.</code></p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><code>userSpaceOnUse</code> | <code><strong>objectBoundingBox</strong></code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElementFilterUnitsAttribute" title="http://www.w3.org/TR/SVG11/filters.html#FilterElementFilterUnitsAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>userSpaceOnUse</dt> + <dd>{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和 {{ SVGAttr("height") }} 表示当前坐标系统中的值，这些值表示{{ SVGElement("filter") }}元素在当前用户坐标系中的位置和大小(例如通过{{ SVGAttr("filter") }}引用该{{ SVGElement("filter") }}元素的元素所在的坐标系系统).</dd> + <dt>objectBoundingBox</dt> + <dd>在这种情况下,{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和 {{ SVGAttr("height") }}biao表示引用{{ SVGElement("filter") }}元素的元素的baow包围盒的分数或百分比.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h2 id="Elements">Elements</h2> + +<p>下面这些元素可以使用filterUnits属性:</p> + +<ul> + <li>{{ SVGElement("filter") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/font-family/index.html b/files/zh-cn/web/svg/attribute/font-family/index.html new file mode 100644 index 0000000000..7fa86002d6 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/font-family/index.html @@ -0,0 +1,49 @@ +--- +title: font-family +slug: Web/SVG/Attribute/font-family +tags: + - SVG属性 +translation_of: Web/SVG/Attribute/font-family +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p><code>font-family</code> 属性(attribute) 指出哪个字体集将被用来渲染文字， 在带优先级的字体集名称列表被指定，还有或没有泛指的字符集名称。(specified as a prioritized list of font family names and/or generic family names)。</p> +<p>作为一个表现层的属性，<code>font-family</code>属性也可以被直接用在CSS样式表中，详见 {{ cssxref("font-family","CSS font-family") }} 。</p> +<h2 id="使用上下文">使用上下文</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">分类</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">值</th> + <td>[[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] | inherit</td> + </tr> + <tr> + <th scope="row">可动画Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#FontFamilyProperty" title="http://www.w3.org/TR/SVG11/text.html#FontFamilyProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> +<h2 id="例子">例子</h2> +<h4 id="css">css</h4> +<pre>p.class1{font-family:"Times New Roman",Times,serif;} +p.class2{font-family:Arial,Helvetica;} +</pre> +<h4 id="html">html</h4> +<pre class="brush: 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> +</pre> +<h2 id="元素">元素</h2> +<p>以下元素可以使用<code>font-family</code> 属性(attribute)</p> +<ul> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">Text content elements</a> »</li> +</ul> +<h2 id="另见">另见</h2> +<ul> + <li>{{ cssxref("font-family","CSS font-family") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/fr/index.html b/files/zh-cn/web/svg/attribute/fr/index.html new file mode 100644 index 0000000000..b06f88a08d --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fr/index.html @@ -0,0 +1,68 @@ +--- +title: fr +slug: Web/SVG/Attribute/fr +tags: + - SVG属性 + - SVG径向渐变 + - SVG径向渐变焦点 +translation_of: Web/SVG/Attribute/fr +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考主页</a></p> + +<p>对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的半径。若该属性没有被定义，默认值为 0%。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en-US/docs/Web/SVG/Content_type#Length"><length></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>非</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: html language-html"><code class="language-html"><span class="prolog token"><?xml version="1.0" standalone="no"?></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span> + <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>defs</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>radialGradient</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Gradient<span class="punctuation token">"</span></span> + <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> </span></code>fx="0.35" fy="0.35" fr="5%"<code class="language-html"><span class="tag token"><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>radialGradient</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>defs</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">rx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">ry</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> + <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>url(#Gradient)<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>black<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>transparent<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>35<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>35<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>38<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sans-serif<span class="punctuation token">"</span></span> <span class="attr-name token">font-size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10pt<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(fx,fy)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>63<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>63<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sans-serif<span class="punctuation token">"</span></span> <span class="attr-name token">font-size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10pt<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(cx,cy)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用 <code>fr</code> 属性：</p> + +<ul> + <li>{{ SVGElement("radialGradient") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/from/index.html b/files/zh-cn/web/svg/attribute/from/index.html new file mode 100644 index 0000000000..59e5f73f3c --- /dev/null +++ b/files/zh-cn/web/svg/attribute/from/index.html @@ -0,0 +1,63 @@ +--- +title: from +slug: Web/SVG/Attribute/From +translation_of: Web/SVG/Attribute/From +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考</a></p> + +<p>这个属性是在svg动画发生过程中被修改的属性的初始值。当同时使用了这个属性和 <a href="/en-US/docs/Web/SVG/Attribute/To">to</a> 属性, animation将会修改这个这个设定的动画属性的值从from属性的值到to属性的值。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画属性值</td> + </tr> + <tr> + <th scope="row">值</th> + <td><value></td> + </tr> + <tr> + <th scope="row">动画特征</th> + <td>No</td> + </tr> + <tr> + <th scope="row">标准化文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#FromAttribute" title="http://www.w3.org/TR/SVG/animate.html#FromAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>这个属性的准确的值类型取决于这个属性将要被用作动画的属性的值。</p> + +<h2 id="例子">例子</h2> + +<p>这个例子给from属性了一个100的值，让动画从100的宽度开始运行。</p> + +<pre class="brush: xml"><?xml version="1.0"?> +<svg width="200" height="200" + viewPort="0 0 200 200" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="100" height="100"> + <animate attributeType="XML" + attributeName="width" + from="100" to="150" + dur="3s" + fill="freeze"/> + </rect> + +</svg></pre> + +<h2 id="元素">元素</h2> + +<p>如下的元素能使用from属性</p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateMotion") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/fx/index.html b/files/zh-cn/web/svg/attribute/fx/index.html new file mode 100644 index 0000000000..20f6861f37 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fx/index.html @@ -0,0 +1,74 @@ +--- +title: fx +slug: Web/SVG/Attribute/fx +tags: + - SVG + - SVG属性 + - SVG径向渐变 + - SVG渐变 + - SVG渐变焦点 +translation_of: Web/SVG/Attribute/fx +--- +<p>« <a href="/zh-CN/docs/web/SVG/Attribute">SVG属性参考主页</a></p> + +<p>对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="https://developer.mozilla.org/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>非</td> + </tr> + <tr> + <th scope="row">规范文档 </th> + <td><a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: html language-html"><code class="language-html"><span class="prolog token"><?xml version="1.0" standalone="no"?></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span> + <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>defs</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>radialGradient</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Gradient<span class="punctuation token">"</span></span> + <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">fx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.25<span class="punctuation token">"</span></span> <span class="attr-name token">fy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.25<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>radialGradient</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>defs</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">rx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">ry</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> + <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>url(#Gradient)<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>black<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>transparent<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>35<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>35<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>38<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sans-serif<span class="punctuation token">"</span></span> <span class="attr-name token">font-size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10pt<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(fx,fy)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>63<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>63<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sans-serif<span class="punctuation token">"</span></span> <span class="attr-name token">font-size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10pt<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(cx,cy)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用 <code>fx</code> 属性：</p> + +<ul> + <li>{{ SVGElement("radialGradient") }}</li> +</ul> + +<p> + <audio style="display: none;"> </audio> +</p> diff --git a/files/zh-cn/web/svg/attribute/fy/index.html b/files/zh-cn/web/svg/attribute/fy/index.html new file mode 100644 index 0000000000..6b595a7090 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fy/index.html @@ -0,0 +1,71 @@ +--- +title: fy +slug: Web/SVG/Attribute/fy +tags: + - SVG属性 + - SVG径向渐变 + - SVG径向渐变焦点 + - SVG渐变属性 +translation_of: Web/SVG/Attribute/fy +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考主页</a></p> + +<p>对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的 y 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>非</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","Coordinate") }}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html language-html"><code class="language-html"><span class="prolog token"><?xml version="1.0" standalone="no"?></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span> + <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>defs</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>radialGradient</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Gradient<span class="punctuation token">"</span></span> + <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">fx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.25<span class="punctuation token">"</span></span> <span class="attr-name token">fy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.25<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>radialGradient</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>defs</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">rx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">ry</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> + <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>url(#Gradient)<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>black<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>transparent<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>35<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>35<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>38<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sans-serif<span class="punctuation token">"</span></span> <span class="attr-name token">font-size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10pt<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(fx,fy)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>63<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>63<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sans-serif<span class="punctuation token">"</span></span> <span class="attr-name token">font-size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10pt<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(cx,cy)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用 <code>fy</code> 属性：</p> + +<ul> + <li>{{ SVGElement("radialGradient") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/height/index.html b/files/zh-cn/web/svg/attribute/height/index.html new file mode 100644 index 0000000000..98f18de2df --- /dev/null +++ b/files/zh-cn/web/svg/attribute/height/index.html @@ -0,0 +1,72 @@ +--- +title: height +slug: Web/SVG/Attribute/height +tags: + - NeedsCompatTable + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/height +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性在用户坐标系统中标识了一个垂直长度。该坐标的确切效果依赖于每个元素。大多数时候，它体现引用元素的矩形区域的高度（请阅读每个元素的文档以了解例外情况）。</p> + +<p>除了{{ SVGElement("svg") }}元素之外，别的元素都必须指定该属性，{{ SVGElement("svg") }}的高度默认是<strong>100%</strong>，而{{ SVGElement("filter") }}元素以及{{ SVGElement("mask") }}元素的默认高度是<strong>120%</strong>。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementHeightAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementHeightAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementHeightAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementHeightAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementHeightAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementHeightAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementHeightAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementHeightAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementHeightAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementHeightAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveHeightAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveHeightAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementHeightAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementHeightAttribute">SVG 1.1 (2nd Edition): mask element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/zh-CN/Content_type","Length") }}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><?xml version="1.0"?> +<svg width="120" height="120" + viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="100" height="100"/> +</svg></pre> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用 <code>height </code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">滤镜元素</a> »</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("use") }}</li> + <li>{{ SVGElement("mask") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/id/index.html b/files/zh-cn/web/svg/attribute/id/index.html new file mode 100644 index 0000000000..25610abd4e --- /dev/null +++ b/files/zh-cn/web/svg/attribute/id/index.html @@ -0,0 +1,99 @@ +--- +title: id +slug: Web/SVG/Attribute/id +translation_of: Web/SVG/Attribute/id +--- +<div>{{SVGRef}}</div> + +<p><strong><code>id</code></strong> 属性给予元素一个唯一名称。</p> + +<p>所有元素均可使用该属性。</p> + +<div id="topExample"> +<pre class="brush: html"><svg width="120" height="120" viewPort="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> + <style type="text/css"> + <![CDATA[ + #smallRect { + stroke: #000066; + fill: #00cc00; + } + ]]> + </style> + + <rect id="smallRect" x="10" y="10" width="100" height="100" /> +</svg> +</pre> + +<p>{{EmbedLiveSample("topExample", "120", "120")}}</p> +</div> + +<h2 id="用法说明">用法说明</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">值</th> + <td><id></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">可动画</th> + <td>No</td> + </tr> + </tbody> +</table> + +<dl> + <dt><id></dt> + <dd> + <p>指定元素的ID。 该ID在节点树中必须是唯一的，不能为空字符串，并且不能包含任何空格字符。</p> + + <div class="blockIndicator note"> + <p><strong>注意:</strong> 应当避免使用会被解析为SVG视图规范的 <code>id</code> 值（如<code>MyDrawing.svg#svgView(viewBox(0,200,1000,1000))</code>），或被解析为用作URL目标片段的基本媒体片段的 <code>id</code> 值。</p> + </div> + + + + <p>该属性取值必须在XML文档中有效。 独立的SVG文档使用XML 1.0语法，该语法指定有效的ID仅包含指定的字符（字母，数字和一些标点符号），开头不能是数字，点（.）字符或 连字符减号（-）。</p> + </dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "struct.html#IDAttribute", "id")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Defines the allowed values in more detail.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#IDAttribute", "id")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.attributes.style.class")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/id">HTML <code>id</code></a></li> + <li>{{SVGAttr("class")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/image-rendering/index.html b/files/zh-cn/web/svg/attribute/image-rendering/index.html new file mode 100644 index 0000000000..462ec504ed --- /dev/null +++ b/files/zh-cn/web/svg/attribute/image-rendering/index.html @@ -0,0 +1,57 @@ +--- +title: image-rendering +slug: Web/SVG/Attribute/image-rendering +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/image-rendering +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p><code>image-rendering</code> 属性向浏览器提供了一个提示，即在图片处理时，如何进行速度 vs 质量之间的权衡。<br> + <br> + 作为一个显示属性，它也可以在 CSS 样式文件中作为属性而存在，请参考 {{ cssxref("image-rendering","CSS image-rendering") }} 获取更多的信息</p> +<h2 id="使用语境">使用语境</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong title="this is the default value">auto</strong> | optimizeSpeed | optimizeQuality | inherit</td> + </tr> + <tr> + <th scope="row">动画效果</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范性文件</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#ImageRenderingProperty" title="http://www.w3.org/TR/SVG11/painting.html#ImageRenderingProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> +<dl> + <dt> + auto</dt> + <dd> + 表示用户代理可以在速度和质量间做适当的权衡，但是质量将比速度更重要一些。</dd> + <dt> + optimizeSpeed</dt> + <dd> + 表示用户代理应该更注重速度。</dd> + <dt> + optimizeQuality</dt> + <dd> + 表示用户代理应该更注重质量</dd> +</dl> +<h2 id="示例">示例</h2> +<h2 id="元素">元素</h2> +<p>下面的元素可以能够使用 <code>image-rendering</code> 属性</p> +<ul> + <li>{{ SVGElement("image") }}</li> +</ul> +<h2 id="参考">参考</h2> +<ul> + <li>{{ cssxref("image-rendering","CSS image-rendering") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/in/index.html b/files/zh-cn/web/svg/attribute/in/index.html new file mode 100644 index 0000000000..e27cde1055 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/in/index.html @@ -0,0 +1,105 @@ +--- +title: in +slug: Web/SVG/Attribute/in +translation_of: Web/SVG/Attribute/in +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>in属性标识输入的原语.</p> + +<p>其值可以是下面六种关键词中的一种,或者是一个字符串匹配在同一个{{SVGElement("filter")}}元素中前面的原语的{{SVGAttr("result")}} 属性值. 如果没有提供值并且这是filter中第一个原语,那么原语将相当于使用SourceGraphic作为输入值. 如果没有提供值并且这不是第一个原语,那么原语将使用前面原语的result属性值作为输入.<br> + <br> + 如果{{SVGAttr("result")}}的值在同一个{{SVGElement("filter")}}中出现多次,那么将使用前面的距离使用该{{SVGAttr("result")}}值的原语最近的该result值的原语作为输入.</p> + +<p>除了SourceGraphic和<strong><filter-primitive-reference> (引用原语) </strong>, 关键词都没有在现代浏览器中实现.(译者注:SourceAlpha也被现代浏览器支持)</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><code>SourceGraphic</code> | <code>SourceAlpha</code> | <code>BackgroundImage</code> | <code>BackgroundAlpha</code> | <code>FillPaint</code> | <code>StrokePaint</code> | <filter-primitive-reference></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute" title="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>SourceGraphic</dt> + <dd>该关键词表示图形元素自身将作为{{SVGElement("filter")}}原语的原始输入.</dd> + <dt>SourceAlpha</dt> + <dd>该关键词表示图形元素自身将作为{{SVGElement("filter")}}原语的原始输入. SourceAlpha与SourceGraphic具有相同的规则除了SourceAlpha只使用元素的透明度.</dd> + <dt>BackgroundImage</dt> + <dd>该关键词表示filter元素当前底下的区域的图形快照将被调用.</dd> + <dt>BackgroundAlpha</dt> + <dd>跟BackgroundImage相同除了只使用透明度.</dd> + <dt>FillPaint</dt> + <dd>This keyword represents the value of the {{SVGAttr("fill")}} property on the target element for the filter effect. In many cases, the <code>FillPaint</code> is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.</dd> + <dt>StrokePaint</dt> + <dd>This keyword represents the value of the {{SVGAttr("stroke")}} property on the target element for the filter effect. In many cases, the <code>StrokePaint</code> is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.</dd> +</dl> + +<h2 id="Workaround_for_backgroundImage" name="Workaround_for_backgroundImage">BackgroundImage的解决方案</h2> + +<p>我们需要使用 < feimage >原语引入一个图像混合到过滤器本身内来替代使用"BackgroundImage".</p> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div style="width: 420px; height: 220px;"> +<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="backgroundMultiply"> + <!-- This will not work. --> + <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/> + </filter> + </defs> + <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" /> +</svg> + +<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="imageMultiply"> + <!-- This is a workaround. --> + <feImage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <feBlend in2="SourceGraphic" mode="multiply"/> + </filter> + </defs> + <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/> +</svg> +</div></pre> + +<h3 id="效果">效果</h3> + +<p>{{ EmbedLiveSample('Workaround_for_backgroundImage') }}</p> + +<h2 id="Workaround_for_BackgroundImage" name="Workaround_for_BackgroundImage">元素</h2> + +<p>下列元素可以使用该属性</p> + +<ul> + <li>{{SVGElement("feBlend")}}</li> + <li>{{SVGElement("feColorMatrix")}}</li> + <li>{{SVGElement("feComponentTransfer")}}</li> + <li>{{SVGElement("feComposite")}}</li> + <li>{{SVGElement("feConvolveMatrix")}}</li> + <li>{{SVGElement("feDiffuseLighting")}}</li> + <li>{{SVGElement("feDisplacementMap")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feTile")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/index.html b/files/zh-cn/web/svg/attribute/index.html new file mode 100644 index 0000000000..ed2afd450f --- /dev/null +++ b/files/zh-cn/web/svg/attribute/index.html @@ -0,0 +1,476 @@ +--- +title: SVG 属性参考 +slug: Web/SVG/Attribute +tags: + - SVG + - SVG Attribute + - SVG Reference + - SVG 属性 + - 矢量图形 +translation_of: Web/SVG/Attribute +--- +<div>{{SVGRef}}</div> + +<p class="summary"><span class="seoSummary">SVG 元素可以通过属性来修改，这些属性指定有关如何处理或呈现元素的详细信息。</span> 下面列出了 SVG 中所有的可用属性以及参考文档的链接，以帮助您了解哪些元素支持它们，以及它们如何工作。</p> + +<h2 id="SVG_属性（从_A-Z_排序）">SVG 属性（从 A-Z 排序）</h2> + +<div class="index"> +<h3 id="A">A</h3> + +<ul> + <li>{{SVGAttr("accent-height")}}</li> + <li>{{SVGAttr("accumulate")}}</li> + <li>{{SVGAttr("additive")}}</li> + <li>{{SVGAttr("alignment-baseline")}}</li> + <li>{{SVGAttr("allowReorder")}}</li> + <li>{{SVGAttr("alphabetic")}}</li> + <li>{{SVGAttr("amplitude")}}</li> + <li>{{SVGAttr("arabic-form")}}</li> + <li>{{SVGAttr("ascent")}}</li> + <li>{{SVGAttr("attributeName")}}</li> + <li>{{SVGAttr("attributeType")}}</li> + <li>{{SVGAttr("autoReverse")}}</li> + <li>{{SVGAttr("azimuth")}}</li> +</ul> + +<h3 id="B">B</h3> + +<ul> + <li>{{SVGAttr("baseFrequency")}}</li> + <li>{{SVGAttr("baseline-shift")}}</li> + <li>{{SVGAttr("baseProfile")}}</li> + <li>{{SVGAttr("bbox")}}</li> + <li>{{SVGAttr("begin")}}</li> + <li>{{SVGAttr("bias")}}</li> + <li>{{SVGAttr("by")}}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{SVGAttr("calcMode")}}</li> + <li>{{SVGAttr("cap-height")}}</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("clip")}}</li> + <li>{{SVGAttr("clipPathUnits")}}</li> + <li>{{SVGAttr("clip-path")}}</li> + <li>{{SVGAttr("clip-rule")}}</li> + <li>{{SVGAttr("color")}}</li> + <li>{{SVGAttr("color-interpolation")}}</li> + <li>{{SVGAttr("color-interpolation-filters")}}</li> + <li>{{SVGAttr("color-profile")}}</li> + <li>{{SVGAttr("color-rendering")}}</li> + <li>{{SVGAttr("contentScriptType")}}</li> + <li>{{SVGAttr("contentStyleType")}}</li> + <li>{{SVGAttr("cursor")}}</li> + <li>{{SVGAttr("cx")}}</li> + <li>{{SVGAttr("cy")}}</li> +</ul> + +<h3 id="D">D</h3> + +<ul> + <li>{{SVGAttr("d")}}</li> + <li>{{SVGAttr("decelerate")}}</li> + <li>{{SVGAttr("descent")}}</li> + <li>{{SVGAttr("diffuseConstant")}}</li> + <li>{{SVGAttr("direction")}}</li> + <li>{{SVGAttr("display")}}</li> + <li>{{SVGAttr("divisor")}}</li> + <li>{{SVGAttr("dominant-baseline")}}</li> + <li>{{SVGAttr("dur")}}</li> + <li>{{SVGAttr("dx")}}</li> + <li>{{SVGAttr("dy")}}</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{SVGAttr("edgeMode")}}</li> + <li>{{SVGAttr("elevation")}}</li> + <li>{{SVGAttr("enable-background")}}</li> + <li>{{SVGAttr("end")}}</li> + <li>{{SVGAttr("exponent")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{SVGAttr("fill")}}</li> + <li>{{SVGAttr("fill-opacity")}}</li> + <li>{{SVGAttr("fill-rule")}}</li> + <li>{{SVGAttr("filter")}}</li> + <li>{{SVGAttr("filterRes")}}</li> + <li>{{SVGAttr("filterUnits")}}</li> + <li>{{SVGAttr("flood-color")}}</li> + <li>{{SVGAttr("flood-opacity")}}</li> + <li>{{SVGAttr("font-family")}}</li> + <li>{{SVGAttr("font-size")}}</li> + <li>{{SVGAttr("font-size-adjust")}}</li> + <li>{{SVGAttr("font-stretch")}}</li> + <li>{{SVGAttr("font-style")}}</li> + <li>{{SVGAttr("font-variant")}}</li> + <li>{{SVGAttr("font-weight")}}</li> + <li>{{SVGAttr("format")}}</li> + <li>{{SVGAttr("from")}}</li> + <li>{{SVGAttr("fr")}}</li> + <li>{{SVGAttr("fx")}}</li> + <li>{{SVGAttr("fy")}}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{SVGAttr("g1")}}</li> + <li>{{SVGAttr("g2")}}</li> + <li>{{SVGAttr("glyph-name")}}</li> + <li>{{SVGAttr("glyph-orientation-horizontal")}}</li> + <li>{{SVGAttr("glyph-orientation-vertical")}}</li> + <li>{{SVGAttr("glyphRef")}}</li> + <li>{{SVGAttr("gradientTransform")}}</li> + <li>{{SVGAttr("gradientUnits")}}</li> +</ul> + +<h3 id="H">H</h3> + +<ul> + <li>{{SVGAttr("hanging")}}</li> + <li>{{SVGAttr("height")}}</li> + <li>{{SVGAttr("href")}}</li> + <li>{{SVGAttr("hreflang")}}</li> + <li>{{SVGAttr("horiz-adv-x")}}</li> + <li>{{SVGAttr("horiz-origin-x")}}</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{SVGAttr("id")}}</li> + <li>{{SVGAttr("ideographic")}}</li> + <li>{{SVGAttr("image-rendering")}}</li> + <li>{{SVGAttr("in")}}</li> + <li>{{SVGAttr("in2")}}</li> + <li>{{SVGAttr("intercept")}}</li> +</ul> + +<h3 id="K">K</h3> + +<ul> + <li>{{SVGAttr("k")}}</li> + <li>{{SVGAttr("k1")}}</li> + <li>{{SVGAttr("k2")}}</li> + <li>{{SVGAttr("k3")}}</li> + <li>{{SVGAttr("k4")}}</li> + <li>{{SVGAttr("kernelMatrix")}}</li> + <li>{{SVGAttr("kernelUnitLength")}}</li> + <li>{{SVGAttr("kerning")}}</li> + <li>{{SVGAttr("keyPoints")}}</li> + <li>{{SVGAttr("keySplines")}}</li> + <li>{{SVGAttr("keyTimes")}}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{SVGAttr("lang")}}</li> + <li>{{SVGAttr("lengthAdjust")}}</li> + <li>{{SVGAttr("letter-spacing")}}</li> + <li>{{SVGAttr("lighting-color")}}</li> + <li>{{SVGAttr("limitingConeAngle")}}</li> + <li>{{SVGAttr("local")}}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{SVGAttr("marker-end")}}</li> + <li>{{SVGAttr("marker-mid")}}</li> + <li>{{SVGAttr("marker-start")}}</li> + <li>{{SVGAttr("markerHeight")}}</li> + <li>{{SVGAttr("markerUnits")}}</li> + <li>{{SVGAttr("markerWidth")}}</li> + <li>{{SVGAttr("mask")}}</li> + <li>{{SVGAttr("maskContentUnits")}}</li> + <li>{{SVGAttr("maskUnits")}}</li> + <li>{{SVGAttr("mathematical")}}</li> + <li>{{SVGAttr("max")}}</li> + <li>{{SVGAttr("media")}}</li> + <li>{{SVGAttr("method")}}</li> + <li>{{SVGAttr("min")}}</li> + <li>{{SVGAttr("mode")}}</li> +</ul> + +<h3 id="N">N</h3> + +<ul> + <li>{{SVGAttr("name")}}</li> + <li>{{SVGAttr("numOctaves")}}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{SVGAttr("offset")}}</li> + <li>{{SVGAttr("opacity")}}</li> + <li>{{SVGAttr("operator")}}</li> + <li>{{SVGAttr("order")}}</li> + <li>{{SVGAttr("orient")}}</li> + <li>{{SVGAttr("orientation")}}</li> + <li>{{SVGAttr("origin")}}</li> + <li>{{SVGAttr("overflow")}}</li> + <li>{{SVGAttr("overline-position")}}</li> + <li>{{SVGAttr("overline-thickness")}}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{SVGAttr("panose-1")}}</li> + <li>{{SVGAttr("paint-order")}}</li> + <li>{{SVGAttr("path")}}</li> + <li>{{SVGAttr("pathLength")}}</li> + <li>{{SVGAttr("patternContentUnits")}}</li> + <li>{{SVGAttr("patternTransform")}}</li> + <li>{{SVGAttr("patternUnits")}}</li> + <li>{{SVGAttr("ping")}}</li> + <li>{{SVGAttr("pointer-events")}}</li> + <li>{{SVGAttr("points")}}</li> + <li>{{SVGAttr("pointsAtX")}}</li> + <li>{{SVGAttr("pointsAtY")}}</li> + <li>{{SVGAttr("pointsAtZ")}}</li> + <li>{{SVGAttr("preserveAlpha")}}</li> + <li>{{SVGAttr("preserveAspectRatio")}}</li> + <li>{{SVGAttr("primitiveUnits")}}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{SVGAttr("r")}}</li> + <li>{{SVGAttr("radius")}}</li> + <li>{{SVGAttr("referrerPolicy")}}</li> + <li>{{SVGAttr("refX")}}</li> + <li>{{SVGAttr("refY")}}</li> + <li>{{SVGAttr("rel")}}</li> + <li>{{SVGAttr("rendering-intent")}}</li> + <li>{{SVGAttr("repeatCount")}}</li> + <li>{{SVGAttr("repeatDur")}}</li> + <li>{{SVGAttr("requiredExtensions")}}</li> + <li>{{SVGAttr("requiredFeatures")}}</li> + <li>{{SVGAttr("restart")}}</li> + <li>{{SVGAttr("result")}}</li> + <li>{{SVGAttr("rotate")}}</li> + <li>{{SVGAttr("rx")}}</li> + <li>{{SVGAttr("ry")}}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{SVGAttr("scale")}}</li> + <li>{{SVGAttr("seed")}}</li> + <li>{{SVGAttr("shape-rendering")}}</li> + <li>{{SVGAttr("slope")}}</li> + <li>{{SVGAttr("spacing")}}</li> + <li>{{SVGAttr("specularConstant")}}</li> + <li>{{SVGAttr("specularExponent")}}</li> + <li>{{SVGAttr("speed")}}</li> + <li>{{SVGAttr("spreadMethod")}}</li> + <li>{{SVGAttr("startOffset")}}</li> + <li>{{SVGAttr("stdDeviation")}}</li> + <li>{{SVGAttr("stemh")}}</li> + <li>{{SVGAttr("stemv")}}</li> + <li>{{SVGAttr("stitchTiles")}}</li> + <li>{{SVGAttr("stop-color")}}</li> + <li>{{SVGAttr("stop-opacity")}}</li> + <li>{{SVGAttr("strikethrough-position")}}</li> + <li>{{SVGAttr("strikethrough-thickness")}}</li> + <li>{{SVGAttr("string")}}</li> + <li>{{SVGAttr("stroke")}}</li> + <li>{{SVGAttr("stroke-dasharray")}}</li> + <li>{{SVGAttr("stroke-dashoffset")}}</li> + <li>{{SVGAttr("stroke-linecap")}}</li> + <li>{{SVGAttr("stroke-linejoin")}}</li> + <li>{{SVGAttr("stroke-miterlimit")}}</li> + <li>{{SVGAttr("stroke-opacity")}}</li> + <li>{{SVGAttr("stroke-width")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("surfaceScale")}}</li> + <li>{{SVGAttr("systemLanguage")}}</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{SVGAttr("tabindex")}}</li> + <li>{{SVGAttr("tableValues")}}</li> + <li>{{SVGAttr("target")}}</li> + <li>{{SVGAttr("targetX")}}</li> + <li>{{SVGAttr("targetY")}}</li> + <li>{{SVGAttr("text-anchor")}}</li> + <li>{{SVGAttr("text-decoration")}}</li> + <li>{{SVGAttr("text-rendering")}}</li> + <li>{{SVGAttr("textLength")}}</li> + <li>{{SVGAttr("to")}}</li> + <li>{{SVGAttr("transform")}}</li> + <li>{{SVGAttr("type")}}</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{SVGAttr("u1")}}</li> + <li>{{SVGAttr("u2")}}</li> + <li>{{SVGAttr("underline-position")}}</li> + <li>{{SVGAttr("underline-thickness")}}</li> + <li>{{SVGAttr("unicode")}}</li> + <li>{{SVGAttr("unicode-bidi")}}</li> + <li>{{SVGAttr("unicode-range")}}</li> + <li>{{SVGAttr("units-per-em")}}</li> +</ul> + +<h3 id="V">V</h3> + +<ul> + <li>{{SVGAttr("v-alphabetic")}}</li> + <li>{{SVGAttr("v-hanging")}}</li> + <li>{{SVGAttr("v-ideographic")}}</li> + <li>{{SVGAttr("v-mathematical")}}</li> + <li>{{SVGAttr("values")}}</li> + <li>{{SVGAttr("vector-effect")}}</li> + <li>{{SVGAttr("version")}}</li> + <li>{{SVGAttr("vert-adv-y")}}</li> + <li>{{SVGAttr("vert-origin-x")}}</li> + <li>{{SVGAttr("vert-origin-y")}}</li> + <li>{{SVGAttr("viewBox")}}</li> + <li>{{SVGAttr("viewTarget")}}</li> + <li>{{SVGAttr("visibility")}}</li> +</ul> + +<h3 id="W">W</h3> + +<ul> + <li>{{SVGAttr("width")}}</li> + <li>{{SVGAttr("widths")}}</li> + <li>{{SVGAttr("word-spacing")}}</li> + <li>{{SVGAttr("writing-mode")}}</li> +</ul> + +<h3 id="X">X</h3> + +<ul> + <li>{{SVGAttr("x")}}</li> + <li>{{SVGAttr("x-height")}}</li> + <li>{{SVGAttr("x1")}}</li> + <li>{{SVGAttr("x2")}}</li> + <li>{{SVGAttr("xChannelSelector")}}</li> + <li>{{SVGAttr("xlink:actuate")}}</li> + <li>{{SVGAttr("xlink:arcrole")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> + <li>{{SVGAttr("xlink:role")}}</li> + <li>{{SVGAttr("xlink:show")}}</li> + <li>{{SVGAttr("xlink:title")}}</li> + <li>{{SVGAttr("xlink:type")}}</li> + <li>{{SVGAttr("xml:base")}}</li> + <li>{{SVGAttr("xml:lang")}}</li> + <li>{{SVGAttr("xml:space")}}</li> +</ul> + +<h3 id="Y">Y</h3> + +<ul> + <li>{{SVGAttr("y")}}</li> + <li>{{SVGAttr("y1")}}</li> + <li>{{SVGAttr("y2")}}</li> + <li>{{SVGAttr("yChannelSelector")}}</li> +</ul> + +<h3 id="Z">Z</h3> + +<ul> + <li>{{SVGAttr("z")}}</li> + <li>{{SVGAttr("zoomAndPan")}}</li> +</ul> +</div> + +<h2 id="SVG_属性（按类别分类）">SVG 属性（按类别分类）</h2> + +<h3 id="Generic_Attributes">Generic Attributes</h3> + +<h4 id="核心属性"><a href="/docs/Web/SVG/Attribute/Core">核心属性</a></h4> + +<p>{{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}}</p> + +<h4 id="样式属性"><a href="/docs/Web/SVG/Attribute/Styling">样式属性</a></h4> + +<p>{{SVGAttr("class")}}, {{SVGAttr("style")}}</p> + +<h4 id="条件处理属性">条件处理属性</h4> + +<p>{{SVGAttr("externalResourcesRequired")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}.</p> + +<h3 id="XLink_属性">XLink 属性</h3> + +<p>{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:type")}}, {{SVGAttr("xlink:role")}}, {{SVGAttr("xlink:arcrole")}}, {{SVGAttr("xlink:title")}}, {{SVGAttr("xlink:show")}}, {{SVGAttr("xlink:actuate")}}</p> + +<h3 id="显示属性"><a href="/docs/Web/SVG/Attribute/Presentation">显示属性</a></h3> + +<div class="note">注意，所有 SVG 显示属性都可以作为 CSS 属性来使用。</div> + +<p>{{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")}}</p> + +<h3 id="滤镜属性">滤镜属性</h3> + +<h4 id="滤镜原始属性">滤镜原始属性</h4> + +<p>{{SVGAttr("height")}}, {{SVGAttr("result")}}, {{SVGAttr("width")}}, {{SVGAttr("x")}}, {{SVGAttr("y")}}</p> + +<h4 id="传递函数属性">传递函数属性</h4> + +<p>{{SVGAttr("type")}}, {{SVGAttr("tableValues")}}, {{SVGAttr("slope")}}, {{SVGAttr("intercept")}}, {{SVGAttr("amplitude")}}, {{SVGAttr("exponent")}}, {{SVGAttr("offset")}}</p> + +<h3 id="动画属性">动画属性</h3> + +<h4 id="动画属性目标属性">动画属性目标属性</h4> + +<p>{{SVGAttr("attributeType")}}, {{SVGAttr("attributeName")}}</p> + +<h4 id="动画时间属性">动画时间属性</h4> + +<p>{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}</p> + +<h4 id="动画取值属性">动画取值属性</h4> + +<p>{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}, {{SVGAttr("autoReverse")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}}</p> + +<h4 id="动画额外属性">动画额外属性</h4> + +<p>{{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}</p> + +<h3 id="事件属性">事件属性</h3> + +<h4 id="动画事件属性"><a href="/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes">动画事件属性</a></h4> + +<p><strong><code>onbegin</code></strong>, <strong><code>onend</code></strong>, <strong><code>onrepeat</code></strong></p> + +<h4 id="文档事件属性"><a href="/docs/Web/SVG/Attribute/Events#Document_Event_Attributes">文档事件属性</a></h4> + +<p><strong><code>onabort</code></strong>, <strong><code>onerror</code></strong>, <strong><code>onresize</code></strong>, <strong><code>onscroll</code></strong>, <strong><code>onunload</code></strong></p> + +<h4 id="全局事件属性"><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">全局事件属性</a></h4> + +<p><code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code></p> + +<h4 id="图像事件属性"><a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">图像事件属性</a></h4> + +<p><strong><code>onactivate</code></strong>, <strong><code>onfocusin</code></strong>, <strong><code>onfocusout</code></strong></p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/SVG/Element">SVG 元素参考</a></li> + <li><a href="/zh-CN/docs/Web/SVG/Tutorial">SVG 教程</a></li> + <li><a href="/zh-CN/docs/Web/API/Document_Object_Model#SVG_interfaces">SVG 接口参考</a></li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/kernelmatrix/index.html b/files/zh-cn/web/svg/attribute/kernelmatrix/index.html new file mode 100644 index 0000000000..c216cfd948 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/kernelmatrix/index.html @@ -0,0 +1,41 @@ +--- +title: kernelMatrix +slug: Web/SVG/Attribute/kernelMatrix +translation_of: Web/SVG/Attribute/kernelMatrix +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>用于order属性定义一列<a href="/en/SVG/Content_type#Number"><number></a>为{{SVGElement("feConvolveMatrix")}} 元素构成核矩阵. 值之间用空格或逗号分开. <a href="/en/SVG/Content_type#Number"><number></a>的数量必须等于在{{SVGAttr("order")}}属性中定义的<orderX>和<orderY>的乘积.</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><a href="/en/SVG/Content_type#List-of-<var>T<.2Fvar>s" title="en/SVG/Content_type#List-of-<var>T<.2Fvar>s"><list of number></a></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementKernelMatrixAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementKernelMatrixAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<h2 id="Elements">Elements</h2> + +<p>下面的元素可以使用<code>kernelMatrix属性</code></p> + +<ul> + <li>{{ SVGElement("feConvolveMatrix") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/keytimes/index.html b/files/zh-cn/web/svg/attribute/keytimes/index.html new file mode 100644 index 0000000000..b3aaab6aef --- /dev/null +++ b/files/zh-cn/web/svg/attribute/keytimes/index.html @@ -0,0 +1,97 @@ +--- +title: keyTimes +slug: Web/SVG/Attribute/keyTimes +tags: + - SVG + - SVG属性 + - keyTimes +translation_of: Web/SVG/Attribute/keyTimes +--- +<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG </a>属性参考主页</p> + +<p>keyTimes属性是一个以分号分隔的时间值列表，用于控制动画的执行步骤。列表中的每个值与{{ SVGAttr("values") }}中的值一一对应，定义了{{ SVGAttr("values") }}中的值在动画中何时执行，keyTimes列表中的每一个值都是指定在[0-1]之间的浮点数，表示动画的完成时间。</p> + +<p>如果指定了keyTimes列表，那么一定有与之完全对应的{{ SVGAttr("values") }}列表。</p> + +<p>每一个连续的时间值必须大于等于前一个时间值。</p> + +<p>keyTimes列表的语义取决于插值模式：</p> + +<ul> + <li>对于linear(线性)和spline(样条)动画，列表中的第一个时间值必须为0，列表的最后一个时间值必须为1。与每个value关联的时间值定义了何时设置该value，该value在keyTimes的时间 值的中间插值。</li> + <li>对于discrete(离线)动画，列表中的第一个值必须为0。与每个value关联的时间值定义了何时设置该value，动画函数使用该value，直到keyTimes中定义的下一个时间值。</li> +</ul> + +<p> </p> + +<p> </p> + +<ul> +</ul> + +<p> </p> + +<p>如果插值模式是paced（踏步），keyTimes属性被忽略。</p> + +<p>如果duration（持续时间）不确定，则将忽略任何keyTimes规范。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画值属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><list></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute" title="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><?xml version="1.0"?> +<svg width="120" height="120" + viewPort="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <circle cx="60" cy="10" r="10"> + + <animate attributeName="cx" + attributeType="XML" + dur="4s" + values="60 ; 110 ; 60 ; 10 ; 60" + keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" + repeatCount="indefinite"/> + + <animate attributeName="cy" + attributeType="XML" + dur="4s" + values="10 ; 60 ; 110 ; 60 ; 10 " + keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" + repeatCount="indefinite"/> + + </circle> +</svg> +</pre> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用 <code>keyTimes属性</code></p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateMotion") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/letter-spacing/index.html b/files/zh-cn/web/svg/attribute/letter-spacing/index.html new file mode 100644 index 0000000000..4f2568aeba --- /dev/null +++ b/files/zh-cn/web/svg/attribute/letter-spacing/index.html @@ -0,0 +1,90 @@ +--- +title: letter-spacing +slug: Web/SVG/Attribute/letter-spacing +translation_of: Web/SVG/Attribute/letter-spacing +--- +<div>{{SVGRef}}</div> + +<p><span class="seoSummary">The <strong><code>letter-spacing</code></strong> attribute controls spacing between text characters, in addition to any spacing from the {{SVGAttr("kerning")}} attribute.</span></p> + +<p>If the attribute value is a unitless number (like <code>128</code>), the browser processes it as a {{cssxref("length")}} in the current user coordinate system.</p> + +<p>If the attribute value has a unit identifier, such as <code>.25em</code> or <code>1%</code>, then the browser converts the <length> into its corresponding value in the current user coordinate system.</p> + +<p class="note"><strong>Note:</strong> As a presentation attribute, <code>letter-spacing</code> can be used as a CSS property. See the {{cssxref("letter-spacing", "CSS letter-spacing")}} property for more information.</p> + +<p>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")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html; hightlight[2,3]"><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></pre> + +<p>{{EmbedLiveSample("topExample", "200", "30")}}</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code>normal</code> | {{cssxref("length")}}</td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>normal</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p>For a description of the values, please refer to the <a href="/en-US/docs/Web/CSS/letter-spacing#Values">CSS <code>letter-spacing</code></a> property.</p> + +<p class="note">As of May 2019, Firefox <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=371787">ignores <code>letter-spacing</code></a> and renders text without.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Text", "#letter-spacing-property", "letter-spacing")}}</td> + <td>{{Spec2("CSS3 Text")}}</td> + <td>SVG 2 just refers to the definition in CSS Text 3.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "text.html#LetterSpacingProperty", "letter-spacing")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.presentation.letter-spacing")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("letter-spacing", "CSS letter-spacing")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/marker-end/index.html b/files/zh-cn/web/svg/attribute/marker-end/index.html new file mode 100644 index 0000000000..348f884d8a --- /dev/null +++ b/files/zh-cn/web/svg/attribute/marker-end/index.html @@ -0,0 +1,103 @@ +--- +title: marker-end +slug: Web/SVG/Attribute/marker-end +translation_of: Web/SVG/Attribute/marker-end +--- +<div>{{SVGRef}}</div> + +<p><strong><code>marker-end</code></strong> 属性将在给定<a href="/en-US/docs/Web/SVG/Element#Shape_elements">形状</a>的最终顶点绘制的箭头或者多边形标记。</p> + +<p>对于除SVG的polyline和path元素之外的所有形状元素，最后的一个顶点与第一个顶点相同。在这种情况下，如果SVG的marker-start属性和 <code>marker-end</code> 的值都不是 <code><span class="prop-value">none</span></code> ，然后再最后一个顶点渲染两个图标。 对于一个 <code><span class="element-name"><path></span></code> 元素， 对于每个封闭的子路径，他的最后一个顶点都与第一个顶点相同。 <code>marker-end</code> 仅在<a href="/en-US/docs/Web/SVG/Attribute/d#Path_commands">路径数据</a>的最终顶点上呈现。</p> + +<p class="note"><strong>Note:</strong> 作为一个图像属性, <code>marker-end</code> 可以用作css属性.</p> + +<p>作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, and {{SVGElement("rect")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css notranslate">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html; hightlight[12] notranslate"><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> +</pre> + +<p>{{EmbedLiveSample("topExample", "200", "200")}}</p> +</div> + +<h2 id="使用说明">使用说明</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code>none</code> | <code><marker-ref></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code>none</code></dt> + <dd>表示将不会在终点绘制任何符号。</dd> + <dt><code><marker-ref></code></dt> + <dd>这个值表示的是对 {{SVGElement("marker")}} 元素的引用, 将在终点绘制该元素.。如果引用无效，将不会绘制任何东西。</dd> +</dl> + +<h2 id="技术指标">技术指标</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#MarkerEndProperty", "marker-end")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#MarkerEndProperty", "marker-end")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.attributes.presentation.marker-end")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGAttr("marker-start")}}</li> + <li>{{SVGAttr("marker-mid")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/marker-start/index.html b/files/zh-cn/web/svg/attribute/marker-start/index.html new file mode 100644 index 0000000000..00ed2c1284 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/marker-start/index.html @@ -0,0 +1,103 @@ +--- +title: marker-start +slug: Web/SVG/Attribute/marker-start +translation_of: Web/SVG/Attribute/marker-start +--- +<div>{{SVGRef}}</div> + +<p><strong><code>marker-start</code></strong> 属性将在给定<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/SVG/Element#Shape_elements">形状</a>的起始顶点绘制的箭头或者多边形标记</p> + +<p>对于除SVG的polyline和path元素之外的所有形状元素，最后的一个顶点与第一个顶点相同。在这种情况下，如果SVG的<code>marker-start</code>属性和 {{SVGAttr("marker-end")}} 的值都不是 <code>none</code> ，然后再最后一个顶点渲染两个图标。 对于一个 <code><path></code> 元素， 对于每个封闭的子路径，他的最后一个顶点都与第一个顶点相同。 <code>marker-end</code> 仅在<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#Path_commands">路径数据</a>的起始顶点上呈现。</p> + +<p class="note"><strong>Note:</strong>作为一个图像属性, <code>marker-start</code> 可以用作css属性.</p> + +<p>作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, 和{{SVGElement("rect")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css notranslate">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html; hightlight[12] notranslate"><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> +</pre> + +<p>{{EmbedLiveSample("topExample", "200", "200")}}</p> +</div> + +<h2 id="使用说明">使用说明</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">值</th> + <td><code>none</code> | <code><marker-ref></code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">可用作与动画</th> + <td>是</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code>none</code></dt> + <dd>表示将不会在起点绘制任何符号。</dd> + <dt><code><marker-ref></code></dt> + <dd>这个值表示的是对 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/SVG/Element/marker" title="marker元素定义了在特定的<path>元素、<line>元素、<polyline>元素或者<polygon>元素上绘制的箭头或者多边标记图形。"><code><marker></code></a> 元素的引用, 将在起点绘制该元素.。如果引用无效，将不会绘制任何东西。</dd> +</dl> + +<h2 id="技术指标">技术指标</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#MarkerStartProperty", "marker-start")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#MarkerStartProperty", "marker-start")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.attributes.presentation.marker-start")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGAttr("marker-end")}}</li> + <li>{{SVGAttr("marker-mid")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/mask/index.html b/files/zh-cn/web/svg/attribute/mask/index.html new file mode 100644 index 0000000000..d357ccf8a8 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/mask/index.html @@ -0,0 +1,59 @@ +--- +title: mask +slug: Web/SVG/Attribute/mask +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/mask +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>mask</code>属性绑定的元素将应用给定的{{ SVGElement("mask") }}元素。</p> + +<p>作为一个外观属性，它可以直接用作CSS样式表内部的属性。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#FuncIRI" title="https://developer.mozilla.org/en/SVG/Content_type#FuncIRI"><FuncIRI></a> | <strong title="this is the default value">none</strong> | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskProperty" title="hhttp://www.w3.org/TR/SVG/masking.html#MaskProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><a href="/en/SVG/Content_type#FuncIRI" title="https://developer.mozilla.org/en/SVG/Content_type#FuncIRI"><funcIRI></a></dt> + <dd>对同一SVG文档片段内部别的图形对象的一个引用 ，这个图形对象将用作遮罩。这个引用的句法与{{ cssxref("uri","CSS URI") }}的句法相同。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>mask</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Container" title="en/SVG/Element#Container">容器元素</a> »</li> + <li><a href="/en/SVG/Element#Graphical" title="en/SVG/Element#Graphical">图形元素</a> »</li> +</ul> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{ SVGElement("mask") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/max/index.html b/files/zh-cn/web/svg/attribute/max/index.html new file mode 100644 index 0000000000..1c21348b7e --- /dev/null +++ b/files/zh-cn/web/svg/attribute/max/index.html @@ -0,0 +1,91 @@ +--- +title: max +slug: Web/SVG/Attribute/max +translation_of: Web/SVG/Attribute/max +--- +<div>{{SVGRef}}</div> + +<p>The <strong><code>max</code></strong> attribute specifies the maximum value of the active animation duration.</p> + +<p>Five elements are using this attribute: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, and {{SVGElement("set")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html; highlight[3,5]"><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></pre> + +<p>{{EmbedLiveSample("topExample", "200", "200")}}</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#Clock-value"><clock-value></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><clock-value></code></dt> + <dd> + <p>Specifies the length of the maximum value of the active duration, measured in local time. The value must be greater than 0.</p> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#MaxAttribute", "max")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#MaxAttribute", "max")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.animate.max")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{SVGAttr("min")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/media/index.html b/files/zh-cn/web/svg/attribute/media/index.html new file mode 100644 index 0000000000..ffc594fdb4 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/media/index.html @@ -0,0 +1,90 @@ +--- +title: media +slug: Web/SVG/Attribute/media +translation_of: Web/SVG/Attribute/media +--- +<div>{{SVGRef}}</div> + +<p><span class="seoSummary"><code><strong>media</strong></code>属性指定只有符合{{Glossary("media query")}}的样式表才会被应用。 </span></p> + +<p>只有一个元素使用这个属性： {{SVGElement("style")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html; highlight[5]"><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></pre> + +<p>{{EmbedLiveSample("topExample", "200", "200")}}</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/CSS/@media#media-query-list"><media-query-list></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>all</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><media-query-list></code></dt> + <dd> + <p>This value holds a media query that needs to match in order for the style sheet to be applied.</p> + + <p>如果没有指定，样式表就会被应用。</p> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "styling.html#StyleElementMediaAttribute", "media")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Changed the value definition from different media types as defined in CSS 2 to <code><a href="/en-US/docs/Web/CSS/@media#media-query-list"><media-query-list></a></code>.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "styling.html#StyleElementMediaAttribute", "media")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.elements.style.media")}}</p> diff --git a/files/zh-cn/web/svg/attribute/opacity/index.html b/files/zh-cn/web/svg/attribute/opacity/index.html new file mode 100644 index 0000000000..1d5940c7d6 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/opacity/index.html @@ -0,0 +1,69 @@ +--- +title: opacity +slug: Web/SVG/Attribute/opacity +tags: + - SVG + - SVG属性 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/opacity +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>opacity属性指定了一个对象或一组对象的透明度，也就是说，元素后面的背景的透过率。</p> + +<p>作为一个外观属性，它可以直接用作CSS样式表内部的属性，请阅读 {{ cssxref("opacity","CSS opacity") }}以了解更多信息。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><opacity-value> | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#OpacityProperty" title="http://www.w3.org/TR/SVG11/masking.html#OpacityProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><opacity-value></dt> + <dd>一致的不透明度设置，作为一个<a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a>被应用到整个对象上。任何超过范围0.0到1.0的值都会被压回这个范围。0.0表示完全透明，1.0表示完全不透明。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>opacity</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">图形元素</a> »</li> + <li>{{ SVGElement("a") }}</li> + <li>{{ SVGElement("defs") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("g") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("missing-glyph") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("switch") }}</li> + <li>{{ SVGElement("symbol") }}</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ cssxref("opacity","CSS opacity") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/order/index.html b/files/zh-cn/web/svg/attribute/order/index.html new file mode 100644 index 0000000000..5f54974826 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/order/index.html @@ -0,0 +1,47 @@ +--- +title: order +slug: Web/SVG/Attribute/order +translation_of: Web/SVG/Attribute/order +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>order 属性确定被用作{{ SVGElement("feConvolveMatrix") }}元素的矩阵的大小.</p> + +<p>提供的值必须是大于0的<a href="/en/SVG/Content_type#Integer" title="/en/SVG/Content_type#Integer"><整数></a>. 第一个值<orderX>,确定矩阵的列数. 第二个值<orderY>确定矩阵的行数.如果<orderY>没有指定，那么它的默认值相当于<orderX>的值.</p> + +<p>一个典型的值是order="3". 建议只使用较小的值(例如3); 大值可能会导致较高的CPU开销而且通常界面上并不能表现出高耗能造成的效果.</p> + +<p>如果未指定该属性，则其效果就如同指定值为3.</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><a href="/en/SVG/Content_type#Number-optional-number" title="en/SVG/Content_type#Color"><number-optional-number></a></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<h2 id="Elements">Elements</h2> + +<p>下列元素可以使用order属性</p> + +<ul> + <li>{{ SVGElement("feConvolveMatrix") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/origin/index.html b/files/zh-cn/web/svg/attribute/origin/index.html new file mode 100644 index 0000000000..a72b0f75c7 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/origin/index.html @@ -0,0 +1,59 @@ +--- +title: origin +slug: Web/SVG/Attribute/origin +translation_of: Web/SVG/Attribute/origin +--- +<div>{{SVGRef}}</div> + +<p>该<code><strong>origin</strong></code>属性指定动画的运动原点。在SVG中无效。</p> + +<p>只有一个元素正在使用此属性：{{SVGElement("animateMotion")}}</p> + +<h2 id="总体注释">总体注释</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">值</th> + <td><code>default</code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>default</code></td> + </tr> + <tr> + <th scope="row">可动画的</th> + <td>没有</td> + </tr> + </tbody> +</table> + +<h2 id="技术指标">技术指标</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#OriginAttribute", "origin")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>没变</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#OriginAttribute", "origin")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初始定义（请<a href="https://www.w3.org/TR/smil-animation/#MotionOriginAttribute">参见SMIL动画规范</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="也可以看看">也可以看看</h2> + +<ul> + <li><a href="https://www.w3.org/TR/smil-animation/#MotionOriginAttribute"><code>origin</code>SMIL动画规范中的定义</a></li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/overflow/index.html b/files/zh-cn/web/svg/attribute/overflow/index.html new file mode 100644 index 0000000000..3353ca8ba6 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/overflow/index.html @@ -0,0 +1,70 @@ +--- +title: overflow +slug: Web/SVG/Attribute/overflow +translation_of: Web/SVG/Attribute/overflow +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>The <code>overflow</code> attribute has the same parameter values as defined for the {{ cssxref("overflow","CSS overflow property") }}. However, the following additional points apply:</p> + +<ul> + <li>The <code>overflow</code> attribute 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.</li> + <li>For those elements to which the <code>overflow</code> attribute can apply, if the <code>overflow</code> attribute has the value <code>hidden</code> or <code>scroll</code>, 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.</li> + <li>If the <code>overflow</code> attribute has a value other than <code>hidden</code> or <code>scroll</code>, the property has no effect.</li> + <li>Within SVG content, the value <code>auto</code> is equivalent to the value <code>visible</code>.</li> + <li>When an outermost svg element is embedded inline within HTML, if the <code>overflow</code> attribute has the value <code>hidden</code> or <code>scroll</code>, 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.</li> + <li>When an outermost svg element is stand-alone, the <code>overflow</code> attribute 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.</li> + <li>The initial value for <code>overflow</code> as defined in CSS is <code>visible</code>, 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 the <code>overflow</code> attribute on elements that establish new viewports, ‘pattern’ elements and ‘marker’ elements to the value <code>hidden</code>.</li> +</ul> + +<p>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.</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td>visible | hidden | scroll | auto | inherit</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#OverflowProperty" title="http://www.w3.org/TR/SVG11/masking.html#OverflowProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>overflow</code> attribute</p> + +<ul> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("marker") }}</li> +</ul> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.presentation.overflow")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ cssxref("overflow","CSS overflow") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/path/index.html b/files/zh-cn/web/svg/attribute/path/index.html new file mode 100644 index 0000000000..dfb04656e3 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/path/index.html @@ -0,0 +1,5 @@ +--- +title: path +slug: Web/SVG/Attribute/path +--- +<p>返回路径信息的数组</p> diff --git a/files/zh-cn/web/svg/attribute/pathlength/index.html b/files/zh-cn/web/svg/attribute/pathlength/index.html new file mode 100644 index 0000000000..0d0ad395a0 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/pathlength/index.html @@ -0,0 +1,219 @@ +--- +title: pathLength +slug: Web/SVG/Attribute/pathLength +translation_of: Web/SVG/Attribute/pathLength +--- +<div> +<p>{{SVGRef}}</p> + +<p>The <strong><code>pathLength</code></strong> 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 <code>pathLength</code>/(<em>computed value of path length</em>).</p> + +<p>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 <code>pathLength</code> attribute.</p> + +<p>Seven elements are using this attribute: {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, and {{SVGElement('rect')}}</p> +</div> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="circle">circle</h2> + +<p>For {{SVGElement('circle')}}, <code>pathLength</code> lets authors specify a total length for the circle, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="ellipse">ellipse</h2> + +<p>For {{SVGElement('ellipse')}}, <code>pathLength</code> lets authors specify a total length for the ellipse, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="line">line</h2> + +<p>For {{SVGElement('line')}}, <code>pathLength</code> lets authors specify a total length for the line, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="path">path</h2> + +<p>For {{SVGElement('path')}}, <code>pathLength</code> lets authors specify a total length for the path, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="polygon">polygon</h2> + +<p>For {{SVGElement('polygon')}}, <code>pathLength</code> lets authors specify a total length for the shape, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="polyline">polyline</h2> + +<p>For {{SVGElement('polyline')}}, <code>pathLength</code> lets authors specify a total length for the shape, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="rect">rect</h2> + +<p>For {{SVGElement('circle')}}, <code>pathLength</code> lets authors specify a total length for the rectangle, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "paths.html#PathLengthAttribute", "pathLength")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "paths.html#PathLengthAttribute", "pathLength")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/patternunits/index.html b/files/zh-cn/web/svg/attribute/patternunits/index.html new file mode 100644 index 0000000000..25bde24a36 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/patternunits/index.html @@ -0,0 +1,92 @@ +--- +title: patternUnits +slug: Web/SVG/Attribute/patternUnits +translation_of: Web/SVG/Attribute/patternUnits +--- +<div>{{SVGRef}}</div> + +<p>The <strong><code>patternUnits</code></strong> attribute indicates which coordinate system to use for the geometry properties of the {{ SVGElement("pattern") }} element.</p> + +<p>Only one element is using this attribute: {{SVGElement('pattern')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="pattern">pattern</h2> + +<p>For {{SVGElement('pattern')}}, <code>patternUnits</code> defines the coordinate system in use for the geometry properties ({{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }}) of the element.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code>userSpaceOnUse</code> | <code>objectBoundingBox</code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>objectBoundingBox</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<dl> + <dt>userSpaceOnUse</dt> + <dd>This value indicates that all coordinates for the geometry preoperties refer to the user coordinate system as defined when the pattern was applied.</dd> + <dt>objectBoundingBox</dt> + <dd>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 "<code>0 0 1 1</code>" {{ SVGAttr("viewbox") }}.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "pservers.html#PatternElementPatternUnitsAttribute", "patternUnits")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#PatternElementPatternUnitsAttribute", "patternUnits")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/pointer-events/index.html b/files/zh-cn/web/svg/attribute/pointer-events/index.html new file mode 100644 index 0000000000..5a490a1b6d --- /dev/null +++ b/files/zh-cn/web/svg/attribute/pointer-events/index.html @@ -0,0 +1,102 @@ +--- +title: pointer-events +slug: Web/SVG/Attribute/pointer-events +translation_of: Web/SVG/Attribute/pointer-events +--- +<div>{{SVGRef}}</div> + +<p>pointer-events属性是一个展示属性，用于定义元素是否或何时可能是鼠标事件的目标元素。</p> + +<p class="note"><strong>Note:</strong> 作为一个展示属性， {{cssxref('pointer-events')}} 可以被当做CSS属性使用.</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> + <!-- + Circle元素将始终拦截鼠标事件。 + 为了改变较底部的的rect元素的颜色， + 你需要点击rect元素在圆外的部分 + --> + <rect x="0" y="0" height="10" width="10" fill="black" /> + <circle cx="5" cy="5" r="4" fill="white" + pointer-events="visiblePoint" /> + + <!-- + 下面的circle元素将永远不会获取到鼠标事件， + 当你点击circle元素或者点击rect元素时， + rect元素都会改变颜色 + --> + <rect x="10" y="0" height="10" width="10" fill="black" /> + <circle cx="15" cy="5" r="4" fill="white" + pointer-events="none" /> +</svg></pre> + +<pre class="brush: 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 +})</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p> +</div> + +<p>作为一个展示属性，他可以被很多元素使用，但和它紧密相关的只有下面的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')}}</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><code>bounding-box</code> | <code>visiblePainted</code> | <code>visibleFill</code> | <code>visibleStroke</code> | <code>visible</code> | <code>painted</code> | <code>fill</code> | <code>stroke</code> | <code>all</code> | <code>none</code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>visiblePainted</code></td> + </tr> + <tr> + <th scope="row">是否可动画</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p><em>为了详细了解每个可能的值，请参考CSS文档 {{cssxref('pointer-events')}}.</em></p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容</h2> + +<div class="hidden">此页浏览器兼容的表格是根据结构化的数据生成的.如果你想要的为这份数据做贡献，请检出以下链接的内容 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并发送拉取请求</div> + +<p>{{Compat("svg.attributes.presentation.pointer-events")}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "interact.html#PointerEventsProperty", "pointer-events")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "interact.html#PointerEventsProperty", "pointer-events")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/points/index.html b/files/zh-cn/web/svg/attribute/points/index.html new file mode 100644 index 0000000000..bf3a2b6579 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/points/index.html @@ -0,0 +1,56 @@ +--- +title: points +slug: Web/SVG/Attribute/points +tags: + - SVG + - SVG属性 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/points +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>points</code>属性定义了用来画一个{{ SVGElement("polyline") }}元素或画一个SVGElement("polygon") }}元素的点的数列。</p> + +<p>每个点用用户坐标系统中的一个X坐标和Y坐标定义。用逗号分开每个点的X和Y坐标标记是一个常用实践（但是并非必要），使用空间标注每个点。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><list-of-points></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#PolylineElementPointsAttribute" title="http://www.w3.org/TR/SVG/shapes.html#PolylineElementPointsAttribute">SVG 1.1 (2nd Edition): The polyline element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#PolygonElementPointsAttribute" title="http://www.w3.org/TR/SVG/shapes.html#PolygonElementPointsAttribute">SVG 1.1 (2nd Edition): The polygon element</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <polygon points="100,10 250,150 200,110" + style="fill:lime;stroke:purple;stroke-width:1" /> +</svg> +</pre> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>points</code>属性：</p> + +<ul> + <li>{{ SVGElement("polyline") }}</li> + <li>{{ SVGElement("polygon") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/presentation/index.html b/files/zh-cn/web/svg/attribute/presentation/index.html new file mode 100644 index 0000000000..fd9ebaa059 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/presentation/index.html @@ -0,0 +1,276 @@ +--- +title: SVG Presentation Attributes +slug: Web/SVG/Attribute/Presentation +translation_of: Web/SVG/Attribute/Presentation +--- +<p>{{draft}}</p> + +<p>SVG表现属性是能够被用在SVG元素属性上的CSS属性。</p> + +<div class="index"> +<ul> + <li><a href="#attr-alignment-baseline">alignment-baseline</a></li> + <li><a href="#attr-baseline-shift">baseline-shift</a></li> + <li><a href="#attr-clip">clip</a></li> + <li><a href="#attr-clip-path">clip-path</a></li> + <li><a href="#attr-clip-rule">clip-rule</a></li> + <li><a href="#attr-color">color</a></li> + <li><a href="#attr-color-interpolation">color-interpolation</a></li> + <li><a href="#attr-color-interpolation-filters">color-interpolation-filters</a></li> + <li><a href="#attr-color-profile">color-profile</a></li> + <li><a href="#attr-color-rendering">color-rendering</a></li> + <li><a href="#attr-cursor">cursor</a></li> + <li><a href="#attr-direction">direction</a></li> + <li><a href="#attr-display">display</a></li> + <li><a href="#attr-dominant-baseline">dominant-baseline</a></li> + <li><a href="#attr-enable-background">enable-background</a></li> + <li><a href="#attr-fill">fill</a></li> + <li><a href="#attr-fill-opacity">fill-opacity</a></li> + <li><a href="#attr-fill-rule">fill-rule</a></li> + <li><a href="#attr-filter">filter</a></li> + <li><a href="#attr-flood-color">flood-color</a></li> + <li><a href="#attr-flood-opacity">flood-opacity</a></li> + <li><a href="#attr-font-family">font-family</a></li> + <li><a href="#attr-font-size">font-size</a></li> + <li><a href="#attr-font-size-adjust">font-size-adjust</a></li> + <li><a href="#attr-font-stretch">font-stretch</a></li> + <li><a href="#attr-font-style">font-style</a></li> + <li><a href="#attr-font-variant">font-variant</a></li> + <li><a href="#attr-font-weight">font-weight</a></li> + <li><a href="#attr-glyph-orientation-horizontal">glyph-orientation-horizontal</a></li> + <li><a href="#attr-glyph-orientation-vertical">glyph-orientation-vertical</a></li> + <li><a href="#attr-image-rendering">image-rendering</a></li> + <li><a href="#attr-kerning">kerning</a></li> + <li><a href="#attr-letter-spacing">letter-spacing</a></li> + <li><a href="#attr-lighting-color">lighting-color</a></li> + <li><a href="#attr-marker-end">marker-end</a></li> + <li><a href="#attr-marker-mid">marker-mid</a></li> + <li><a href="#attr-marker-start">marker-start</a></li> + <li><a href="#attr-mask">mask</a></li> + <li><a href="#attr-opacity">opacity</a></li> + <li><a href="#attr-overflow">overflow</a></li> + <li><a href="#attr-pointer-events">pointer-events</a></li> + <li><a href="#attr-shape-rendering">shape-rendering</a></li> + <li><a href="#attr-solid-color">solid-color</a></li> + <li><a href="#attr-solid-opacity">solid-opacity</a></li> + <li><a href="#attr-stop-color">stop-color</a></li> + <li><a href="#attr-stop-opacity">stop-opacity</a></li> + <li><a href="#attr-stroke">stroke</a></li> + <li><a href="#attr-stroke-dasharray">stroke-dasharray</a></li> + <li><a href="#attr-stroke-dashoffset">stroke-dashoffset</a></li> + <li><a href="#attr-stroke-linecap">stroke-linecap</a></li> + <li><a href="#attr-stroke-linejoin">stroke-linejoin</a></li> + <li><a href="#attr-stroke-miterlimit">stroke-miterlimit</a></li> + <li><a href="#attr-stroke-opacity">stroke-opacity</a></li> + <li><a href="#attr-stroke-width">stroke-width</a></li> + <li><a href="#attr-text-anchor">text-anchor</a></li> + <li><a href="#attr-text-decoration">text-decoration</a></li> + <li><a href="#attr-text-rendering">text-rendering</a></li> + <li><a href="#attr-transform">transform</a></li> + <li><a href="#attr-unicode-bidi">unicode-bidi</a></li> + <li><a href="#attr-vector-effect">vector-effect</a></li> + <li><a href="#attr-visibility">visibility</a></li> + <li><a href="#attr-word-spacing">word-spacing</a></li> + <li><a href="#attr-writing-mode">writing-mode</a></li> +</ul> +</div> + +<h2 id="Attributes">Attributes</h2> + +<dl> + <dt id="attr-alignment-baseline">{{SVGAttr('alignment-baseline')}}</dt> + <dd>It specifies how an object is aligned along the font baseline with respect to its parent.<br> + <small><em>Value</em>: <strong><code>auto</code></strong>|<code>baseline</code>|<code>before-edge</code>|<code>text-before-edge</code>|<code>middle</code>|<code>central</code>|<code>after-edge</code>|<code>text-after-edge</code>|<code>ideographic</code>|<code>alphabetic</code>|<code>hanging</code>|<code>mathematical</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-baseline-shift">{{SVGAttr('baseline-shift')}}</dt> + <dd>It allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element.<br> + <small><em>Value</em>: <strong><code>auto</code></strong>|<code>baseline</code>|<code>super</code>|<code>sub</code>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>|<a href="/docs/Web/SVG/Content_type#Length"><length></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-clip">{{SVGAttr('clip')}} {{deprecated_inline('css')}}</dt> + <dd>It defines what portion of an element is visible.<br> + <small><em>Value</em>: <strong><code>auto</code></strong>|{{cssxref("shape")}}|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-clip-path">{{SVGAttr('clip-path')}}</dt> + <dd>It binds the element it is applied to with a given {{SVGElement('clipPath')}} element.<br> + <small><em>Value</em>: <strong><code>none</code></strong>|<a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-clip-rule">{{SVGAttr('clip-rule')}}</dt> + <dd>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.<br> + <small><em>Value</em>: <strong><code>nonezero</code></strong>|<code>evenodd</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-color">{{SVGAttr('color')}}</dt> + <dd>It provides a potential indirect value (<code>currentColor</code>) for the <code>fill</code>, <code>stroke</code>, <code>stop-color</code>, <code>flood-color</code> and <code>lighting-color</code> presentation attributes.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Color"><color></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-color-interpolation">{{SVGAttr('color-interpolation')}}</dt> + <dd>It specifies the color space for gradient interpolations, color animations, and alpha compositing.<br> + <small><em>Value</em>: <code>auto</code>|<strong><code>sRGB</code></strong>|<code>linearRGB</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-color-interpolation-filters">{{SVGAttr('color-interpolation-filters')}}</dt> + <dd>It specifies the color space for imaging operations performed via filter effects.<br> + <small><em>Value</em>: <code>auto</code>|<code>sRGB</code>|<strong><code>linearRGB</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-color-profile">{{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}}</dt> + <dd>It defines which color profile a raster image included through the {{SVGElement('image')}} element should use.<br> + <small><em>Value</em>: <code>auto</code>|<code>sRGB</code>|<code>linearRGB</code>|<a href="/docs/Web/SVG/Content_type#Name"><name></a>|<a href="/docs/Web/SVG/Content_type#IRI"><IRI></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-color-rendering">{{SVGAttr('color-rendering')}}</dt> + <dd>It provides a hint to the browser about how to optimize its color interpolation and compositing operations.<br> + <small><em>Value</em>: <strong><code>auto</code></strong>|<code>optimizeSpeed</code>|<code>optimizeQuality</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-cursor">{{SVGAttr('cursor')}}</dt> + <dd>It specifies the mouse cursor displayed when the mouse pointer is over an element.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<a href="/docs/Web/CSS/cursor#Values"><keywords></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-direction">{{SVGAttr('direction')}}</dt> + <dd>It specifies the base writing direction of text.<br> + <small><em>Value</em>: <strong><code>ltr</code></strong>|<code>rtl</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-display">{{SVGAttr('display')}}</dt> + <dd>It allows to control the rendering of graphical or container elements.<br> + <small><em>Value</em>: see css {{cssxref('display')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-dominant-baseline">{{SVGAttr('dominant-baseline')}}</dt> + <dd>It defines the baseline used to align the box’s text and inline-level contents.<br> + <small><em>Value</em>: <code>auto</code>|<code>text-bottom</code>|<code>alphabetic</code>|<code>ideographic</code>|<code>middle</code>|<code>central</code>| <code>mathematical</code>|<code>hanging</code>|<code>text-top</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-enable-background">{{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}}</dt> + <dd>It tells the browser how to manage the accumulation of the background image.<br> + <small><em>Value</em>: <strong><code>accumulate</code></strong>|<code>new</code>|<code>inherit</code>; <em>Animatable</em>: <strong>No</strong></small></dd> + <dt id="attr-fill">{{SVGAttr('fill')}}</dt> + <dd>It defines the color of the inside of the graphical element it applies to.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Paint"><paint></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-fill-opacity">{{SVGAttr('fill-opacity')}}</dt> + <dd>It specifies the opacity of the color or the content the current object is filled with.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Number"><number></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-fill-rule">{{SVGAttr('fill-rule')}}</dt> + <dd>It indicates how to determine what side of a path is inside a shape.<br> + <small><em>Value</em>: <strong><code>nonzero</code></strong>|<code>evenodd</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-filter">{{SVGAttr('filter')}}</dt> + <dd>It defines the filter effects defined by the {{SVGElement('filter')}} element that shall be applied to its element.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-flood-color">{{SVGAttr('flood-color')}}</dt> + <dd>It indicates what color to use to flood the current filter primitive subregion defined through the {{SVGElement('feFlood')}} or {{SVGElement('feDropShadow')}} element.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Color"><color></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-flood-opacity">{{SVGAttr('flood-opacity')}}</dt> + <dd>It indicates the opacity value to use across the current filter primitive subregion defined through the {{SVGElement('feFlood')}} or {{SVGElement('feDropShadow')}} element.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Number"><number></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-font-family">{{SVGAttr('font-family')}}</dt> + <dd>It indicates which font family will be used to render the text of the element.<br> + <small><em>Value</em>: see css {{cssxref('font-family')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-font-size">{{SVGAttr('font-size')}}</dt> + <dd>It specifies the size of the font.<br> + <small><em>Value</em>: see css {{cssxref('font-size')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-font-size-adjust">{{SVGAttr('font-size-adjust')}}</dt> + <dd>It specifies that the font size should be chosen based on the height of lowercase letters rather than the height of capital letters.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Number"><number></a>|<code><strong>none</strong></code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-font-stretch">{{SVGAttr('font-stretch')}}</dt> + <dd>It selects a normal, condensed, or expanded face from a font.<br> + <small><em>Value</em>: see css {{cssxref('font-stretch')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-font-style">{{SVGAttr('font-style')}}</dt> + <dd>It specifies whether a font should be styled with a normal, italic, or oblique face from its {{SVGAttr('font-family')}}.<br> + <small><em>Value</em>: <strong><code>normal</code></strong>|<code>italic</code>|<code>oblique</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-font-variant">{{SVGAttr('font-variant')}}</dt> + <dd>It specifies whether a font should be used with some of their variation such as small caps or ligatures.<br> + <small><em>Value</em>: see css {{cssxref('font-variant')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-font-weight">{{SVGAttr('font-weight')}}</dt> + <dd>It specifies the weight (or boldness) of the font.<br> + <small><em>Value</em>: <strong><code>normal</code></strong>|<code>bold</code>|<code>lighter</code>|<code>bolder</code>|<code>100</code>|<code>200</code>|<code>300</code>|<code>400</code>|<code>500</code>|<code>600</code>|<code>700</code>|<code>800</code>|<code>900</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-glyph-orientation-horizontal">{{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}}</dt> + <dd>It controls glyph orientation when the inline-progression-direction is horizontal.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Angle"><angle></a>|<code>inherit</code>; <em>Animatable</em>: <strong>No</strong></small></dd> + <dt id="attr-glyph-orientation-vertical">{{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}}</dt> + <dd>It controls glyph orientation when the inline-progression-direction is vertical.<br> + <small><em>Value</em>: <strong><code>auto</code></strong>|<a href="/docs/Web/SVG/Content_type#Angle"><angle></a>|<code>inherit</code>; <em>Animatable</em>: <strong>No</strong></small></dd> + <dt id="attr-image-rendering">{{SVGAttr('image-rendering')}}</dt> + <dd>It provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.<br> + <small><em>Value</em>: <strong><code>auto</code></strong>|<code>optimizeQuality</code>|<code>optimizeSpeed</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-kerning">{{SVGAttr('kerning')}} {{deprecated_inline('svg2')}}</dt> + <dd>It indicates whether the browser should adjust inter-glyph spacing.<br> + <small><em>Value</em>: <strong><code>auto</code></strong>|<a href="/docs/Web/SVG/Content_type#Length"><length></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-letter-spacing">{{SVGAttr('letter-spacing')}}</dt> + <dd>It controls spacing between text characters.<br> + <small><em>Value</em>: <strong><code>normal</code></strong>|<a href="/docs/Web/SVG/Content_type#Length"><length></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-lighting-color">{{SVGAttr('lighting-color')}}</dt> + <dd>It defines the color of the light source for filter primitives elements {{SVGElement('feDiffuseLighting')}} and {{SVGElement('feSpecularLighting')}}.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Color"><color></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-marker-end">{{SVGAttr('marker-end')}}</dt> + <dd>It defines the arrowhead or polymarker that will be drawn at the final vertex of the given {{SVGElement('path')}} element or basic shape.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-marker-mid">{{SVGAttr('marker-mid')}}</dt> + <dd>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.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-marker-start">{{SVGAttr('marker-start')}}</dt> + <dd>It defines the arrowhead or polymarker that will be drawn at the first vertex of the given {{SVGElement('path')}} element or basic shape.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-mask">{{SVGAttr('mask')}}</dt> + <dd>It alters the visibility of an element by either masking or clipping the image at specific points.<br> + <small><em>Value</em>: see css {{cssxref('mask')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-opacity">{{SVGAttr('opacity')}}</dt> + <dd>It specifies the transparency of an object or a group of objects.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Opacity_value"><opacity-value></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-overflow">{{SVGAttr('overflow')}}</dt> + <dd>Specifies whether the content of a block-level element is clipped when it overflows the element's box.<br> + <small><em>Value</em>: <code><strong>visible</strong></code>|<code>hidden|scroll</code>|<code>auto</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-pointer-events">{{SVGAttr('pointer-events')}}</dt> + <dd>Defines whether or when an element may be the target of a mouse event.<br> + <small><em>Value</em>: <code>bounding-box</code>|<code><strong>visiblePainted</strong></code>|<code>visibleFil</code>|<code>visibleStroke</code>|<code>visible</code> |<code>painted</code>|<code>fill</code>|<code>stroke</code>|<code>all</code>|<code>none</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-shape-rendering">{{SVGAttr('shape-rendering')}}</dt> + <dd>Hints about what tradeoffs to make as the browser renders {{SVGElement('path')}} element or basic shapes.<br> + <small><em>Value</em>: <code><strong>auto</strong></code>|<code>optimizeSpeed</code>|<code>crispEdges</code>|<code>geometricPrecision</code> |<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-solid-color">{{SVGAttr('solid-color')}}</dt> + <dd>-<br> + <small><em>Value</em>:; <em>Animatable</em>: <strong>-</strong></small></dd> + <dt id="attr-solid-opacity">{{SVGAttr('solid-opacity')}}</dt> + <dd>-<br> + <small><em>Value</em>:; <em>Animatable</em>: <strong>-</strong></small></dd> + <dt id="attr-stop-color">{{SVGAttr('stop-color')}}</dt> + <dd>Indicates what color to use at that gradient stop.<br> + <small><em>Value</em>: <code>currentColor</code>|<a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a>|<a href="/en/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor"><icccolor></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stop-opacity">{{SVGAttr('stop-opacity')}}</dt> + <dd>Defines the opacity of a given gradient stop.<br> + <small><em>Value</em>: <a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value"><opacity-value></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke">{{SVGAttr('stroke')}}</dt> + <dd>Defines the color used to paint the outline of the shape.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Paint"><paint></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke-dasharray">{{SVGAttr('stroke-dasharray')}}</dt> + <dd>Defines the pattern of dashes and gaps used to paint the outline of the shape.<br> + <small><em>Value</em>: <code>none</code>|<code><dasharray></code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke-dashoffset">{{SVGAttr('stroke-dashoffset')}}</dt> + <dd>Defines an offset on the rendering of the associated dash array.<br> + <small><em>Value</em>: <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a>|<a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke-linecap"><strong>{{SVGAttr('stroke-linecap')}}</strong></dt> + <dd>Defines the shape to be used at the end of open subpaths when they are stroked.<br> + <small><em>Value</em>: <code><strong>butt</strong></code>|<code>round</code>|<code>square</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke-linejoin"><strong>{{SVGAttr('stroke-linejoin')}}</strong></dt> + <dd>Defines the shape to be used at the corners of paths when they are stroked.<br> + <small><em>Value</em>: <code>arcs</code>|<code>bevel</code>|<code><strong>miter</strong></code>|<code>miter-clip</code>|<code>round</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke-miterlimit"><strong>{{SVGAttr('stroke-miterlimit')}}</strong></dt> + <dd>Defines a limit on the ratio of the miter length to the {{ SVGAttr("stroke-width") }} used to draw a miter join.<br> + <small><em>Value</em>: <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke-opacity"><strong>{{SVGAttr('stroke-opacity')}}</strong></dt> + <dd>Defines the opacity of the stroke of a shape.<br> + <small><em>Value</em>: <a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value"><opacity-value></a>|<a href="/docs/Web/SVG/Content_type#Paint"><percentage></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke-width"><strong>{{SVGAttr('stroke-width')}}</strong></dt> + <dd>Defines the width of the stroke to be applied to the shape.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Length"><length></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-text-anchor"><strong>{{SVGAttr('text-anchor')}}</strong></dt> + <dd>Defines the vertical alignment a string of text.<br> + <small><em>Value</em>: <code>start</code>|<code>middle</code>|<code>end</code>|<code><strong>inherit</strong></code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-text-decoration"><strong>{{SVGAttr('text-decoration')}}</strong></dt> + <dd>Sets the appearance of decorative lines on text.<br> + <small><em>Value</em>: <code>none</code>|<code>underline</code>|<code>overline</code>|<code>line-through</code>|<code>blink</code>|<code><strong>inherit</strong></code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-text-rendering"><strong>{{SVGAttr('text-rendering')}}</strong></dt> + <dd>Hints about what tradeoffs to make as the browser renders text.<br> + <small><em>Value</em>: <code><strong>auto</strong></code>|<code>optimizeSpeed</code>|<code>optimizeLegibility</code>|<code>geometricPrecision</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-transform"><strong>{{SVGAttr('transform')}}</strong></dt> + <dd>Defines a list of transform definitions that are applied to an element and the element's children.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Transform-list"><transform-list></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-unicode-bidi"><strong>{{SVGAttr('unicode-bidi')}}</strong></dt> + <dd>-<br> + <small><em>Value</em>:; <em>Animatable</em>: <strong>-</strong></small></dd> + <dt id="attr-vector-effect"><strong>{{SVGAttr('vector-effect')}}</strong></dt> + <dd>Specifies the vector effect to use when drawing an object.<br> + <small><em>Value</em>: <code>default</code>|<code>non-scaling-stroke</code>|<code>inherit</code>|<code><uri></code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-visibility"><strong>{{SVGAttr('visibility')}}</strong></dt> + <dd>Lets you control the visibility of graphical elements.<br> + <small><em>Value</em>: <strong><code>visible</code></strong>|<code>hidden</code>|<code>collapse</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-word-spacing"><strong>{{SVGAttr('word-spacing')}}</strong></dt> + <dd>Specifies spacing behavior between words.<br> + <small><em>Value</em>: <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>|<code><strong title="this is the default value">inherit</strong></code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-writing-mode"><strong>{{SVGAttr('writing-mode')}}</strong></dt> + <dd>Specifies whether the initial inline-progression-direction for a {{SVGElement('text')}} element shall be left-to-right, right-to-left, or top-to-bottom.<br> + <small><em>Value</em>: <strong><code>lr-tb</code></strong>|<code>rl-tb</code>|<code>tb-rl</code>|<code>lr</code>|<code>rl</code>|<code>tb</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.presentation")}}</p> diff --git a/files/zh-cn/web/svg/attribute/preservealpha/index.html b/files/zh-cn/web/svg/attribute/preservealpha/index.html new file mode 100644 index 0000000000..4502b99bbf --- /dev/null +++ b/files/zh-cn/web/svg/attribute/preservealpha/index.html @@ -0,0 +1,45 @@ +--- +title: preserveAlpha +slug: Web/SVG/Attribute/preserveAlpha +translation_of: Web/SVG/Attribute/preserveAlpha +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考</a></p> + +<p><code>preserveAlpha</code> 属性表示{{ SVGElement("feConvolveMatrix") }} 元素怎样处透明度。</p> + +<p>取值为 <code><span class="attr-value">false</span></code> 表示 feConvolveMatrix 元素将应用在包括透明度通道的所有的通道。这是默认的选项。</p> + +<p>取值为 <code><span class="attr-value">true</span></code> 表示 feConvolveMatrix 仅应用在颜色通道。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>None</td> + </tr> + <tr> + <th scope="row">值</th> + <td><code>true</code> | <code>false</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementPreserveAlphaAttribute" rel="external">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用 <code>preserveAlpha</code> 属性</p> + +<ul> + <li>{{ SVGElement("feConvolveMatrix") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/preserveaspectratio/index.html b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.html new file mode 100644 index 0000000000..545445a5dd --- /dev/null +++ b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.html @@ -0,0 +1,114 @@ +--- +title: preserveAspectRatio +slug: Web/SVG/Attribute/preserveAspectRatio +tags: + - SVG + - SVG属性 + - 需要实例 +translation_of: Web/SVG/Attribute/preserveAspectRatio +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>有时候, 通常我们使用 {{ SVGAttr("viewBox") }} 属性时, 希望图形拉伸占据整个视口。 在其他情况下，为了保持图形的长宽比，必须使用统一的缩放比例.<br> + <br> + <code>preserveAspectRatio</code>属性表示是否强制进行统一缩放.<br> + <br> + 对于支持该属性的所有元素(如上所示)，除了 {{ SVGElement("image") }} 元素之外，preserveAspectRatio只适用于在同一元素上为 {{ SVGAttr("viewBox") }} 提供的值。对于这些元素，如果没有提供属性 {{ SVGAttr("viewBox") }} ，则忽略了preserveAspectRatio。<br> + <br> + 对于 {{ SVGElement("image") }} 元素, preserveAspectRatio 指示引用的图像应该如何与参考矩形进行匹配，以及是否应该相对于当前用户坐标系保留参考图像的长宽比</p> + +<h2 id="上下文用法">上下文用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><align> [<meetOrSlice>]</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute" title="http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><align></dt> + <dd><code><align></code> 属性值表示是否强制统一缩放，当SVG的viewbox属性与视图属性宽高比不一致时使用. <code><align></code> 属性的值一定是下列的值之一: + <ul> + <li><strong>none</strong><br> + 不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。<br> + (注意：如果 <code><align></code> 的值是 <code>none</code> ，则 <code><meetOrSlice></code> 属性的值将会被忽略。)</li> + <li><strong>xMinYMin</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。<br> + 将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。</li> + <li><strong>xMidYMin</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。<br> + 将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。</li> + <li><strong>xMaxYMin</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。<br> + 将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。</li> + <li><strong>xMinYMid</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。<br> + 将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。</li> + <li><strong>xMidYMid</strong> (默认值) - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。<br> + 将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。</li> + <li><strong>xMaxYMid</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。<br> + 将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。</li> + <li><strong>xMinYMax</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。<br> + 将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。</li> + <li><strong>xMidYMax</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。<br> + 将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。</li> + <li><strong>xMaxYMax</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。<br> + 将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。</li> + </ul> + </dd> + <dt><meetOrSlice></dt> + <dd><code><meetOrSlice></code> 是可选的，如果提供的话， 与 <code><align></code> 间隔一个或多个的空格 ，参数所选值必须是以下值之一: + <ul> + <li><strong>meet</strong> (默认值) - 图形将缩放到: + <ul> + <li>宽高比将会被保留</li> + <li>整个SVG的viewbox在视图范围内是可见的</li> + <li>尽可能的放大SVG的viewbox，同时仍然满足其他的条件。</li> + </ul> + 在这种情况下，如果图形的宽高比和视图窗口不匹配，则某些视图将会超出viewbox范围（即SVG的viewbox视图将会比可视窗口小）。</li> + <li><strong>slice</strong> - 图形将缩放到: + <ul> + <li>宽高比将会被保留</li> + <li>整个视图窗口将覆盖viewbox</li> + <li>SVG的viewbox属性将会被尽可能的缩小，但是仍然符合其他标准。</li> + </ul> + 在这种情况下，如果SVG的viewbox宽高比与可视区域不匹配，则viewbox的某些区域将会延伸到视图窗口外部（即SVG的viewbox将会比可视窗口大）。</li> + </ul> + </dd> +</dl> + +<h2 id="实例">实例</h2> + +<h2 id="元素">元素</h2> + +<p>以下元素可使用 <code>preserveAspectRatio</code> 属性</p> + +<ul> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("view") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/primitiveunits/index.html b/files/zh-cn/web/svg/attribute/primitiveunits/index.html new file mode 100644 index 0000000000..ccdaf4605b --- /dev/null +++ b/files/zh-cn/web/svg/attribute/primitiveunits/index.html @@ -0,0 +1,50 @@ +--- +title: primitiveUnits +slug: Web/SVG/Attribute/primitiveUnits +translation_of: Web/SVG/Attribute/primitiveUnits +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><code>primitiveUnits属性为过滤器原语和定义过滤器原语子域中的各种各样的长度单位指定坐标系统</code>.</p> + +<p>如果primitiveUnits属性未指定,那么效果就如同指定值为userSpaceOnUse的效果是一样的.</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><strong><code>userSpaceOnUse</code></strong> | <code>objectBoundingBox</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElementPrimitiveUnitsAttribute" title="http://www.w3.org/TR/SVG11/filters.html#FilterElementPrimitiveUnitsAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>userSpaceOnUse</dt> + <dd>当{{ SVGElement("filter") }}元素使用该值的时候,过滤器中定义的任意长度的值都基于当前用户坐标系统(例如通过{{ SVGAttr("filter") }}属性引用该{{ SVGElement("filter") }}元素的元素所在的用户坐标系统).</dd> + <dt>objectBoundingBox</dt> + <dd>在filter中定义的任意长度值表示引用该filter的元素的包围盒的分数或百分比.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h2 id="Elements">Elements</h2> + +<p>下列元素可以使用primitiveUnits属性:</p> + +<ul> + <li>{{ SVGElement("filter") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/r/index.html b/files/zh-cn/web/svg/attribute/r/index.html new file mode 100644 index 0000000000..3572ba0a07 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/r/index.html @@ -0,0 +1,124 @@ +--- +title: r +slug: Web/SVG/Attribute/r +tags: + - SVG + - SVG属性 +translation_of: Web/SVG/Attribute/r +--- +<div>{{SVGRef}}</div> + +<p><strong><code>r</code></strong> 属性用来定义圆的半径。</p> + +<p>有两个元素在使用该属性：{{SVGElement("circle")}} 和 {{SVGElement("radialGradient")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> + <radialGradient r="0" id="myGradient000"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + <radialGradient r="50%" id="myGradient050"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + <radialGradient r="100%" id="myGradient100"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + + <circle cx="50" cy="50" r="0"/> + <circle cx="150" cy="50" r="25"/> + <circle cx="250" cy="50" r="50"/> + + <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" /> + <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" /> + <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" /> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="圆">圆</h2> + +<p>对于 {{SVGElement('circle')}}，<code>r</code> 用来定义圆的半径以及它的大小。取值小于或等于零，圆将不会被绘制出来。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注：</strong>起始于 SVG2，<code>r</code> 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。</p> + +<h2 id="径向渐变">径向渐变</h2> + +<p>对于 {{ SVGElement("radialGradient") }}，<code>r</code> 用来定义径向渐变终止圆的半径。</p> + +<p>渐变将以此绘制出来：<strong>100%</strong> 渐变停止点会被映射到终止圆的一周上。取值小于或等于零，将会使用最后一个渐变 {{ SVGElement("stop") }} 的颜色和不透明度，导致该区域被绘制为单色。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>50%</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="技术规范">技术规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">技术规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#R", "r")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition as a geometry property</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for SVG2 paint servers <code><radialGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><radialGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#CircleElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><circle></code></td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/radius/index.html b/files/zh-cn/web/svg/attribute/radius/index.html new file mode 100644 index 0000000000..59f6dcfc07 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/radius/index.html @@ -0,0 +1,49 @@ +--- +title: radius +slug: Web/SVG/Attribute/radius +tags: + - SVG + - SVG属性 + - 滤镜 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/radius +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>radius</code>属性代表了一个给定{{SVGElement("feMorphology")}}滤镜上的操作。如果提供了两个<a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Paint"><number></a>，则第一个数代表了x-radius，第二个数代表了y-radius。如果只提供了一个数字，则值同时用于x和y。值是在{{SVGElement("filter")}} 元素的属性{{SVGAttr("primitiveUnits")}} 确定的坐标系统内。</p> + +<p>如果没有指定该属性值，效果等同于指定了一个<strong>0</strong>值。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td><em>无</em></td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Number-optional-number" title="en/SVG/Content_type#Paint"><number-optional-number></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyRadiusAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feMorphologyRadiusAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>radius</code>属性：</p> + +<ul> + <li>{{ SVGElement("feMorphology") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/repeatcount/index.html b/files/zh-cn/web/svg/attribute/repeatcount/index.html new file mode 100644 index 0000000000..ac96b610cc --- /dev/null +++ b/files/zh-cn/web/svg/attribute/repeatcount/index.html @@ -0,0 +1,45 @@ +--- +title: repeatCount +slug: Web/SVG/Attribute/repeatCount +translation_of: Web/SVG/Attribute/repeatCount +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考</a></p> + +<p>这个属性表示动画将发生的次数。</p> + +<p>这个属性的值指定了重复的次数。它也可以包括用分数值表示。它的值必须大于0。</p> + +<h2 id="用法解释">用法解释</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画时间属性</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a> | "indefinite"</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#RepeatCountAttribute" title="http://www.w3.org/TR/SVG/animate.html#RepeatCountAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","Number") }}</p> + +<h2 id="Example">Example</h2> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>repeatCount</code> attribute</p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/result/index.html b/files/zh-cn/web/svg/attribute/result/index.html new file mode 100644 index 0000000000..1de841a80a --- /dev/null +++ b/files/zh-cn/web/svg/attribute/result/index.html @@ -0,0 +1,45 @@ +--- +title: result +slug: Web/SVG/Attribute/result +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/result +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>属性<code>result</code>定义了滤镜的分配名。如果提供了它，则经过滤镜处理的结果即图形可以再次滤镜处理，在后继滤镜（即另一个{{ SVGElement("filter") }}元素）上通过一个{{ SVGAttr("in") }}属性引用之前的结果。如果没有提供<code>result</code>值，而且如果下一个滤镜也没有提供{{ SVGAttr("in") }}属性值，则输出只可作为下一个滤镜的隐式输入。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><filter-primitive-reference></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveResultAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveResultAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>注意<code><filter-primitive-reference></code>不是一个XML ID，换句话说，<code><filter-primitive-reference></code>只在给定的{{ SVGElement("filter") }}元素内部有意义，因此只有局部范围。在同一个{{ SVGElement("filter") }}元素内部，同一个<code><filter-primitive-reference></code>出现多次也是合法的。如果引用了，<code><filter-primitive-reference></code>将使用在给定结果前面、离给定结果最近的滤镜。</p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>result</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">滤镜元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/rx/index.html b/files/zh-cn/web/svg/attribute/rx/index.html new file mode 100644 index 0000000000..4ae7b0203a --- /dev/null +++ b/files/zh-cn/web/svg/attribute/rx/index.html @@ -0,0 +1,118 @@ +--- +title: rx +slug: Web/SVG/Attribute/rx +tags: + - SVG + - SVG属性 +translation_of: Web/SVG/Attribute/rx +--- +<div>{{SVGRef}}</div> + +<p><strong><code>rx</code></strong> 属性用于定义水平轴向的圆角半径尺寸。</p> + +<p>{{SVGElement("ellipse")}} 和 {{SVGElement("rect")}} 两个基本图形使用了这个属性。</p> + +<div id="topExample"> +<div class="hidden"> </div> +</div> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> + <ellipse cx="50" cy="50" rx="0" ry="25" /> + <ellipse cx="150" cy="50" rx="25" ry="25" /> + <ellipse cx="250" cy="50" rx="50" ry="25" /> + + <rect x="20" y="120" width="60" height="60" rx="0" ry="15"/> + <rect x="120" y="120" width="60" height="60" rx="15" ry="15"/> + <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="椭圆">椭圆</h2> + +<p>对于 {{SVGElement('ellipse')}}，<code>rx</code> 属性定义了水平方向的半径尺寸。如果使用了负值或者零，那么椭圆就不会被绘制。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">取值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong> | <code>auto</code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>auto</code></td> + </tr> + <tr> + <th scope="row">是否支持动画</th> + <td>是</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注释:</strong> 从 SVG2 开始， <code>rx</code> 是一个几何属性，也就是说，这个属性也可以用作椭圆的CSS属性。</p> + +<h2 id="矩形">矩形</h2> + +<p>对于 {{SVGElement('rect')}}，<code>rx</code> 定义了水平方向的圆角尺寸。</p> + +<p><code>rx</code> 属性的实际效果取决于矩形的 {{SVGAttr("ry")}} 属性和宽度：</p> + +<ul> + <li>如果你为 <code>rx</code> 属性指定了正确的值，但是没有定义 {{SVGAttr("ry")}} 属性的值，那么浏览器会让 {{SVGAttr("ry")}} 取 <code>rx</code> 属性被指定的相等的值。（反之亦然）</li> + <li>如果 <code>rx</code> 和 {{SVGAttr("ry")}} 都没有被正确的赋值，那么浏览器会绘制一个带有直角尖角的矩形。</li> + <li><code>rx</code> 属性的有效值为矩形宽度的一半（即，如果为 <code>rx</code> 指定的值大于矩形宽度的一半，那么浏览器会视为 <code>rx</code> 的值为矩形宽度的一半）。</li> +</ul> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">取值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong> | <code>auto</code></td> + </tr> + <tr> + <th scope="row">缺省值</th> + <td><code>auto</code></td> + </tr> + <tr> + <th scope="row">是否支持动画</th> + <td>是</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注释:</strong> 从 SVG2 开始，<code>rx</code> 是一个几何属性，也就是说，这个属性也可以用作矩形（rect）的 CSS 属性。</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#RX", "rx")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>被定义为几何属性</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementRXAttribute", "rx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><ellipse></code> 的初始定义</td> + </tr> + <tr> + <td> {{SpecName("SVG1.1", "shapes.html#RectElementRXAttribute", "rx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><rect></code> 的初始定义</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/scale/index.html b/files/zh-cn/web/svg/attribute/scale/index.html new file mode 100644 index 0000000000..325197861e --- /dev/null +++ b/files/zh-cn/web/svg/attribute/scale/index.html @@ -0,0 +1,51 @@ +--- +title: scale +slug: Web/SVG/Attribute/scale +tags: + - SVG + - SVG属性 + - 滤镜 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/scale +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>属性<code>scale</code>定义了用在{{SVGElement("feDisplacementMap")}}滤镜上的置换缩放因子。它的总值表达在{{SVGElement("filter")}}元素的属性{{SVGAttr("primitiveUnits")}}确定的坐标系统中。</p> + +<p>如果这个属性的值是<strong><span class="attr-value">0</span></strong><span class="attr-value">，</span>则它的操作对源图像没有影响。</p> + +<p>如果没有指定这个属性，则效果等同于它被指定了<strong>0</strong>值。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td><em>无</em></td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Paint"><number></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapScaleAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapScaleAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>scale</code>属性：</p> + +<ul> + <li>{{ SVGElement("feDisplacementMap") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/seed/index.html b/files/zh-cn/web/svg/attribute/seed/index.html new file mode 100644 index 0000000000..58b370829e --- /dev/null +++ b/files/zh-cn/web/svg/attribute/seed/index.html @@ -0,0 +1,49 @@ +--- +title: seed +slug: Web/SVG/Attribute/seed +tags: + - SVG + - SVG属性 + - 滤镜 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/seed +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>seed</code>属性代表了{{SVGElement("feTurbulence")}}元素生成的伪随机数的开始数字。</p> + +<p>如果没有指定这个属性，它等效于指定了一个<code>0</code>值。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en-US/docs/SVG/Content_type#Number" title="/en-US/docs/SVG/Content_type#Number"><number></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceSeedAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceSeedAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>seed</code>属性：</p> + +<ul> + <li>{{ SVGElement("feTurbulence") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/shape-rendering/index.html b/files/zh-cn/web/svg/attribute/shape-rendering/index.html new file mode 100644 index 0000000000..c99a0e3104 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/shape-rendering/index.html @@ -0,0 +1,83 @@ +--- +title: shape-rendering +slug: Web/SVG/Attribute/shape-rendering +tags: + - SVG + - SVG线条渲染 + - 需要完善 +translation_of: Web/SVG/Attribute/shape-rendering +--- +<p>« <a href="/zh-CN/docs/Web/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考主页</a></p> + +<p>指定SVG元素{{SVGElement("path")}}的渲染模式。</p> + +<h2 id="使用参考">使用参考</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类型</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong title="this is the default value">auto</strong> | optimizeSpeed | crispEdges | geometricPrecision | inherit</td> + </tr> + <tr> + <th scope="row">可运动</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">标准文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty" title="http://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>auto</dt> + <dd>让浏览器自动权衡渲染速度、平滑度、精确度。默认是倾向于精确度而非平滑度和速度。</dd> + <dt>optimizeSpeed</dt> + <dd>偏向渲染速度，浏览器会关闭反锯齿模式。（速度）</dd> + <dt>crispEdges</dt> + <dd>偏向更加清晰锐利的边缘的渲染。浏览器在渲染的时候会关闭反锯齿模式，且会让线条的位置和宽度和显示器边缘对齐。（锐度）</dd> + <dt>geometricPrecision</dt> + <dd>偏向渲染平滑的曲线。（平滑）</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" + version="1.1" width="100" height="100" + shape-rendering="optimizeSpeed"><!-- 这个示例在Firefox下看区别更明显 --></pre> + +<table class="standard-table"> + <tbody> + <tr> + <td> + <p>shape-rendering: geometricPrecision:</p> + + <p><img alt="shape-rendering:geometricPrecision" src="http://download.g63.ru/svg/shape-rendering-geometricPrecision.svg" style="height: 210px; width: 200px;"></p> + </td> + <td> + <p>shape-rendering: optimizeSpeed</p> + + <p><img alt="shape-rendering:optimizeSpeed" src="http://download.g63.ru/svg/shape-rendering-optimizeSpeed.svg" style="height: 210px; width: 200px;"></p> + </td> + </tr> + </tbody> +</table> + +<p>同样，你也可以在css样式中使用shape-rendering:</p> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" + version="1.1" width="100" height="100" + style="shape-rendering:optimizeSpeed;"></pre> + +<h2 id="关联元素">关联元素</h2> + +<p>下面的元素可以使用这个属性</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/stddeviation/index.html b/files/zh-cn/web/svg/attribute/stddeviation/index.html new file mode 100644 index 0000000000..4ab8e22164 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stddeviation/index.html @@ -0,0 +1,51 @@ +--- +title: stdDeviation +slug: Web/SVG/Attribute/stdDeviation +tags: + - Filters + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/stdDeviation +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考主页</a></p> + +<p><code>stdDeviation</code> 属性定义了模糊操作的标准差。如果列出两个 <a href="/en-US/docs/SVG/Content_type#Number" title="https://developer.mozilla.org/en-US/docs/SVG/Content_type#Number"><number></a>，第一个数字表示沿着 x 轴的标准差值，第二个值表示沿着 y 轴的标准差值。如果只出现一个数字，那个值就表示在 x 轴和 y 轴上有着相同的标准差。</p> + +<p>负值是不允许的。设为零即禁用了已有滤镜的原本效果（比如，结果是滤镜输入图像）。如果 <code>stdDeviation</code> 在 x 轴和 y 轴上只有一个为 0，那么模糊效果就只会应用于非 0 的那个方向。</p> + +<p>如果此属性没被定义，就与标准差值被定义为 0 的效果一样。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>None</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en-US/docs/SVG/Content_type#Number-optional-number" title="https://developer.mozilla.org/en-US/docs/SVG/Content_type#Number-optional-number"><number-optional-number></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurStdDeviationAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurStdDeviationAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en-US/docs/SVG/Content_type","Number-optional-number") }}</p> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>以下的元素可以使用 <code>stdDeviation</code> 属性</p> + +<ul> + <li>{{ SVGElement("feGaussianBlur") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/string/index.html b/files/zh-cn/web/svg/attribute/string/index.html new file mode 100644 index 0000000000..8b76be0859 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/string/index.html @@ -0,0 +1,63 @@ +--- +title: string +slug: Web/SVG/Attribute/string +translation_of: Web/SVG/Attribute/string +--- +<div>{{SVGRef}}{{deprecated_header("SVG 2")}}</div> + +<p><span class="seoSummary">The <strong><code>string</code></strong> attribute is a hint to the user agent, and specifies a list of formats that the font referenced by the parent {{SVGElement("font-face-uri")}} element supports.</span></p> + +<p>Only one element is using this attribute: {{SVGElement("font-face-format")}}</p> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#Anything"><anything></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><anything></code></dt> + <dd> + <p>This value specifies a list of formats that are supported by the font referenced by the parent {{SVGElement("font-face-uri")}} element.</p> + + <p>The available types are: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, and <code>"svg"</code>. See the {{cssxref("@font-face/src", "src")}} descriptor of the {{cssxref("@font-face")}} at-rule for more information.</p> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG1.1", "fonts.html#FontFaceFormatElementStringAttribute", "string")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.font-face-format.string")}}</p> diff --git a/files/zh-cn/web/svg/attribute/stroke-dasharray/index.html b/files/zh-cn/web/svg/attribute/stroke-dasharray/index.html new file mode 100644 index 0000000000..9ecc44d9dc --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke-dasharray/index.html @@ -0,0 +1,79 @@ +--- +title: stroke-dasharray +slug: Web/SVG/Attribute/stroke-dasharray +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/stroke-dasharray +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code><font face="Open Sans, Arial, sans-serif">属性</font>stroke-dasharray可</code>控制用来描边的点划线的图案范式。</p> + +<p>作为一个外观属性，它也可以直接用作一个CSS样式表内部的属性。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong title="this is the default value">none</strong> | <dasharray> | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><dasharray></dt> + <dd>它是一个<span><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><length></a>和</span><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，<strong>5,3,2</strong>等同于<strong>5,3,2,5,3,2</strong>。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><?xml version="1.0"?> +<svg width="200" height="200" viewPort="0 0 200 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> + + <line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" /> + <line stroke-dasharray="5, 10" x1="10" y1="30" x2="190" y2="30" /> + <line stroke-dasharray="10, 5" x1="10" y1="50" x2="190" y2="50" /> + <line stroke-dasharray="5, 1" x1="10" y1="70" x2="190" y2="70" /> + <line stroke-dasharray="1, 5" x1="10" y1="90" x2="190" y2="90" /> + <line stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110" /> + <line stroke-dasharray="15, 10, 5" x1="10" y1="130" x2="190" y2="130" /> + <line stroke-dasharray="15, 10, 5, 10" x1="10" y1="150" x2="190" y2="150" /> + <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" /> + <line stroke-dasharray="5, 5, 1, 5" x1="10" y1="190" x2="190" y2="190" /> + +<style><![CDATA[ +line{ + stroke: black; + stroke-width: 2; +} +]]></style> +</svg></pre> + +<p><strong>示例输出</strong></p> + +<p>{{ EmbedLiveSample('Example','220','220') }}</p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>stroke-dasharray属性：</code></p> + +<ul> + <li><a href="/en/SVG/Element#Shape_elements" title="en/SVG/Element#Shape_elements">形状元素</a> »</li> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">文本内容元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.html b/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.html new file mode 100644 index 0000000000..d836769c53 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.html @@ -0,0 +1,55 @@ +--- +title: stroke-dashoffset +slug: Web/SVG/Attribute/stroke-dashoffset +tags: + - SVG + - SVG属性 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/stroke-dashoffset +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG</a>属性参考主页</p> + +<p><code>stroke-dashoffset</code> 属性指定了dash模式到路径开始的距离</p> + +<p>如果使用了一个 <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><百分比></a> 值， 那么这个值就代表了当前viewport的一个百分比。<br> + <br> + 值可以取为负值。</p> + +<h2 id="使用环境">使用环境</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>显示属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> | <a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a> | inherit</td> + </tr> + <tr> + <th scope="row">初始值</th> + <td>1</td> + </tr> + <tr> + <th scope="row">可动画</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty" title="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>以下元素可使用stroke-dashoffset属性</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">形状元素</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">文本内容元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/stroke-linecap/index.html b/files/zh-cn/web/svg/attribute/stroke-linecap/index.html new file mode 100644 index 0000000000..8233fd5eda --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke-linecap/index.html @@ -0,0 +1,72 @@ +--- +title: stroke-linecap +slug: Web/SVG/Attribute/stroke-linecap +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/stroke-linecap +--- +<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG 属性 参照主页</a></p> + +<p><code>stroke-linecap</code> 属性制定了，在开放子路径被设置描边的情况下，用于开放自路径两端的形状。</p> + +<p>作为一个展现属性，它也可以在一个CSS样式表内部，作为一个属性直接使用。</p> + +<h2 id="使用背景">使用背景</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">分类</th> + <td>展现属性</td> + </tr> + <tr> + <th scope="row">属性值</th> + <td>butt | round | square | inherit</td> + </tr> + <tr> + <th scope="row">可动画化</th> + <td>是</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><?xml version="1.0"?> +<svg width="120" height="120" + viewPort="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <line stroke-linecap="butt" + x1="30" y1="30" x2="30" y2="90" + stroke="black" stroke-width="20"/> + + <line stroke-linecap="round" + x1="60" y1="30" x2="60" y2="90" + stroke="black" stroke-width="20"/> + + <line stroke-linecap="square" + x1="90" y1="30" x2="90" y2="90" + stroke="black" stroke-width="20"/> + + <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90" + stroke="white" /> +</svg></pre> + +<p><strong>实时样例</strong></p> + +<p>{{ EmbedLiveSample('Example','120','120') }}</p> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>stroke-linecap</code> 属性</p> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Element#Shape" title="en-US/docs/Web/SVG/Element#Shape">图形元素</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Element#TextContent" title="en-US/docs/Web/SVG/Element#TextContent">文本内容元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/stroke-linejoin/index.html b/files/zh-cn/web/svg/attribute/stroke-linejoin/index.html new file mode 100644 index 0000000000..209f1027a1 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke-linejoin/index.html @@ -0,0 +1,303 @@ +--- +title: stroke-linejoin +slug: Web/SVG/Attribute/stroke-linejoin +translation_of: Web/SVG/Attribute/stroke-linejoin +--- +<div>{{SVGRef}}</div> + +<p><strong><code>stroke-linejoin</code></strong> 属性指明路径的转角处使用的形状或者绘制的基础形状。</p> + +<div class="blockIndicator note"><strong>备注:</strong> 作为显示属性， <code>stroke-linejoin</code> 能被用做CSS属性。</div> + +<p>作为显示属性，该属性能被应用到任何元素，但只对这 9 种元素有效： {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, {{SVGElement('tspan')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> + <!-- + Upper left path: + Effect of the "miter" value + --> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="miter" /> + + <!-- + Center path: + Effect of the "round" value + --> + <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="round" /> + + <!-- + Upper right path: + Effect of the "bevel" value + --> + <path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="bevel" /> + + <!-- + Bottom left path: + Effect of the "miter-clip" value + with fallback to "miter" if not supported. + --> + <path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="miter-clip" /> + + <!-- + Bottom right path: + Effect of the "arcs" value + with fallback to "miter" if not supported. + --> + <path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="arcs" /> + + + <!-- + the following pink lines highlight the + position of the path for each stroke + --> + <g id="highlight"> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5.5" r="0.05" fill="pink" /> + </g> + <use xlink:href="#highlight" x="6" /> + <use xlink:href="#highlight" x="12" /> + <use xlink:href="#highlight" x="2" y="6" /> + <use xlink:href="#highlight" x="8" y="6" /> +</svg> +</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 400)}}</p> +</div> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><code>arcs</code> | <code>bevel</code> |<code>miter</code> | <code>miter-clip</code> | <code>round</code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>miter</code></td> + </tr> + <tr> + <th scope="row">可动画性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="arcs">arcs</h3> + +<div class="blockIndicator note"><strong>说明:</strong> <code>arcs</code> 来自于 SVG2 但尚未被广泛支持，详情参见 <a href="#Browser_compatibility">浏览器兼容性</a></div> + +<p><code>arcs</code> 值指示将使用圆弧拐角来连接路径线段。 通过用与连接点的外边缘具有相同曲率的圆弧在连接点处延伸笔触的外边缘来形成弧形。</p> + +<h4 id="示例">示例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> + <!-- Effect of the "arcs" value --> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none" + stroke-linejoin="arcs" /> + + <!-- + the following pink lines highlight the + position of the path for each stroke + --> + <g id="p"> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> + </g> +</svg></pre> + +<p>{{EmbedLiveSample('arcs', '100%', 200)}}</p> + +<h3 id="bevel">bevel</h3> + +<p>The <code>bevel</code> 用斜角连接路径段。</p> + +<h4 id="示例_2">示例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> + <!-- Effect of the "bevel" value --> + <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" + stroke-linejoin="bevel" /> + + <!-- + the following pink lines highlight the + position of the path for each stroke + --> + <g id="p"> + <path d="M1,5 l2,-3 l2,3" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> + </g> +</svg></pre> + +<p>{{EmbedLiveSample('bevel', '100%', 200)}}</p> + +<h3 id="miter">miter</h3> + +<p>The <code>miter</code> 用尖角连接路径段。 通过在路径段的切线处延伸笔触的外边缘直到它们相交，来形成拐角。</p> + +<div class="blockIndicator note"><strong>说明:</strong> 如果超出了{{SVGAttr('stroke-miterlimit')}}，则会退回到<code> bevel 。</code></div><code> + +<h4 id="示例_3">示例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"> + <!-- Effect of the "miter" value --> + <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" + stroke-linejoin="miter" /> + + <!-- Effect of the "miter" value on a sharp angle + where de default miter limit is exceeded --> + <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none" + stroke-linejoin="miter" /> + + <!-- the following red dotted line show where + the miter value falls back to the bevel value --> + <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> + + <!-- the following pink lines highlight the position of the path for each stroke --> + <g> + <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> + + <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="7" cy="5" r="0.05" fill="pink" /> + <circle cx="7.75" cy="2" r="0.05" fill="pink" /> + <circle cx="8.5" cy="5" r="0.05" fill="pink" /> + </g> +</svg></pre> + +<p>{{EmbedLiveSample('miter', '100%', 200)}}</p> + +<h3 id="miter-clip">miter-clip</h3> + +<div class="blockIndicator note"><strong>说明:</strong> <code>miter-clip</code> 来自于 SVG2 但尚未被广泛支持，详情参见 <a href="#Browser_compatibility">浏览器兼容性</a></div> + +<p>The <code>miter-clip</code> 用尖角连接路径段。 通过在路径段的切线处延伸笔触的外边缘直到它们相交，来形成拐角。</p> + +<p>如果超过了{{SVGAttr('stroke-miterlimit')}}，则斜切将被裁剪为等于{{SVGAttr('stroke-miterlimit')}}值乘以路径段相交处的笔划宽度的一半的距离。在非常尖锐的连接或动画的情况下，这提供了比<code> mitt 更好的渲染效果。</code></p><code> + +<h4 id="示例_4">示例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"> + <!-- Effect of the "miter-clip" value --> + <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" + stroke-linejoin="miter-clip" /> + + <!-- Effect of the "miter-clip" value on a sharp angle + where de default miter limit is exceeded --> + <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none" + stroke-linejoin="miter-clip" /> + + <!-- the following red dotted line show where the clip should happen --> + <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> + + <!-- the following pink lines highlight the position of the path for each stroke --> + <g> + <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> + + <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="7" cy="5" r="0.05" fill="pink" /> + <circle cx="7.75" cy="2" r="0.05" fill="pink" /> + <circle cx="8.5" cy="5" r="0.05" fill="pink" /> + </g> +</svg></pre> + +<p>{{EmbedLiveSample('miter-clip', '100%', 200)}}</p> + +<h3 id="round">round</h3> + +<p><code>round</code> 使用圆角连接路径片段。</p> + +<h4 id="示例_5">示例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> + <!-- Effect of the "round" value --> + <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" + stroke-linejoin="round" /> + + <!-- + the following pink lines highlight the + position of the path for each stroke + --> + <g id="p"> + <path d="M1,5 l2,-3 l2,3" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> + </g> +</svg></pre> + +<p>{{EmbedLiveSample('round', '100%', 200)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for shapes and texts</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for shapes and texts</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.attributes.presentation.stroke-linejoin")}}</p></code></code> diff --git a/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.html b/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.html new file mode 100644 index 0000000000..b2231809f5 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.html @@ -0,0 +1,62 @@ +--- +title: stroke-miterlimit +slug: Web/SVG/Attribute/stroke-miterlimit +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/stroke-miterlimit +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>如果两条线交汇在一起形成一个尖角，而且属性{{ SVGAttr("stroke-linejoin") }}指定了<code>miter</code>，斜接有可能扩展到远远超过出路径轮廓线的线宽。属性<code>stroke-miterlimit对斜接长度和</code>{{ SVGAttr("stroke-width") }}的比率<code>强加了一个极限。当极限到达时，交汇处由斜接变成倒角。</code></p> + +<p>斜接长度（斜接的外尖角和内夹角之间的距离）与{{ SVGAttr("stroke-width") }}的比率，直接跟两条线之间的角度（θ）有关，用如下方程表示：</p> + +<pre>miterLength / stroke-width = 1 / sin ( theta / 2 ) +</pre> + +<p>举个例子，一个极限为1.414斜接，θ小于90度的把斜接会转换成倒角，一个极限为4.0的斜接，θ小于29度的斜接会转换成倒角，一个极限为10.0的斜接，θ小于大约11.5度的斜接会转换成倒角。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><miterlimit> | inherit</td> + </tr> + <tr> + <th scope="row">初始值</th> + <td>4</td> + </tr> + <tr> + <th scope="row">可动性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty" title="http://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><miterlimit></dt> + <dd>对斜角长度与{{ SVGAttr("stroke-width") }}的比率的限制。<miterlimit>的值必须是一个大于或等于1的<a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a>。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>stroke-miterlimit</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">形状元素</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">文本内容元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/stroke-opacity/index.html b/files/zh-cn/web/svg/attribute/stroke-opacity/index.html new file mode 100644 index 0000000000..628ca53b52 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke-opacity/index.html @@ -0,0 +1,81 @@ +--- +title: stroke-opacity +slug: Web/SVG/Attribute/stroke-opacity +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/stroke-opacity +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>stroke-opacity</code>属性指定了当前对象的轮廓的不透明度。它的默认值是<strong>1</strong>。</p> + +<p>作为一个外观属性，它可以直接用作CSS样式表内部的属性。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><opacity-value> | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeOpacityProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeOpacityProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><opacity-value></dt> + <dd>在当前对象的轮廓上用该涂色操作的不透明度。任何超出0.0到1.0范围的值都会被压回这个范围（0.0表示完全透明，1.0表示完全不透明）。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><svg width="120px" height="120px" viewBox="0 0 120 120"> + <rect x="10" y="10" width="100" height="100"/> +</svg></pre> + +<h3 id="CSS">CSS</h3> + +<div> +<pre class="brush: css">rect{ + fill:#b4da55; + stroke:#000; + stroke-width:10px; + stroke-opacity:0.3; +}</pre> + +<h3 id="结果">结果</h3> + +<div>{{EmbedLiveSample("Example",150,150)}}</div> +</div> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>stroke-opacity</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">形状元素</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">文本内容元素</a> »</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGAttr("fill-opacity") }}</li> + <li>{{ SVGAttr("opacity") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/stroke-width/index.html b/files/zh-cn/web/svg/attribute/stroke-width/index.html new file mode 100644 index 0000000000..743f2a05a7 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke-width/index.html @@ -0,0 +1,48 @@ +--- +title: stroke-width +slug: Web/SVG/Attribute/stroke-width +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/stroke-width +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>stroke-width</code>属性指定了当前对象的轮廓的宽度。它的默认值是<strong>1</strong>。如果使用了一个<percentage>，这个值代表当前视口的百分比。如果使用了<strong>0</strong>值，则将不绘制轮廓。</p> + +<p>作为一个外观属性，它可以直接用作CSS样式表内部的属性。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><length></a> | <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>stroke-width</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">形状元素</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">文本内容元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/stroke/index.html b/files/zh-cn/web/svg/attribute/stroke/index.html new file mode 100644 index 0000000000..75b7ef25f4 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke/index.html @@ -0,0 +1,66 @@ +--- +title: stroke +slug: Web/SVG/Attribute/stroke +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/stroke +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>stroke</code>属性定义了给定图形元素的外轮廓的颜色。它的默认值是<strong>none</strong>。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint"><paint></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>是</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p></p> + +<h2 id="SVG_Line" name="SVG_Line">SVG 描边的线</h2> + +<h3 id="示例1：用stroke属性画一条绿色的直线.">示例1：用stroke属性画一条绿色的直线.</h3> + +<pre class="brush: html"><svg height="50" width ="300"> + <path stroke = "green" d="M5 20 1215 0" /> +</svg></pre> + +<h3 id="sect1"> </h3> + +<h3 id="示例2：用Stroke属性画一个拥有蓝色边框的黑色的圆形">示例2：用Stroke属性画一个拥有蓝色边框的黑色的圆形</h3> + +<pre class="brush: html"><svg height="200" width="200"> + <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill ="black" /> +</svg></pre> + +<p> </p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>stroke</code>属性：</p> + +<ul> + <li><a href="https://developer.mozilla.org/en/SVG/Element#Shape" title="en/SVG/Element#Shape">形状元素</a> »</li> + <li><a href="https://developer.mozilla.org/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">文本内容元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/style/index.html b/files/zh-cn/web/svg/attribute/style/index.html new file mode 100644 index 0000000000..3bae57e589 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/style/index.html @@ -0,0 +1,77 @@ +--- +title: style +slug: Web/SVG/Attribute/style +tags: + - SVG + - SVG Attribute + - Style + - svg style +translation_of: Web/SVG/Attribute/style +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><strong><code>style </code></strong>属性指定了指定其元素的样式信息。它的功能与 HTML 中的<a href="/zh-CN/docs/Web/HTML/Global_attributes/style">style</a>属性相同。</p> + +<h2 id="使用环境">使用环境</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><style></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute" title="http://www.w3.org/TR/SVG/styling.html#StyleAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><style></dt> + <dd>样式数据的语法取决于样式表语言。默认情况下，如果未指定 {{ SVGAttr("contentStyleType") }}，样式表语言为CSS。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>以下示例展示了使用CSS作为样式表语言来使用style属性，为一个矩形框添加样式。</p> + +<pre class="brush: html"><svg version="1.1" viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"> + <rect height="300" width="600" x="200" y="100" + style="fill: red; stroke: blue; stroke-width: 3"/> +</svg> +</pre> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用style属性</p> + +<ul> + <li><a href="/en/SVG/Element#Container" title="en/SVG/Element#Container">Container elements</a> »</li> + <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> + <li><a href="/en/SVG/Element#Gradient" title="en/SVG/Element#Gradient">Gradient elements</a> »</li> + <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Graphics elements</a> »</li> + <li><a href="/en/SVG/Element#Structural" title="en/SVG/Element#Structural">Structural elements</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li> + <li>{{ SVGElement("clipPath") }}</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("stop") }}</li> + <li>{{ SVGElement("glyph") }}</li> +</ul> + +<h2 id="相关">相关</h2> + +<ul> + <li>{{ SVGElement("style") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/target/index.html b/files/zh-cn/web/svg/attribute/target/index.html new file mode 100644 index 0000000000..942cfaa910 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/target/index.html @@ -0,0 +1,110 @@ +--- +title: target +slug: Web/SVG/Attribute/target +translation_of: Web/SVG/Attribute/target +--- +<div>{{SVGRef}}</div> + +<p><code><strong>target</strong></code>当结束资源有多个可能的目标时，例如，当父文档嵌入在HTML或XHTML文档中或使用选项卡式浏览器查看时，应使用该属性。此属性指定激活链接时要在其中打开文档的浏览上下文的名称（例如，浏览器选项卡或（X）HTML iframe或object元素）：</p> + +<p>只有一个元素正在使用此属性：{{SVGElement("a")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +} + +text { + font: 20px Arial, Helvetica, sans-serif; + fill: blue; + text-decoration: underline; +} +</pre> +</div> + +<pre class="brush: html; highlight[2,5,8]"><svg viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> + <a href="https://developer.mozilla.org" target="_self"> + <text x="0" y="20">在iframe中打开链接</text> + </a> + <a href="https://developer.mozilla.org" target="_blank"> + <text x="0" y="60">在新标签页或窗口中打开链接</text> + </a> + <a href="https://developer.mozilla.org" target="_top"> + <text x="0" y="100">在此标签或窗口中打开链接</text> + </a> +</svg> +</pre> + +<p>{{EmbedLiveSample("topExample", "300", "120")}}</p> +</div> + +<h2 id="使用说明">使用说明</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">值</th> + <td><code>_self</code>| <code>_parent</code>| <code>_top</code>| <code>_blank</code>|<code><XML-Name></code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>_self</code></td> + </tr> + <tr> + <th scope="row">可动画的</th> + <td>是</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code>_replace</code> {{deprecated_inline}}</dt> + <dd> + <p>当前SVG图像被与当前SVG图像在同一帧中相同矩形区域中的链接内容替换。</p> + + <div class="blockIndicator note"> + <p><strong>注意：</strong>这个值是从来没有很好的执行，之间的区别<code><span class="attr-value">_replace</span></code>，并<code><span class="attr-value">_self</span></code>已通过在浏览上下文的HTML定义的变化变得多余。使用<code><span class="attr-value">_self</span></code>以取代目前的SVG文件。</p> + </div> + </dd> + <dt><code>_self</code></dt> + <dd>在与当前SVG图像相同的浏览上下文中，当前SVG图像被链接的内容替换。</dd> + <dt><code>_parent</code></dt> + <dd>SVG图像的直接父浏览上下文将被链接的内容替换（如果存在），并且可以从此文档中安全地访问它。</dd> + <dt><code>_top</code></dt> + <dd>完整活动窗口或选项卡的内容将由链接的内容替换（如果存在），并且可以从此文档中安全地访问</dd> + <dt><code>_blank</code></dt> + <dd>如果此文档可以安全地显示，则需要一个新的未命名窗口或标签来显示链接的内容。如果用户代理不支持多个窗口/选项卡，则结果与_top相同。</dd> + <dt><code><XML-Name></code></dt> + <dd>指定用于显示链接内容的浏览上下文的名称（选项卡，内联框架，对象等）。如果具有该名称的上下文已经存在，并且可以从此文档中安全地访问，则可以重新使用该上下文，替换现有内容。如果不存在，则创建它（与'_blank'相同，但现在有了一个名称）。该名称必须是有效的XML名称[XML11]，并且不能以下划线（U + 005F LOW LINE字符）开头，以满足来自HTML的有效浏览上下文名称的要求。</dd> +</dl> + +<h2 id="技术指标">技术指标</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规格</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "linking.html#AElementTargetAttribute", "target")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>删除<code>_replace</code>值。</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "linking.html#AElementTargetAttribute", "target")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。如果您想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求。</div> + +<p>{{Compat("svg.elements.a.target")}}</p> diff --git a/files/zh-cn/web/svg/attribute/text-decoration/index.html b/files/zh-cn/web/svg/attribute/text-decoration/index.html new file mode 100644 index 0000000000..2fbfb28b0c --- /dev/null +++ b/files/zh-cn/web/svg/attribute/text-decoration/index.html @@ -0,0 +1,45 @@ +--- +title: text-decoration +slug: Web/SVG/Attribute/text-decoration +translation_of: Web/SVG/Attribute/text-decoration +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><code>text-decoration</code> 属性的作用跟{{ cssxref("text-decoration","CSS Text Decoration") }} 特性差不多,当然除了它是一个CSS属性。浏览 {{ cssxref("text-decoration","CSS Text Decoration") }} 获取进一步的信息。</p> + +<h2 id="使用环境">使用环境</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">分类</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td>none | underline | overline | line-through | blink | <strong title="this is the default value">inherit</strong></td> + </tr> + <tr> + <th scope="row">是否可用于动画</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#TextDecorationProperty" title="http://www.w3.org/TR/SVG/text.html#TextDecorationProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="元素">元素</h2> + +<pre class="notranslate">后代元素可以继承 text-decoration 这个属性</pre> + +<ul> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li> +</ul> + +<h2 id="相关">相关</h2> + +<ul> + <li>{{ cssxref("text-decoration", "CSS Text Decoration") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/transform/index.html b/files/zh-cn/web/svg/attribute/transform/index.html new file mode 100644 index 0000000000..0c61ea9952 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/transform/index.html @@ -0,0 +1,262 @@ +--- +title: transform +slug: Web/SVG/Attribute/transform +translation_of: Web/SVG/Attribute/transform +--- +<div>{{SVGRef}}</div> + +<pre dir="ltr" id="tw-target-text"><strong>transform</strong> 属性定义了一系列应用于元素和元素子元素的变换规则集合</pre> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g fill="grey" + transform="rotate(-10 50 100) + translate(-36 45.5) + skewX(40) + scale(1 0.5)"> + <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> + </g> + + <use xlink:href="#heart" fill="none" stroke="red"/> +</svg> +</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<p class="note"><strong>提示:</strong> 从SVG2开始，transform是一种图像属性，这意味着它可以用作CSS属性。但是请注意，CSS属性和属性之间在语法上存在一些差异。有关在这种情况下使用的特定语法，请参见CSS属性{{cssxref('transform')}}的文档</p> + +<p>作为表示属性，任何元素都可以使用<strong><code>transform</code></strong> （在SVG 1.1中，仅这16个元素被允许使用：{{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}}, and {{SVGElement('use')}})。<br> + <br> + 另外，作为SVG 1.1的遗留物，{{SVGElement('linearGradient')}}和{{SVGElement('radialGradient')}}支持 <code>gradientTransform </code>属性，而{{SVGElement('pattern')}}支持 <code>patternTransform </code>属性，两者的行为完全相同于 <code>transform</code> 属性</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Transform-list"><transform-list></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Transform_functions">Transform functions</h2> + +<p><code>transform</code> 属性 <em><code><transform-list> </code></em>可以使用以下的所有 <code>transform </code>函数</p> + +<p class="warning"><strong>警告:</strong> 根据规范，您还应该能够使用CSS {{cssxref('transform-function', 'transform functions')}}，但是，这不能保证兼容性。</p> + +<h3 id="Matrix">Matrix</h3> + +<p><code>matrix(<a> <b> <c> <d> <e> <f>)</code> 函数以六个值的变换矩阵形式指定一个 <code>transform</code>。 matrix（a，b，c，d，e，f）等同于应用变换矩阵： \ begin {pmatrix} a＆c＆e \\ b＆d＆f \\ 0＆0＆1 \ end {pmatrix} 通过以下矩阵等式将坐标从先前的坐标系映射到新的坐标系：<br> + <math display="block"><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevCoordSys}} + c y_{\mathrm{prevCoordSys}} + e \\ b x_{\mathrm{prevCoordSys}} + d y_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix} </annotation></semantics></math></p> + +<h4 id="举例">举例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <rect x="10" y="10" width="30" height="20" fill="green" /> + + <!-- + In the following example we are applying the matrix: + [a c e] [3 -1 30] + [b d f] => [1 3 40] + [0 0 1] [0 0 1] + + which transform the rectangle as such: + + top left corner: oldX=10 oldY=10 + newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 10 + 30 = 50 + newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 10 + 40 = 80 + + top right corner: oldX=40 oldY=10 + newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 10 + 30 = 140 + newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 10 + 40 = 110 + + bottom left corner: oldX=10 oldY=30 + newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 30 + 30 = 30 + newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 30 + 40 = 140 + + bottom right corner: oldX=40 oldY=30 + newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120 + newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170 + --> + <rect x="10" y="10" width="30" height="20" fill="red" + transform="matrix(3 1 -1 3 30 40)" /> +</svg></pre> + +<p>{{EmbedLiveSample('Matrix', '100%', 200)}}</p> + +<h3 id="Translate">Translate</h3> + +<p> <code>translate(<x> [<y>])</code> 变换函数通过 <code>x</code> 向量和 <code>y</code> 向量移动元素 (i.e. <code>x<sub>new</sub> = x<sub>old</sub> + <x>, y<sub>new</sub> = y<sub>old</sub> + <y></code>). 如果 <code>y</code> 向量没有被提供，那么默认为 <code>0</code> </p> + +<h4 id="举例_2">举例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- No translation --> + <rect x="5" y="5" width="40" height="40" fill="green" /> + + <!-- Horizontal translation --> + <rect x="5" y="5" width="40" height="40" fill="blue" + transform="translate(50)" /> + + <!-- Vertical translation --> + <rect x="5" y="5" width="40" height="40" fill="red" + transform="translate(0 50)" /> + + <!-- Both horizontal and vertical translation --> + <rect x="5" y="5" width="40" height="40" fill="yellow" + transform="translate(50,50)" /> +</svg></pre> + +<p>{{EmbedLiveSample('Translate', '100%', 200)}}</p> + +<h3 id="Scale">Scale</h3> + +<p><code>scale(<x> [<y>])</code> 变换函数通过 <code>x</code> 和 <code>y</code>指定一个 <strong>等比例放大缩小</strong> 操作。如果 <code>y</code> 没有被提供，那么假定为等同于 <code>x</code></p> + +<h4 id="举例_3">举例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- uniform scale --> + <circle cx="0" cy="0" r="10" fill="red" + transform="scale(4)" /> + + <!-- vertical scale --> + <circle cx="0" cy="0" r="10" fill="yellow" + transform="scale(1,4)" /> + + <!-- horizontal scale --> + <circle cx="0" cy="0" r="10" fill="pink" + transform="scale(4,1)" /> + + <!-- No scale --> + <circle cx="0" cy="0" r="10" fill="black" /> +</svg></pre> + +<p>{{EmbedLiveSample('Scale', '100%', 200)}}</p> + +<h3 id="Rotate">Rotate</h3> + +<p><code>rotate(<a> [<x> <y>])</code> 变换方法通过一个给定角度对一个指定的点进行旋转变换。如果x和y没有提供，那么默认为当前元素坐标系原点。否则，就以<code>(x,y)</code>为原点进行旋转。</p> + +<h4 id="举例_4">举例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="10" height="10" /> + + <!-- rotation is done around the point 0,0 --> + <rect x="0" y="0" width="10" height="10" fill="red" + transform="rotate(100)" /> + + <!-- rotation is done around the point 10,10 --> + <rect x="0" y="0" width="10" height="10" fill="green" + transform="rotate(100,10,10)" /> +</svg></pre> + +<p>{{EmbedLiveSample('Rotate', '100%', 200)}}</p> + +<h3 id="SkewX">SkewX</h3> + +<p><code>skewX(<a>)</code> 变换函数指定了沿 <code>x</code> 轴倾斜 <code>a°</code> 的倾斜变换。</p> + +<h4 id="举例_5">举例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> + <rect x="-3" y="-3" width="6" height="6" /> + + <rect x="-3" y="-3" width="6" height="6" fill="red" + transform="skewX(30)" /> +</svg></pre> + +<p>{{EmbedLiveSample('SkewX', '100%', 200)}}</p> + +<h3 id="SkewY">SkewY</h3> + +<p><code>skewY(<a>)</code> 变换函数指定了沿 <code>y</code> 轴倾斜 <code>a°</code> 的倾斜变换。</p> + +<h4 id="举例_6">举例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> + <rect x="-3" y="-3" width="6" height="6" /> + + <rect x="-3" y="-3" width="6" height="6" fill="red" + transform="skewY(30)" /> +</svg></pre> + +<p>{{EmbedLiveSample('SkewY', '100%', 200)}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#svg-transform', 'transform')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transforms', '#svg-transform', 'transform')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG2", "coords.html#TransformProperty", "transform")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "coords.html#TransformAttribute", "transform")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/type/index.html b/files/zh-cn/web/svg/attribute/type/index.html new file mode 100644 index 0000000000..b36de9fb97 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/type/index.html @@ -0,0 +1,152 @@ +--- +title: type +slug: Web/SVG/Attribute/type +translation_of: Web/SVG/Attribute/type +--- +<div>{{SVGRef}}</div> + +<p>type属性是一个类属性，他在不同的使用语境下有不同的意思。</p> + +<ul> + <li>对于{{SVGElement("animateTransform")}}元素 , 它决定了那些随时间变化的值的转换的类型</li> + <li>对于 {{SVGElement("feColorMatrix")}} 元素, 它指明了矩阵运算的类型。关键词 <code>matrix</code> 表明一个全 5x4 矩阵的值会被提供. 其他关键字快捷方式代表允许不执行复杂矩阵运算下使用常用颜色。</li> + <li>对于{{SVGElement("feFuncR")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncB")}}, 和{{SVGElement("feFuncA")}} 元素, 它指明了组件传递函数的类型。</li> + <li>对于 {{SVGElement("feTurbulence")}} 元素, 它表示应以噪声函数还是湍流函数执行过滤。</li> + <li>对于 {{SVGElement("style")}} 和 {{SVGElement("script")}} 元素, 它定义了元素内容的类型。</li> +</ul> + +<h2 id="Usage_context">Usage context</h2> + +<h3 id="For_the_SVGElementanimateTransform_elements">For the {{SVGElement("animateTransform")}} elements</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><strong><code>translate</code></strong> | <code>scale</code> | <code>rotate</code> | <code>skewX</code> | <code>skewY</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElementTypeAttribute" title="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElementTypeAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h3 id="For_the_SVGElementfeColorMatrix_element">For the {{ SVGElement("feColorMatrix") }} element</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><strong><code>matrix</code></strong> | <code>saturate</code> | <code>hueRotate</code> | <code>luminanceToAlpha</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixTypeAttribute"><span class="external">SVG 1.1 (2nd Edition)</span></a></td> + </tr> + </tbody> +</table> + +<h3 id="For_the_SVGElementfeFuncR_SVGElementfeFuncG_SVGElementfeFuncB_and_SVGElementfeFuncA_elements">For the {{ SVGElement("feFuncR") }}, {{ SVGElement("feFuncG") }}, {{ SVGElement("feFuncB") }}, and {{ SVGElement("feFuncA") }} elements</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><code>identity</code> | <code>table</code> | <code>discrete</code> | <code>linear</code> | <code>gamma</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferTypeAttribute"><span class="external">SVG 1.1 (2nd Edition)</span></a></td> + </tr> + </tbody> +</table> + +<h3 id="For_the_SVGElementfeTurbulence_element">For the {{ SVGElement("feTurbulence") }} element</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><code>fractalNoise</code> | <strong><code>turbulence</code></strong></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceTypeAttribute"><span class="external">SVG 1.1 (2nd Edition)</span></a></td> + </tr> + </tbody> +</table> + +<h3 id="For_the_SVGElementstyle_and_SVGElementscript_elements">For the {{ SVGElement("style") }} and {{SVGElement("script")}} elements</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><content-type></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a href="http://www.w3.org/TR/SVG11/script.html#ScriptElementTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/script.html#ScriptElementTypeAttribute"><span class="external">SVG 1.1 (2nd Edition) : script</span></a><br> + <a href="http://www.w3.org/TR/SVG11/styling.html#StyleElementTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/styling.html#StyleElementTypeAttribute">SVG 1.1 (2nd Edition) : style</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>values</code> attribute</p> + +<ul> + <li>{{SVGElement("animateTransform")}}</li> + <li>{{SVGElement("feColorMatrix")}}</li> + <li>{{SVGElement("feFuncA")}}</li> + <li>{{SVGElement("feFuncB")}}</li> + <li>{{SVGElement("feFuncG")}}</li> + <li>{{SVGElement("feFuncR")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li>{{SVGElement("script")}}</li> + <li>{{SVGElement("style")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/units-per-em/index.html b/files/zh-cn/web/svg/attribute/units-per-em/index.html new file mode 100644 index 0000000000..2ba20d42f8 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/units-per-em/index.html @@ -0,0 +1,63 @@ +--- +title: units-per-em +slug: Web/SVG/Attribute/units-per-em +translation_of: Web/SVG/Attribute/units-per-em +--- +<div>{{SVGRef}}{{deprecated_header("SVG 2")}}</div> + +<p><span class="seoSummary">The <strong><code>units-per-em</code></strong> attribute specifies the number of coordinate units on the "em square", an abstract square whose height is the intended distance between lines of type in the same type size.</span> This is the size of the design grid on which {{Glossary("glyph", "glyphs")}} are laid out.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> This value is almost always necessary as nearly every other attribute requires the definition of a design grid.</p> +</div> + +<p>Only one element is using this attribute: {{SVGElement("font-face")}}</p> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#Number"><number></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>1000</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><number></code></dt> + <dd>This value indicates the the number of coordinate units on the em square.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG1.1", "fonts.html#FontFaceElementUnitsPerEmAttribute", "units-per-em")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.font-face.units-per-em")}}</p> diff --git a/files/zh-cn/web/svg/attribute/values/index.html b/files/zh-cn/web/svg/attribute/values/index.html new file mode 100644 index 0000000000..fa9fbbf70a --- /dev/null +++ b/files/zh-cn/web/svg/attribute/values/index.html @@ -0,0 +1,107 @@ +--- +title: values +slug: Web/SVG/Attribute/values +translation_of: Web/SVG/Attribute/values +--- +<div>{{SVGRef}}</div> + +<p>values属性具有不同的含义，具体取决于使用的上下文，它可以定义在动画过程中使用的值序列，或者它是颜色矩阵的数字列表，根据颜色类型的不同，它们的解释也不同。 要执行的颜色更改。</p> + +<p>五个元素正在使用此属性: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, and {{SVGElement("feColorMatrix")}}</p> + +<h2 id="animate_animateColor_animateMotion_animateTransform">animate, animateColor, animateMotion, animateTransform</h2> + +<p>对于 {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, 和 {{SVGElement("animateTransform")}}, <code>values</code>是一个列表 定义动画过程中的值序列的值。 如果指定了此属性，则将忽略在元素上设置的任何 {{SVGAttr("from")}}, {{SVGAttr("to")}}, 和 {{SVGAttr("by")}} 属性值.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#List-of-Ts"><list-of-values></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><list-of-values></code></dt> + <dd>该值包含一个或多个值的分号分隔列表。 值的类型由 {{SVGAttr("href")}} 和 {{SVGAttr("attributeName")}} 属性定义.</dd> +</dl> + +<h2 id="feColorMatrix">feColorMatrix</h2> + +<p>对于 {{SVGElement("feColorMatrix")}} 元素，值是根据 {{SVGAttr("type")}} 属性值不同解释的数字列表。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>If <code>type="matrix"</code>, identity matrix,<br> + if <code>type="saturate"</code>, <code>1</code>, resulting in identity matrix,<br> + if <code>type="hueRotate"</code>, <code>0</code>, resulting in identity matrix</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><list-of-numbers></code></dt> + <dd> + <p>该值是一个数字列表，根据type属性的值来定义不同解释：</p> + + <ul> + <li>For <code>type="matrix"</code>, <code>values</code> 是20个矩阵值（a00 a01 a02 a03 a04 a10 a11 ... a34）的列表，以空格和/或逗号分隔。</li> + <li>For <code>type="saturate"</code>, <code>values</code> 是单个实数值（0到1）。</li> + <li>For <code>type="hueRotate"</code>, <code>values</code> 是一个单一的实数值（度）。.</li> + <li>For <code>type="luminanceToAlpha"</code>, <code>values</code> 不适用。</li> + </ul> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Filters 1.0", "#element-attrdef-fecolormatrix-values", "values for <feColorMatrix>")}}</td> + <td>{{Spec2("Filters 1.0")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("SVG Animations 2", "#ValuesAttribute", "values for <animate>, <animateColor>, <animateMotion>, and <animateTransform>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "filters.html#feColorMatrixValuesAttribute", "values for <feColorMatrix>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><feColorMatrix></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#ValuesAttribute", "values for <animate>, <animateColor>, <animateMotion>, and <animateTransform>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><animate></code>, <code><animateColor></code>, <code><animateMotion></code>, and <code><animateTransform></code></td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/vector-effect/index.html b/files/zh-cn/web/svg/attribute/vector-effect/index.html new file mode 100644 index 0000000000..e89977f57a --- /dev/null +++ b/files/zh-cn/web/svg/attribute/vector-effect/index.html @@ -0,0 +1,91 @@ +--- +title: vector-effect +slug: Web/SVG/Attribute/vector-effect +translation_of: Web/SVG/Attribute/vector-effect +--- +<div>{{SVGRef}}</div> + +<p><strong><code>vector-effect</code></strong> 属性指明绘制对象时要使用的矢量效果。在任何其他合成操作（如滤镜，蒙版和剪辑等）之前，都要应用矢量效果。</p> + +<p class="note"><strong>备注:</strong> 作为显示性属性， <code>vector-effect</code> 也可以直接在 CSS 样式表中作为属性使用。</p> + +<p>作为显示性属性，它能被应用到任何元素，但只对这10个元素有效果: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}} {{SVGElement("tspan")}}, and {{SVGElement("use")}}</p> + +<h2 id="用法说明">用法说明</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">值</th> + <td><code>none</code> | <code>non-scaling-stroke</code> | <code>non-scaling-size</code> | <code>non-rotation</code> | <code>fixed-position</code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">可动画性</th> + <td>是</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code>none</code></dt> + <dd>该值指定不应用矢量效果，即，使用默认的渲染行为，即首先用指定的绘画填充形状的几何形状，然后使用指定的绘画描边轮廓。</dd> + <dt><code>non-scaling-stroke</code></dt> + <dd>该值修改了笔触的方式。通常，笔触涉及在当前用户坐标系中计算形状路径的笔触轮廓，并用笔触颜料（颜色或渐变）填充轮廓。该值的最终视觉效果是笔触宽度不依赖于元素的变换（包括非均匀缩放和剪切变换）和缩放级别。</dd> + <dt><code>non-scaling-size</code></dt> + <dd>该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，该用户坐标系的比例也不会更改。但是，它没有指定抑制旋转和偏斜。同样，它也不指定用户坐标系的原点。由于此值抑制了用户坐标系的缩放，因此它还具有<code>non-scaling-stroke</code>的特性。</dd> + <dt><code>non-rotation</code></dt> + <dd>该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间发生任何变换更改，该用户坐标系的旋转和倾斜仍被抑制。但是，它没有指定抑制缩放。同样，它也没有指定用户坐标系的原点。</dd> + <dt><code>fixed-position</code></dt> + <dd>该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，用户坐标系的位置都是固定的。但是，它没有指定抑制旋转，偏斜和缩放。当同时指定了该矢量效果和 {{SVGAttr("transform")}} 属性， {{SVGAttr("transform")}} 属性将因该矢量效果而被消耗。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Example_vector-effectnon-scaling-stroke">Example: vector-effect="non-scaling-stroke"</h3> + +<pre class="brush: html"><svg viewBox="0 0 500 240"> + <!-- normal --> + <path d="M10,20L40,100L39,200z" stroke="black" stroke-width="2px" fill="none"></path> + + <!-- scaled --> + <path transform="translate(100,0)scale(4,1)" d="M10,20L40,100L39,200z" stroke="black" + stroke-width="2px" fill="none"></path> + + <!-- fixed--> + <path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="M10,20L40,100L39,200z" + stroke="black" stroke-width="2px" fill="none"></path> +</svg> +</pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("Example_vector-effectnon-scaling-stroke", 550, 300)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "coords.html#VectorEffectProperty", "vector-effect")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.attributes.vector-effect")}}</p> diff --git a/files/zh-cn/web/svg/attribute/version/index.html b/files/zh-cn/web/svg/attribute/version/index.html new file mode 100644 index 0000000000..6fb63d6aec --- /dev/null +++ b/files/zh-cn/web/svg/attribute/version/index.html @@ -0,0 +1,31 @@ +--- +title: version +slug: Web/SVG/Attribute/version +translation_of: Web/SVG/Attribute/version +--- +<p><strong><code>version</code></strong> 属性用于指明 SVG 文档遵循规范。 它只允许在根元素<a href="/en-US/docs/Web/SVG/Element/svg"><svg></a> 上使用。 它纯粹是一个说明，对渲染或处理没有任何影响。</p> + +<p>虽然它接受任何数字，但是只有<code>1.0</code> 和 <code>1.1</code>.这两个有效的选择。</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>None</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a></td> + </tr> + <tr> + <th scope="row">动画属性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">标准文件</th> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#SVGElementVersionAttribute" rel="external" title="http://www.w3.org/TR/SVG11/struct.html#SVGElementVersionAttribute">SVG 1.1 (2nd Edition): version attribute</a></td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/viewbox/index.html b/files/zh-cn/web/svg/attribute/viewbox/index.html new file mode 100644 index 0000000000..6edd649c84 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/viewbox/index.html @@ -0,0 +1,116 @@ +--- +title: viewBox +slug: Web/SVG/Attribute/viewBox +tags: + - SVG + - SVG Attribute + - viewBox +translation_of: Web/SVG/Attribute/viewBox +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考</a></p> + +<p>viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。</p> + +<p>viewBox属性的值是一个包含4个参数的列表 <code>min-x</code>, <code>min-y</code>, <code>width</code> and <code>height</code>， 以空格或者逗号分隔开， 在用户空间中指定一个矩形区域映射到给定的元素,查看属性{{ SVGAttr("preserveAspectRatio") }}。</p> + +<p>不允许宽度和高度为负值,0则禁用元素的呈现。</p> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- + with relative unit such as percentage, the visual size + of the square looks unchanged regardless of the viewBox + --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + with a large viewBox the circle looks small + as it is using user units for the r attribute: + 4 resolved against 100 as set in the viewBox + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg> + +<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> + <!-- + with relative unit such as percentage, the visual size + of the square looks unchanged regardless of the viewBox` + --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + with a small viewBox the circle looks large + as it is using user units for the r attribute: + 4 resolved against 10 as set in the viewBox + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg> + +<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> + <!-- + The point of coordinate 0,0 is now in the center of the viewport, + and 100% is still resolve to a width or height of 10 user units so + the rectangle looks shifted to the bottom/right corner of the viewport + --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + With the point of coordinate 0,0 in the center of the viewport the + value 50% is resolve to 5 which means the center of the circle is + in the bottom/right corner of the viewport. + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> + + + +<p>这个属性会受到 {{ SVGAttr("preserveAspectRatio") }} 的影响。</p> + +<div class="blockIndicator note"> +<p><strong>温馨提示:：</strong><code>width</code> 或者 <code>height</code> 的值，小于或等于0的情况下，这个元素将不会被渲染出来。</p> +</div> + +<p>有 {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, 和 {{ SVGElement("view") }} 等五个 svg 元素可以有这个属性。</p> + +<h2 id="Usage_context"><span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">Usage context</span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><em>See above</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute" title="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Elements">Elements</h2> + +<p>下面的元素可以使用viewBox属性</p> + +<ul> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("view") }}</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/SVG/Tutorial/Positions" title="https://developer.mozilla.org/en/SVG/Tutorial/Positions">SVG Getting Started: Positions</a></li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/visibility/index.html b/files/zh-cn/web/svg/attribute/visibility/index.html new file mode 100644 index 0000000000..9a55be1722 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/visibility/index.html @@ -0,0 +1,59 @@ +--- +title: visibility +slug: Web/SVG/Attribute/visibility +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/visibility +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>visibility</code>属性让你能够控制一个图形元素的可见性。用了值<code>hidden</code>或者值<code>collapse</code>，当前的图形元素将不可见。</p> + +<div class="note"><strong>注意：</strong>如果 {{ SVGElement("tspan") }}元素、{{ SVGElement("tref") }}元素或{{ SVGElement("altGlyph") }}元素上的<code>visibility</code>属性设置为<code>hidden</code>，则文本变得不可见，但是依然占用文本布局计算的空间。</div> + +<p>根据属性{{ SVGAttr("pointer-events") }}的值，图形元素如果属性<code>visibility值设置为hidden，依然能够响应事件。</code></p> + +<p>作为一个外观属性，它可以直接用作CSS样式表内部的属性。请阅读{{ cssxref("visibility","CSS visibility") }}以了解更多信息。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong title="this is the default value">visible</strong> | hidden | collapse | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#VisibilityProperty" title="http://www.w3.org/TR/SVG11/painting.html#VisibilityProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素楞以使用<code>visibility</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">图形元素</a> »</li> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">文本内容元素</a> »</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>属性{{ SVGAttr("display") }} </li> + <li>{{ cssxref("visibility","CSS visibility") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/width/index.html b/files/zh-cn/web/svg/attribute/width/index.html new file mode 100644 index 0000000000..93a4c1f58b --- /dev/null +++ b/files/zh-cn/web/svg/attribute/width/index.html @@ -0,0 +1,62 @@ +--- +title: width +slug: Web/SVG/Attribute/width +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/width +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性在用户坐标系统中标识了一个水平长度。该坐标的确切效果依赖于每个元素。大多数时候，它体现引用元素的矩形区域的宽度（请阅读每个元素的文档以了解例外情况）。</p> + +<p>除了<code><svg></code>元素之外，别的元素都必须指定该属性，<code><svg></code>的宽度默认是<strong>100%</strong>，而<code><filter></code>元素以及<code><mask></code>元素的默认宽度是<strong>120%</strong>。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute">SVG 1.1 (2nd Edition): mask element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/zh-CN/docs/Web/SVG/Content_type","长度") }}</p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>width</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">滤镜元素</a> »</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("use") }}</li> + <li>{{ SVGElement("mask") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/x/index.html b/files/zh-cn/web/svg/attribute/x/index.html new file mode 100644 index 0000000000..186dab9d02 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/x/index.html @@ -0,0 +1,77 @@ +--- +title: x +slug: Web/SVG/Attribute/x +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/x +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性在用户坐标系统中标识了一个x轴坐标。本坐标的确切效果依赖于每个元素。大多数时候，它体现了引用元素的矩形区域的左上角的x轴坐标（请阅读每个元素的文档以了解例外情况）。</p> + +<p>如果没有指定这个属性，效果相当于值被设置为0，除了{{ SVGElement("filter") }}元素以及{{ SVGElement("mask") }}元素；这两个元素的<code>x</code>默认值为<strong>-10%</strong>。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute" title="http://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute">SVG 1.1 (2nd Edition): cursor element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute" title="http://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute">SVG 1.1 (2nd Edition): fePointLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute" title="http://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute">SVG 1.1 (2nd Edition): feSpotLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute">SVG 1.1 (2nd Edition): filter element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#TextElementXAttribute">SVG 1.1 (2nd Edition): text element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementXAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute">SVG 1.1 (2nd Edition): mask element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute">SVG 1.1 (2nd Edition): tspan element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","coordinate") }}</p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>x</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">滤镜元素</a> »</li> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("fePointLight") }}</li> + <li>{{ SVGElement("feSpotLight") }}</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("text") }}</li> + <li>{{ SVGElement("use") }}</li> + <li>{{ SVGElement("mask") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("tspan") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/y/index.html b/files/zh-cn/web/svg/attribute/y/index.html new file mode 100644 index 0000000000..2ea6d9fe33 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/y/index.html @@ -0,0 +1,77 @@ +--- +title: 'y' +slug: Web/SVG/Attribute/y +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/y +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性在用户坐标系统中标识了一个y轴坐标。本坐标的确切效果依赖于每个元素。大多数时候，它体现了引用元素的矩形区域的左上角的y轴坐标（请阅读每个元素的文档以了解例外情况）。</p> + +<p>如果没有指定这个属性，效果相当于值被设置为<strong>0</strong>，除了<a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter" title="此页面仍未被本地化, 期待您的翻译!"><code><filter></code></a>元素以及<a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/mask" title="在 SVG 中，你可以定义任意其他图形对象 或者 <g> 元素作为一个透明的遮罩层和当前元素合成. mask 元素用于定义这样的遮罩层. 一个遮罩层引用mask元素属性."><code><mask></code></a>元素；这两个元素的<code><font face="Consolas, Liberation Mono, Courier, monospace">y</font></code>默认值为<strong>-10%</strong>。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#AltGlyphElementYAttribute" title="http://www.w3.org/TR/SVG/text.html#AltGlyphElementYAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/interact.html#CursorElementYAttribute" title="http://www.w3.org/TR/SVG/interact.html#CursorElementYAttribute">SVG 1.1 (2nd Edition): cursor element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#fePointLightYAttribute" title="http://www.w3.org/TR/SVG/filters.html#fePointLightYAttribute">SVG 1.1 (2nd Edition): fePointLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#feSpotLightYAttribute" title="http://www.w3.org/TR/SVG/filters.html#feSpotLightYAttribute">SVG 1.1 (2nd Edition): feSpotLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterElementYAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterElementYAttribute">SVG 1.1 (2nd Edition): filter element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementYAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementYAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#GlyphRefElementYAttribute" title="http://www.w3.org/TR/SVG/text.html#GlyphRefElementYAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementYAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementYAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementYAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementYAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementYAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementYAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementYAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementYAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextElementYAttribute" title="http://www.w3.org/TR/SVG/text.html#TextElementYAttribute">SVG 1.1 (2nd Edition): text element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementYAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementYAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveYAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveYAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementYAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementYAttribute">SVG 1.1 (2nd Edition): mask element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TSpanElementYAttribute" title="http://www.w3.org/TR/SVG/text.html#TSpanElementYAttribute">SVG 1.1 (2nd Edition): tspan element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","coordinate") }}</p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>y</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">滤镜元素</a> »</li> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("fePointLight") }}</li> + <li>{{ SVGElement("feSpotLight") }}</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("text") }}</li> + <li>{{ SVGElement("use") }}</li> + <li>{{ SVGElement("mask") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("tspan") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/文本锚点/index.html b/files/zh-cn/web/svg/attribute/文本锚点/index.html new file mode 100644 index 0000000000..7a71281230 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/文本锚点/index.html @@ -0,0 +1,95 @@ +--- +title: text-anchor +slug: Web/SVG/Attribute/文本锚点 +tags: + - 可缩放矢量图形 + - 可缩放矢量图形 属性 +translation_of: Web/SVG/Attribute/text-anchor +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>文本锚点属性被用来描述该文本与所给点的对齐方式 (开头、中间、末尾对齐) 。</p> + +<p>文本锚点属性被运用到每个 {{ SVGElement("text") }} 元素的独立文本块上。 每个文本块有一个初始的当前文本位置，一个来源于 {{ SVGElement("text") }} 元素的{{ SVGAttr("x") }}和{{ SVGAttr("y") }}属性在当前上下文的用户坐标系中所对应的点，任何 一个{{ SVGElement("tspan") }}、{{SVGElement("tref") }}、{{ SVGElement("altGlyph") }} 元素的 {{ SVGAttr("x") }} 或者 {{ SVGAttr("y") }} 属性值都明确指向了文本块里第一个被呈现的字符，或者是决定了{{ SVGElement("textPath") }}元素的当前文本位置的初始值。</p> + +<p>作为一个描述性的属性，它也可以直接用作css样式的性质（style属性的值）。</p> + +<h2 id="使用方法">使用方法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>呈现属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td>start | middle | end | <strong title="this is the default value">inherit</strong></td> + </tr> + <tr> + <th scope="row">可动画化</th> + <td>是</td> + </tr> + <tr> + <th scope="row">标准文件</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty" title="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>start</dt> + <dd>所呈现的字符对齐方式为：文本字符串的开始位置即当前文本的初始位置.对于拉丁文在其通常文本排列方向，这就相当于左对齐. 对于脚本像希伯来语和阿拉伯语这类自右向左排列的文字来说，这相当于右对齐. 对于亚洲某些垂直走向的文本来说，这相当于向上对齐。</dd> + <dt>middle</dt> + <dd>所呈现的字符对齐方式为：文本字符串的中间位置即当前文本的初始位置. (对于按路径排列的文本，会从概念上首先将其文本排列在一条直线上，确定该串中点位置后，然再将该文本映射到路径上，并且将之前确定的中点放置在当前文本的位置上 )</dd> + <dt>end</dt> + <dd>所呈现的字符对齐方式为：文本字符串的末尾即当前文本的初始位置.对于拉丁语通常的文字走向来说，这就相当于右对齐. 对于像希伯来语和阿拉伯语这类将文字自右向左排列的脚本来说，这相当于左对齐.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><?xml version="1.0"?> +<svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <!-- Materialisation of anchors --> + <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" /> + + + <!-- Anchors in action --> + <text text-anchor="start" + x="60" y="40">A</text> + + <text text-anchor="middle" + x="60" y="75">A</text> + + <text text-anchor="end" + x="60" y="110">A</text> + + <!-- Materialisation of anchors --> + <circle cx="60" cy="40" r="3" fill="red" /> + <circle cx="60" cy="75" 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></pre> + +<p><strong>Live sample</strong></p> + +<p>{{ EmbedLiveSample('Example','120','120') }}</p> + +<h2 id="元素">元素</h2> + +<p> </p> + +<p>以下元素可以运用文本锚点属性：</p> + +<p> </p> + +<ul> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#TextContent">Text content elements</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/样式/index.html b/files/zh-cn/web/svg/attribute/样式/index.html new file mode 100644 index 0000000000..6d9669c5c5 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/样式/index.html @@ -0,0 +1,32 @@ +--- +title: SVG样式属性 +slug: Web/SVG/Attribute/样式 +translation_of: Web/SVG/Attribute/Styling +--- +<p>SVG样式属性是所有可以在任何SVG元素上指定以应用CSS样式效果的属性。</p> + +<div class="index"> +<ul> + <li><a href="#attr-class"><code>class</code></a></li> + <li><a href="#attr-style"><code>style</code></a></li> +</ul> +</div> + +<h2 id="属性">属性</h2> + +<dl> + <dt id="attr-class">{{SVGAttr('class')}}</dt> + <dd>给一个元素分配一个类名称或者设置类名。它跟 HTML中的{{htmlattrxref('class')}}属性具有同样的功能。<br> + <small><em>Value</em>: 任何可用的ID字符; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-style">{{SVGAttr('style')}}</dt> + <dd>它指定元素的样式信息。它跟HTML中 {{htmlattrxref('style')}}属性具有相同的功能。<br> + <small><em>Value</em>:任何可用的ID字符; <em>Animatable</em>: <strong>No</strong></small> + <p> </p> + </dd> +</dl> + +<h2 id="浏览器支持">浏览器支持</h2> + +<div class="hidden">此页面上的兼容性表有结构化数据产生。如果你想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 和发送给我们一个请求。</div> + +<p>{{Compat("svg.attributes.style")}}</p> |