diff options
Diffstat (limited to 'files/zh-cn/web/svg/element')
81 files changed, 7823 insertions, 0 deletions
diff --git a/files/zh-cn/web/svg/element/a/index.html b/files/zh-cn/web/svg/element/a/index.html new file mode 100644 index 0000000000..f8c97e0f44 --- /dev/null +++ b/files/zh-cn/web/svg/element/a/index.html @@ -0,0 +1,120 @@ +--- +title: a +slug: Web/SVG/Element/a +tags: + - SVG + - SVG容器 + - 元素 +translation_of: Web/SVG/Element/a +--- +<div>{{SVGRef}}</div> + +<p>使用 SVG 的锚元素 (<a>) 定义一个超链接。</p> + +<p>由于这个元素和 <a href="/en-US/docs/Web/HTML/Element/a">HTML 的 <a> 标签</a> 使用了相同的标签名，当使用 CSS 或 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector">querySelector</a> 选择"a"时，可能应用到错误的元素上。 可以尝试使用 </code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@namespace"><code>@namespace</code>规则</a> 来区分两者</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><svg width="140" height="30" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG" + target="_blank"> + <rect height="30" width="120" y="0" x="0" rx="15"/> + <text fill="white" text-anchor="middle" + y="21" x="60">SVG on MDN</text> + </a> + +</svg></pre> + +<p>示例结果:</p> + +<p>{{EmbedLiveSample("示例",170,60)}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#XLink" title="SVG/Attribute#XLink">Xlink属性</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{SVGAttr("xlink:show")}}</li> + <li>{{SVGAttr("xlink:actuate")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> + <li>{{SVGAttr("target")}}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en-US/docs/DOM/SVGAElement" title="DOM/SVGAElement">SVGAElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('9.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/docs/SVG/Compatibility_sources" title="SVG/Compatibility sources">这些资源</a>。</p> + +<p>{{note("No browser supports the full XLink set.")}}</p> diff --git a/files/zh-cn/web/svg/element/altglyph/index.html b/files/zh-cn/web/svg/element/altglyph/index.html new file mode 100644 index 0000000000..f9c25d6c68 --- /dev/null +++ b/files/zh-cn/web/svg/element/altglyph/index.html @@ -0,0 +1,115 @@ +--- +title: altGlyph +slug: Web/SVG/Element/altGlyph +tags: + - SVG + - SVG文本内容 + - 元素 + - 参考 +translation_of: Web/SVG/Element/altGlyph +--- +<div>{{SVGRef}}</div> + +<p><code>altGlyph</code>元素允许符号的复杂选区，用来呈现它的子字符数据。</p> + +<h2 id="使用上下文">使用上下文</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en-US/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en-US/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en-US/SVG/Attribute#XLink">XLink属性</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{SVGAttr("x")}}</li> + <li>{{SVGAttr("y")}}</li> + <li>{{SVGAttr("dx")}}</li> + <li>{{SVGAttr("dy")}}</li> + <li>{{SVGAttr("rotate")}}</li> + <li>{{SVGAttr("glyphRef")}}</li> + <li>{{SVGAttr("format")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en-US/docs/Web/API/SVGAltGlyphElement">SVGAltGlyphElement</a></code> 接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop('2.0')}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera('10.6')}}</td> + <td>{{CompatSafari('4.0')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile('2.0')}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatOperaMobile('11.0')}}</td> + <td>{{CompatSafari('4.0')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 部分支持，请看<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=456286">bug 456286</a> 以及<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=571808">bug 571808</a>.</p> + +<p>该表格基于<a href="/en-US/SVG/Compatibility_sources">这些资源</a>。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{SVGElement("tspan")}}</li> + <li>{{SVGElement("glyph")}}</li> + <li>{{SVGElement("altGlyphDef")}}</li> +</ul> + +<p>{{SVGRef}}</p> diff --git a/files/zh-cn/web/svg/element/altglyphdef/index.html b/files/zh-cn/web/svg/element/altglyphdef/index.html new file mode 100644 index 0000000000..5bbdcf1198 --- /dev/null +++ b/files/zh-cn/web/svg/element/altglyphdef/index.html @@ -0,0 +1,45 @@ +--- +title: altGlyphDef +slug: Web/SVG/Element/altGlyphDef +tags: + - SVG + - SVG文本内容 + - 元素 + - 参考 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/altGlyphDef +--- +<div>{{SVGRef}}</div> + +<p><code>altGlyphDef</code>元素定义了一个表达字形的替代物。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<p><em>无</em></p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGAltGlyphDefElement" title="en/DOM/SVGAltGlyphDefElement">SVGAltGlyphDefElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("altGlyphDef") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/altglyphitem/index.html b/files/zh-cn/web/svg/element/altglyphitem/index.html new file mode 100644 index 0000000000..3df73becf0 --- /dev/null +++ b/files/zh-cn/web/svg/element/altglyphitem/index.html @@ -0,0 +1,45 @@ +--- +title: altGlyphItem +slug: Web/SVG/Element/altGlyphItem +tags: + - SVG + - SVG文本内容 + - 元素 + - 参考 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/altGlyphItem +--- +<div>{{SVGRef}}</div> + +<p><code>altGlyphItem</code>元素利用{{ SVGElement("altGlyph") }}元素提供了一组候选符号替换。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<p><em>无</em></p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGAltGlyphItemElement" title="en/DOM/SVGAltGlyphItemElement">SVGAltGlyphItemElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("altGlyphDef") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/animate/index.html b/files/zh-cn/web/svg/element/animate/index.html new file mode 100644 index 0000000000..3151843fe0 --- /dev/null +++ b/files/zh-cn/web/svg/element/animate/index.html @@ -0,0 +1,145 @@ +--- +title: animate +slug: Web/SVG/Element/animate +tags: + - SVG + - SVG动画 + - 元素 +translation_of: Web/SVG/Element/animate +--- +<div>{{SVGRef}}</div> + +<p>动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。</p> + +<pre class="brush: css"><code>html,body,svg { height:100%; margin:0; padding:0; }</code></pre> + +<pre class="brush: html"><code><svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> + <rect width="10" height="10"> + <animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" /> + </rect> +</svg></code></pre> + +<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationEvent" title="SVG/Attribute#AnimationEvent">动画事件属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#XLink" title="SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationAttributeTarget" title="SVG/Attribute#AnimationAttributeTarget">动画属性目标属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationTiming" title="SVG/Attribute#AnimationTiming">动画定时属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationValue" title="SVG/Attribute#AnimationValue">动画值属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationAddition" title="SVG/Attribute#AnimationAddition">动画累加属性</a> »</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{SVGAttr("attributeName")}}</li> + <li>{{SVGAttr("attributeType")}}</li> + <li>{{SVGAttr("from")}}</li> + <li>{{SVGAttr("to")}}</li> + <li>{{SVGAttr("dur")}}</li> + <li>{{SVGAttr("repeatCount")}}</li> +</ul> + +<h2 id="用法">用法</h2> + +<p>该元素实现了 {{domxref("SVGAnimateElement")}} 接口</p> + +<p>该元素实现了<code><a href="/en-US/docs/DOM/SVGAnimateElement" title="DOM/SVGAElement">SVGAnimateElement</a></code> 接口。</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.</p> + +<p>Consider providing a mechanism for pausing or disabling animation, as well as using the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> to create a complimentary experience for users who have expressed a preference for no animated experiences.</p> + +<ul> + <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article</a></li> + <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li> + <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="规范">规范</h2> + +<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", "#AnimateElement", "<animate>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#AnimateElement", "<animate>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome('2.0')}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>9.0</td> + <td>{{CompatSafari('4.0')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>9.5</td> + <td>{{CompatSafari('4.0')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/docs/SVG/Compatibility_sources" title="SVG/Compatibility sources">这些资源</a>。</p> diff --git a/files/zh-cn/web/svg/element/animatecolor/index.html b/files/zh-cn/web/svg/element/animatecolor/index.html new file mode 100644 index 0000000000..a9ca7d2387 --- /dev/null +++ b/files/zh-cn/web/svg/element/animatecolor/index.html @@ -0,0 +1,146 @@ +--- +title: animateColor +slug: Web/SVG/Element/animateColor +tags: + - SVG + - SVG动画 + - 元素 + - 需要兼容性表 +translation_of: Web/SVG/Element/animateColor +--- +<div>{{SVGRef}}{{deprecated_header}}</div> + +<div class="warning"> +<p>该元素在SVG1.1 第二版中不建议使用，在将来的SVG版本中可能被移除。它提供的功能，在{{ SVGElement("animate") }}元素中都可用，而且不能在火狐或Internet Explorer中实现。作者必须使用{{ SVGElement("animate") }}元素代替它。</p> +</div> + +<p><strong><code><animateColor> </code></strong>SVG元素指定了一个颜色随着时间的变换。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationEvent" title="en/SVG/Attribute#AnimationEvent">动画事件属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationAttributeTarget" title="en/SVG/Attribute#AnimationAttributeTarget">动画属性目标属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">动画定时属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationValue" title="en/SVG/Attribute#AnimationValue">动画值属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationAddition" title="en/SVG/Attribute#AnimationAddition">动画累加属性</a> »</li> + <li><a>{{SVGAttr("externalResourcesRequired")}}</a> »</li> +</ul> + +<h3 id="特定属性">特定属性</h3> + +<ul> + <li>{{SVGAttr("by")}}</li> + <li>{{SVGAttr("from")}}</li> + <li>{{SVGAttr("to")}}</li> +</ul> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>This element implements the {{domxref("SVGAnimateColorElement")}} interface.</p> + +<h2 id="Example">Example</h2> + +<h3 id="SVG">SVG</h3> + +<pre><code><svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> + <circle cx="60" cy="60" r="50"> + <animateColor attributeName="fill" attributeType="XML" + from="black" to="red" dur="6s" repeatCount="indefinite"/> + </circle> +</svg></code></pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", 120, 120)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<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", "animate.html#AnimateColorElement", "<animateColor>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{SVGElement("animate")}}</li> +</ul> + +<p> </p> + +<h2 id="sect1"> </h2> + +<ul> +</ul> + +<h3 id="sect2"> </h3> diff --git a/files/zh-cn/web/svg/element/animatemotion/index.html b/files/zh-cn/web/svg/element/animatemotion/index.html new file mode 100644 index 0000000000..7a19383d02 --- /dev/null +++ b/files/zh-cn/web/svg/element/animatemotion/index.html @@ -0,0 +1,101 @@ +--- +title: animateMotion +slug: Web/SVG/Element/animateMotion +tags: + - SVG + - SVG动画 + - 元素 +translation_of: Web/SVG/Element/animateMotion +--- +<div>{{SVGRef}}</div> + +<p><code><animateMotion></code> 元素定义了一个元素如何沿着运动路径进行移动。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>为了复用一个已经定义的路径，就有必要使用一个 {{SVGElement("mpath")}} 元素嵌入到 <code><animateMotion></code> 中，而不是使用 {{SVGAttr("path")}}。</p> +</div> + +<pre class="brush: css">html,body,svg { height:100%; margin: 0; padding: 0; display:block; }</pre> + +<pre class="brush: xml"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <path fill="none" stroke="lightgrey" + d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" /> + + <circle r="5" fill="red"> + <animateMotion dur="10s" repeatCount="indefinite" + path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" /> + </circle> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="Global_属性">Global 属性</h3> + +<ul> + <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationEvent" title="en/SVG/Attribute#AnimationEvent">动画事件属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">动画定时属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationValue" title="en/SVG/Attribute#AnimationValue">动画值属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#AnimationAddition" title="en/SVG/Attribute#AnimationAddition">An动画累加属性</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("calcMode") }}</li> + <li>{{ SVGAttr("path") }}</li> + <li>{{ SVGAttr("keyPoints") }}</li> + <li>{{ SVGAttr("rotate") }}</li> + <li>{{ SVGAttr("origin") }}</li> +</ul> + +<h2 id="DOM接口">DOM接口</h2> + +<p>该元素实现了<code><a href="/en-US/docs/DOM/SVGAnimateMotionElement" title="en/DOM/SVGAnimateMotionElement">SVGAnimateMotionElement</a>接口。</code></p> + +<h2 id="规范">规范</h2> + +<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", "#AnimateMotionElement", "<animateMotion>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("svg.elements.animateMotion")}}</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{ SVGElement("mpath") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/animatetransform/index.html b/files/zh-cn/web/svg/element/animatetransform/index.html new file mode 100644 index 0000000000..4526c79b86 --- /dev/null +++ b/files/zh-cn/web/svg/element/animatetransform/index.html @@ -0,0 +1,68 @@ +--- +title: animateTransform +slug: Web/SVG/Element/animateTransform +tags: + - SVG + - SVG动画 + - 元素 + - 需要兼容性表 +translation_of: Web/SVG/Element/animateTransform +--- +<div>{{SVGRef}}</div> + +<p><code>animateTransform</code>元素变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</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" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink" > + + <polygon points="60,30 90,90 30,90"> + <animateTransform attributeName="transform" + attributeType="XML" + type="rotate" + from="0 60 70" + to="360 60 70" + dur="10s" + repeatCount="indefinite"/> + </polygon> +</svg></pre> + +<p><strong>示例输出</strong></p> + +<p>{{ EmbedLiveSample('Example','120','120') }}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional processing attributes" title="en-US/docs/Web/SVG/Attribute#Conditional processing attributes">条件处理属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core attributes" title="en-US/docs/Web/SVG/Attribute#Core attributes">核心属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation event attributes" title="en-US/docs/Web/SVG/Attribute#Animation event attributes">动画事件属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Xlink attributes" title="en-US/docs/Web/SVG/Attribute#Xlink attributes">Xlink属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation attribute target attributes" title="en-US/docs/Web/SVG/Attribute#Animation attribute target attributes">动画属性目标属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation timing attributes" title="en-US/docs/Web/SVG/Attribute#Animation timing attributes">动画定时属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation value attributes" title="en-US/docs/Web/SVG/Attribute#Animation value attributes">动画值属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation addition attributes" title="en-US/docs/Web/SVG/Attribute#Animation addition attributes">A动画累加属性</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("by") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("to") }}</li> + <li>{{ SVGAttr("type") }}</li> +</ul> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>该元素实现了<code><a href="/en-US/docs/DOM/SVGAnimateTransformElement" title="en/DOM/SVGAnimateTransformElement">SVGAnimateTransformElement</a></code>接口。</p> diff --git a/files/zh-cn/web/svg/element/circle/index.html b/files/zh-cn/web/svg/element/circle/index.html new file mode 100644 index 0000000000..1e4f2f8624 --- /dev/null +++ b/files/zh-cn/web/svg/element/circle/index.html @@ -0,0 +1,113 @@ +--- +title: circle +slug: Web/SVG/Element/circle +tags: + - SVG + - SVG图形 + - 'http://svgjs.com' + - 元素 + - 参考 +translation_of: Web/SVG/Element/circle +--- +<div>{{SVGRef}}</div> + +<p> <strong><code><circle> </code></strong><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> 元素<span style="font-size: 14px; line-height: 1.5;">是一个SVG的基本形状，用来创建圆,基于一个圆心和一个半径。</span></p> + +<h2 id="用法" style="line-height: 30px; font-size: 2.14285714285714rem;">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: xml"><?xml version="1.0"?> +<svg viewBox="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <circle cx="60" cy="60" r="50"/> +</svg></pre> + +<p>» <a href="https://mdn.mozillademos.org/files/7707/circle2.svg" title="https://developer.mozilla.org/files/3252/circle.svg">circle.svg</a></p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">展现属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> + <li>{{ SVGAttr("r") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了 {{ domxref("SVGCircleElement") }} 接口.</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th scope="col">功能</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <td>基本支持</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/docs/Web/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">这些资源</a>。</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{ SVGElement("ellipse") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/clippath/index.html b/files/zh-cn/web/svg/element/clippath/index.html new file mode 100644 index 0000000000..4922bd1e93 --- /dev/null +++ b/files/zh-cn/web/svg/element/clippath/index.html @@ -0,0 +1,115 @@ +--- +title: clipPath +slug: Web/SVG/Element/clipPath +tags: + - Clip + - SVG + - 元素 + - 参考 +translation_of: Web/SVG/Element/clipPath +--- +<div>{{SVGRef}}</div> + +<p><a href="/zh-CN/docs/Web/SVG">SVG</a> 元素 <strong><code><clipPath></code></strong> 定义一条剪切路径，可作为其他元素的 {{SVGAttr("clip-path")}} 属性的值。</p> + +<p>剪切路径限制了图形的可见范围。从概念上来说，如果图形超出了当前剪切路径所包围的区域，那么超出部分将不会绘制。</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100"> + <clipPath id="myClip"> + <!-- + 圆圈外的所有东西都会被裁剪掉，因此不可见。 + --> + <circle cx="40" cy="35" r="35" /> + </clipPath> + + <!-- 作为引用元素（英文原文：<code>for reference</code>）的黑色心形 --> + <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" /> + + <!-- + 和上述黑色心形形状相同的红色心形，剪切路径是上面定义的圆； + 红色心形只有在圆内的部分可见。 + --> + <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" /> +</svg></pre> + +<pre class="brush: css">/* 如果浏览器支持几何属性 r，可以加一点 css */ + +@keyframes openYourHeart {from {r: 0} to {r: 60px}} + +#myClip circle { + animation: openYourHeart 15s infinite; +}</pre> + +<p>{{EmbedLiveSample('Example', 100, 100)}}</p> +</div> + +<p>从概念上讲，剪切路径等于给引用元素设置了一个自定义的可视区域。因此，它虽然会影响一个元素的绘制，但不会影响这个元素本身的几何形状，比如被剪切元素（通过 {{SVGAttr("clip-path")}} 属性引用了 <code><clipPath></code> 的元素及其子元素）的包围盒和没有被剪切时相同。</p> + +<p>默认情况下，{{cssxref("pointer-events")}} 不会在被剪切掉的区域（不可见的区域）内触发。举个例子，如果一个半径为10的圆形被剪切成半径为5的圆形，那么这个圆在半径为5以外的区域不会收到“click”事件。</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt>{{SVGAttr("clipPathUnits")}}</dt> + <dd>为 <code><clipPath></code> 元素的内容定义坐标系。<br> + <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code> ; <em>Default value</em>: <code>userSpaceOnUse</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<h3 id="全局属性">全局属性</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}</small></dd> + <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> +</dl> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</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", "#ClipPathElement", "<clipPath>")}}</td> + <td>{{Spec2("CSS Masks")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "masking.html#EstablishingANewClippingPath", "<clipPath>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.elements.clipPath")}}</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>Other clipping and masking SVG elements: {{SVGElement("mask")}}</li> + <li>Some CSS properties: {{cssxref("clip-path")}}, {{cssxref("pointer-events")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/color-profile/index.html b/files/zh-cn/web/svg/element/color-profile/index.html new file mode 100644 index 0000000000..9fb38a05bb --- /dev/null +++ b/files/zh-cn/web/svg/element/color-profile/index.html @@ -0,0 +1,95 @@ +--- +title: color-profile +slug: Web/SVG/Element/color-profile +tags: + - SVG + - 元素 + - 参考 + - 需要示例 +translation_of: Web/SVG/Element/color-profile +--- +<div>{{SVGRef}}</div> + +<p>该元素允许描述用于图像的颜色配置文件。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{SVGAttr("local")}}</li> + <li>{{SVGAttr("name")}}</li> + <li>{{SVGAttr("rendering-intent")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en-US/docs/DOM/SVGColorProfileElement">SVGColorProfileElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/docs/Web/SVG/Compatibility_sources">这些资源</a>。</p> diff --git a/files/zh-cn/web/svg/element/cursor/index.html b/files/zh-cn/web/svg/element/cursor/index.html new file mode 100644 index 0000000000..4ee16be84e --- /dev/null +++ b/files/zh-cn/web/svg/element/cursor/index.html @@ -0,0 +1,80 @@ +--- +title: cursor +slug: Web/SVG/Element/cursor +tags: + - SVG + - 元素 + - 参考 + - 废弃 + - 需要示例 +translation_of: Web/SVG/Element/cursor +--- +<div>{{SVGRef}}{{Deprecated_Header}}</div> + +<div class="blockIndicator note"><strong>Note:</strong> 尽量使用 CSS 中的 {{cssxref("cursor")}} 属性来替换该属性。 + + +</div> + +<p><code>cursor</code>元素可以用来定义独立于平台的自定义指针。要想定义独立于平台的指针，建议先创建一个PNG图象，然后定义一个引用该PNG图像的<code>cursor</code>元素，并在图像内部标识指针头（亦即，热点）的精确位置。</p> + +<p>建议使用PNG格式，因为它支持利用alpha通道定义透明并遮罩的能力。如果使用了别的图像格式，这个格式必须支持透明度遮罩的定义（两个选项：提供一个明确的alpha通道或者使用一个特殊的像素色以表示透明度）。如果能够确定透明度遮罩，遮罩确定了指针的形状；否则，指针将是一个不透明的矩形。通常地，别的像素信息（例如，R、G、B通道）定义了指针没有被遮罩到的部分的颜色，注意指针一般至少包含两个颜色，这样在大多数背景中都能看到指针。</p> + +<h2 id="用法">用法</h2> + +<p>{{SVGInfo}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{SVGAttr("x")}}</li> + <li>{{SVGAttr("y")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en-US/docs/DOM/SVGCursorElement">SVGCursorElement</a></code>接口。</p> + +<h2 id="规范">规范</h2> + +<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#CursorElement", "<cursor>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Replaced {{SVGAttr("xlink:href")}} by {{SVGAttr("href")}} attribute.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "interact.html#CursorElement", "<cursor>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("svg.elements.cursor")}}</p> diff --git a/files/zh-cn/web/svg/element/defs/index.html b/files/zh-cn/web/svg/element/defs/index.html new file mode 100644 index 0000000000..775eefd896 --- /dev/null +++ b/files/zh-cn/web/svg/element/defs/index.html @@ -0,0 +1,114 @@ +--- +title: defs +slug: Web/SVG/Element/defs +tags: + - SVG + - SVG容器 + - 元素 +translation_of: Web/SVG/Element/defs +--- +<div>{{SVGRef}}</div> + +<p>SVG 允许我们定义以后需要重复使用的图形元素。 建议把所有需要再次使用的引用元素定义在<code>defs</code>元素里面。这样做可以增加SVG内容的易读性和可访问性。 在<code>defs</code>元素中定义的图形元素不会直接呈现。 你可以在你的视口的任意地方利用 {{ SVGElement("use") }}元素呈现这些元素。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: xml"><svg width="80px" height="30px" viewBox="0 0 80 30" + xmlns="http://www.w3.org/2000/svg"> + + <defs> + <linearGradient id="Gradient01"> + <stop offset="20%" stop-color="#39F" /> + <stop offset="90%" stop-color="#F3F" /> + </linearGradient> + </defs> + + <rect x="10" y="10" width="60" height="10" + fill="url(#Gradient01)" /> +</svg> +</pre> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<p><em>没有专有属性</em></p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>这个元素实现了<code><a href="/en/DOM/SVGDefsElement" title="en/DOM/SVGDefsElement">SVGDefsElement</a></code> 接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">这些资源</a>.</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{ SVGElement("use") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/desc/index.html b/files/zh-cn/web/svg/element/desc/index.html new file mode 100644 index 0000000000..d5d778eea5 --- /dev/null +++ b/files/zh-cn/web/svg/element/desc/index.html @@ -0,0 +1,92 @@ +--- +title: desc +slug: Web/SVG/Element/desc +tags: + - SVG + - SVG描述 + - 元素 +translation_of: Web/SVG/Element/desc +--- +<div>{{SVGRef}}</div> + +<p>SVG绘画中的每个容器元素或图形元素都可以提供一个<code>desc</code>描述性字符串，这些描述只是纯文本的。如果当前的SVG文档片段在视媒体中呈现，desc元素不会呈现为图形的一部分。替代性提词既可以看到也可以听到，它显示了desc元素但是不会显示路径元素或者别的图形元素。<code>desc</code>元素提升了SVG文档的可访问性。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<p><em>没有专有属性</em></p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGDescElement" title="en/DOM/SVGDescElement">SVGDescElement</a>接口。</code></p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("title") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/ellipse/index.html b/files/zh-cn/web/svg/element/ellipse/index.html new file mode 100644 index 0000000000..6c68c8c711 --- /dev/null +++ b/files/zh-cn/web/svg/element/ellipse/index.html @@ -0,0 +1,109 @@ +--- +title: ellipse +slug: Web/SVG/Element/ellipse +tags: + - SVG + - SVG图形 + - 元素 + - 参考 +translation_of: Web/SVG/Element/ellipse +--- +<div>{{SVGRef}}</div> + +<p><code>ellipse</code>元素是一个SVG基本形状，用来创建一个椭圆，基于一个中心坐标以及它们的<code>x</code>半径和<code>y</code>半径。</p> + +<p>椭圆不能指定精确的椭圆倾向（假设，举个例子，你想画一个45度角倾斜的椭圆），但是可以利用{{ SVGAttr("transform") }}属性实现旋转。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<p>» <a href="https://developer.mozilla.org/files/3253/ellipse.svg" title="https://developer.mozilla.org/files/3253/ellipse.svg">ellipse.svg</a></p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/SVG/Attribute#ConditionalProccessing" title="en-US/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en-US/SVG/Attribute#Core" title="en-US/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/SVG/Attribute#GraphicalEvent" title="en-US/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en-US/SVG/Attribute#Presentation" title="en-US/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en-US/DOM/SVGEllipseElement" title="en-US/DOM/SVGEllipseElement">SVGEllipseElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th scope="col">功能</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <td>基本支持</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/SVG/Compatibility_sources" title="en-US/SVG/Compatibility sources">这些资源</a>。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("circle") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/feblend/index.html b/files/zh-cn/web/svg/element/feblend/index.html new file mode 100644 index 0000000000..e1d9820348 --- /dev/null +++ b/files/zh-cn/web/svg/element/feblend/index.html @@ -0,0 +1,90 @@ +--- +title: feBlend +slug: Web/SVG/Element/feBlend +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 +translation_of: Web/SVG/Element/feBlend +--- +<div>{{SVGRef}}</div> + +<p><code>feBlend</code>滤镜把两个对象组合在一起，使它们受特定的混合模式控制。这类似于图像编辑软件中混合两个图层。该模式由属性{{ SVGAttr("mode") }}定义。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("in2") }}</li> + <li>{{ SVGAttr("mode") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEBlendElement" title="en/DOM/SVGFEBlendElement">SVGFEBlendElement</a></code>接口。</p> + +<h2 id="示例_2">示例</h2> + +<h3 id="SVG">SVG</h3> + +<pre><code><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="spotlight"> + <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" + flood-color="green" flood-opacity="1"/> + <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/> + </filter> + </defs> + + <image xlink:href="/files/6457/mdn_logo_only_color.png" + x="10%" y="10%" width="80%" height="80%" + style="filter:url(#spotlight);"/> +</svg></code></pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", 200, 200)}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</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("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG tutorial: Filter effects</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fecolormatrix/index.html b/files/zh-cn/web/svg/element/fecolormatrix/index.html new file mode 100644 index 0000000000..dc671a8202 --- /dev/null +++ b/files/zh-cn/web/svg/element/fecolormatrix/index.html @@ -0,0 +1,146 @@ +--- +title: feColorMatrix +slug: Web/SVG/Element/feColorMatrix +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 +translation_of: Web/SVG/Element/feColorMatrix +--- +<div>{{SVGRef}}</div> + +<p>该滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值(一个表示为[红,绿,蓝,透明度] 的矢量) 都经过<a class="external" href="http://en.wikipedia.org/wiki/Matrix_multiplication" title="http://en.wikipedia.org/wiki/Matrix_multiplication">矩阵乘法 (matrix multiplated</a>) 计算出的新颜色。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 150 360" + preserveAspectRatio="xMidYMid meet" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <text x="70" y="50">Reference</text> + <g> + <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> + <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> + <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> + </g> + + + <text x="70" y="120">matrix</text> + + <filter id="colorMeMatrix"> + <feColorMatrix in="SourceGraphic" + type="matrix" + values="0 0 0 0 0 + 1 1 1 1 0 + 0 0 0 0 0 + 0 0 0 1 0" /> + </filter> + + <g filter="url(#colorMeMatrix)"> + <circle cx="30" cy="100" r="20" fill="blue" fill-opacity="0.5" /> + <circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" /> + <circle cx="40" cy="120" r="20" fill="red" fill-opacity="0.5" /> + </g> + + + <text x="70" y="190">saturate</text> + + <filter id="colorMeSaturate"> + <feColorMatrix in="SourceGraphic" + type="saturate" + values="0.2" /> + </filter> + + <g filter="url(#colorMeSaturate)"> + <circle cx="30" cy="170" r="20" fill="blue" fill-opacity="0.5" /> + <circle cx="20" cy="190" r="20" fill="green" fill-opacity="0.5" /> + <circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" /> + </g> + + + <text x="70" y="260">hueRotate</text> + + <filter id="colorMeHueRotate"> + <feColorMatrix in="SourceGraphic" + type="hueRotate" + values="180" /> + </filter> + + <g filter="url(#colorMeHueRotate)"> + <circle cx="30" cy="240" r="20" fill="blue" fill-opacity="0.5" /> + <circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" /> + <circle cx="40" cy="260" r="20" fill="red" fill-opacity="0.5" /> + </g> + + + <text x="70" y="320">luminanceToAlpha</text> + + <filter id="colorMeLTA"> + <feColorMatrix in="SourceGraphic" + type="luminanceToAlpha" /> + </filter> + + <g filter="url(#colorMeLTA)"> + <circle cx="30" cy="310" r="20" fill="blue" fill-opacity="0.5" /> + <circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" /> + <circle cx="40" cy="330" r="20" fill="red" fill-opacity="0.5" /> + </g> +</svg></pre> + +<p>该示例渲染效果如下所示：</p> + +<p>{{EmbedLiveSample("Example",300,700,"/files/4371/test.png")}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("type") }}</li> + <li>{{ SVGAttr("values") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现 <code><a href="/en/DOM/SVGFEColorMatrixElement" title="en/DOM/SVGFEColorMatrixElement">SVGFEColorMatrixElement</a></code> 接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <li>{{ SVGElement("feBlend") }}</li> + <li>{{ SVGElement("feComponentTransfer") }}</li> + <li>{{ SVGElement("feComposite") }}</li> + <li>{{ SVGElement("feConvolveMatrix") }}</li> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feDisplacementMap") }}</li> + <li>{{ SVGElement("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG 教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fecomponenttransfer/index.html b/files/zh-cn/web/svg/element/fecomponenttransfer/index.html new file mode 100644 index 0000000000..0935e85fcb --- /dev/null +++ b/files/zh-cn/web/svg/element/fecomponenttransfer/index.html @@ -0,0 +1,139 @@ +--- +title: feComponentTransfer +slug: Web/SVG/Element/feComponentTransfer +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/feComponentTransfer +--- +<div>{{SVGRef}}</div> + +<p><strong><code><feComponentTransfer></code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a>滤镜基元对每个像素执行颜色分量的数据重映射.它允许进行像亮度调整,对比度调整,色彩平衡或阈值的操作.</p> + +<p>计算是使用非预乘色值进行执行的.(译者:什么是非预乘数据:非预乘数据可以理解为例如rgba(180,160,130,0.8))中的180,160,130,它们没有被除以255以及乘以透明度0.8而转化为0~1范围的值,当被除以255并且乘以0.8而转化为0~1范围中的值的预处理被称为premultiplied color value(预乘数据)).颜色值在每一个通道(R,G,B,A)中被分别修改然后输出,这些通道分别是 {{SVGElement("feFuncR")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, and {{SVGElement("feFuncA")}}.</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("in") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEComponentTransferElement" title="en/DOM/SVGFEComponentTransferElement">SVGFEComponentTransferElement</a></code>接口。</p> + +<h2 id="示例_2">示例</h2> + +<h3 id="SVG">SVG</h3> + +<pre><code><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> + <defs> + <linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0"> + <stop offset="0" stop-color="#ff0000"></stop> + <stop offset="0.2" stop-color="#ffff00"></stop> + <stop offset="0.4" stop-color="#00ff00"></stop> + <stop offset="0.6" stop-color="#00ffff"></stop> + <stop offset="0.8" stop-color="#0000ff"></stop> + <stop offset="1" stop-color="#800080"></stop> + </linearGradient> + <filter id="identity" x="0" y="0" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="identity"></feFuncR> + <feFuncG type="identity"></feFuncG> + <feFuncB type="identity"></feFuncB> + <feFuncA type="identity"></feFuncA> + </feComponentTransfer> + </filter> + <filter id="table" x="0" y="0" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 0 1 1"></feFuncR> + <feFuncG type="table" tableValues="1 1 0 0"></feFuncG> + <feFuncB type="table" tableValues="0 1 1 0"></feFuncB> + </feComponentTransfer> + </filter> + <filter id="linear" x="0" y="0" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="linear" slope="0.5" intercept="0"></feFuncR> + <feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG> + <feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB> + </feComponentTransfer> + </filter> + <filter id="gamma" x="0" y="0" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="gamma" amplitude="4" exponent="7" offset="0"></feFuncR> + <feFuncG type="gamma" amplitude="4" exponent="4" offset="0"></feFuncG> + <feFuncB type="gamma" amplitude="4" exponent="1" offset="0"></feFuncB> + </feComponentTransfer> + </filter> + </defs> + + <g font-weight="bold"> + <text x="0" y="5%">Default</text> + <rect x="0" y="8%" width="100%" height="20"></rect> + <text x="0" y="26%">Identity</text> + <rect x="0" y="29%" width="100%" height="20" style="filter:url(#identity)"></rect> + <text x="0" y="47%">Table lookup</text> + <rect x="0" y="50%" width="100%" height="20" style="filter:url(#table)"></rect> + <text x="0" y="68%">Linear function</text> + <rect x="0" y="71%" width="100%" height="20" style="filter:url(#linear)"></rect> + <text x="0" y="89%">Gamma function</text> + <rect x="0" y="92%" width="100%" height="20" style="filter:url(#gamma)"></rect> + </g> +</svg></code></pre> + +<h3 id="CSS">CSS</h3> + +<pre><code>rect { + fill: url(#rainbow); +}</code></pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", "100%", 340)}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("feBlend") }}</li> + <li>{{ SVGElement("feColorMatrix") }}</li> + <li>{{ SVGElement("feComposite") }}</li> + <li>{{ SVGElement("feConvolveMatrix") }}</li> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feDisplacementMap") }}</li> + <li>{{ SVGElement("feFlood") }}</li> + <li>{{ SVGElement("feFuncA") }}</li> + <li>{{ SVGElement("feFuncB") }}</li> + <li>{{ SVGElement("feFuncG") }}</li> + <li>{{ SVGElement("feFuncR") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fecomposite/index.html b/files/zh-cn/web/svg/element/fecomposite/index.html new file mode 100644 index 0000000000..1ff37ba996 --- /dev/null +++ b/files/zh-cn/web/svg/element/fecomposite/index.html @@ -0,0 +1,84 @@ +--- +title: feComposite +slug: Web/SVG/Element/feComposite +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/feComposite +--- +<div>{{SVGRef}}</div> + +<p>该滤镜执行两个输入图像的智能像素组合，在图像空间中使用以下Porter-Duff合成操作之一：over、in、atop、xor。另外，还可以应用一个智能组件<code>arithmetic操作（结果被压到[0,1]范围内）。</code></p> + +<p><code><font face="Open Sans, Arial, sans-serif">该</font>arithmetic操作对组合来自</code>{{SVGElement("feDiffuseLighting")}}滤镜和来自{{SVGElement("feSpecularLighting")}} 滤镜的<code>输出以及组合纹理数据很有用</code>。如果选择了<code>arithmetic</code>操作，每个结果像素都要经过下面的方程式的计算：</p> + +<pre>result = k1*i1*i2 + k2*i1 + k3*i2 + k4 +</pre> + +<p>在这里：</p> + +<ul> + <li><code>i1</code>和<code>i2标</code>示了输入图像相应的像素通道值，分别映射到{{SVGAttr("in")}}和{{SVGAttr("in2")}}。</li> + <li><code>k1、k2、k3</code>和<code>k4标示了同名的属性值。</code></li> +</ul> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("in2") }}</li> + <li>{{ SVGAttr("operator") }}</li> + <li>{{ SVGAttr("k1") }}</li> + <li>{{ SVGAttr("k2") }}</li> + <li>{{ SVGAttr("k3") }}</li> + <li>{{ SVGAttr("k4") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFECompositeElement" title="en/DOM/SVGFECompositeElement">SVGFECompositeElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <li>{{ SVGElement("feBlend") }}</li> + <li>{{ SVGElement("feColorMatrix") }}</li> + <li>{{ SVGElement("feComponentTransfer") }}</li> + <li>{{ SVGElement("feConvolveMatrix") }}</li> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feDisplacementMap") }}</li> + <li>{{ SVGElement("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/feconvolvematrix/index.html b/files/zh-cn/web/svg/element/feconvolvematrix/index.html new file mode 100644 index 0000000000..71c5c79859 --- /dev/null +++ b/files/zh-cn/web/svg/element/feconvolvematrix/index.html @@ -0,0 +1,129 @@ +--- +title: feConvolveMatrix +slug: Web/SVG/Element/feConvolveMatrix +tags: + - SVG + - SVG滤镜 + - 元素 + - 滤镜 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/feConvolveMatrix +--- +<div>{{SVGRef}}</div> + +<p><code>feConvolveMatrix</code>元素应用了一个矩阵卷积滤镜效果。一个卷积在输入图像中把像素与邻近像素组合起来制作出结果图像。通过卷积可以实现各种成像操作，包括模糊、边缘检测、锐化、压花和斜角。</p> + +<p>一个矩阵卷积是基于一个 nxm矩阵(卷积内核)，用来描述如何将给定的输入图像的像素值与相邻像素合并为一个输出像素值。每个输出像素是由应用的内核矩阵来处理相应的源像素和它的相邻像素。基本的卷积公式是对给定的每个像素进行如下应用:</p> + +<p>COLORX,Y = ( <br> + SUM I=0 to [<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementOrderAttribute" rel="nofollow noreferrer">orderY</a>-1] { <br> + SUM J=0 to [<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementOrderAttribute" rel="nofollow noreferrer">orderX</a>-1] { <br> + SOURCE X-<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementTargetXAttribute" rel="nofollow noreferrer">targetX</a>+J, Y-<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementTargetYAttribute" rel="nofollow noreferrer">targetY</a>+I * <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementKernelMatrixAttribute" rel="nofollow noreferrer">kernelMatrix</a><a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementOrderAttribute" rel="nofollow noreferrer">orderX</a>-J-1, <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementOrderAttribute" rel="nofollow noreferrer">orderY</a>-I-1 <br> + } <br> + } <br> + ) / <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementDivisorAttribute" rel="nofollow noreferrer">divisor</a> + <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementBiasAttribute" rel="nofollow noreferrer">bias</a> * ALPHAX,Y </p> + +<p>其中“orderX”和"orderY"表示<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementOrderAttribute" rel="nofollow noreferrer">‘order’</a> 的x和y值，"targetX"表示<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementTargetXAttribute" rel="nofollow noreferrer">‘targetX’</a> 属性的值，"targetY"表示<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementTargetYAttribute" rel="nofollow noreferrer">‘targetY’</a> 的值，"kernelMatrix" 表示 <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementKernelMatrixAttribute" rel="nofollow noreferrer">‘kernelMatrix’</a>属性的值，"divisor"表示 <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementDivisorAttribute" rel="nofollow noreferrer">‘divisor’</a>属性的值， "bias" 表示 <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementBiasAttribute" rel="nofollow noreferrer">‘bias’</a>属性的值。</p> + +<p>注意上述公式中内核矩阵的值是被旋转180度后被使用，这是为了符合许多计算机图形学教科书中的理论。</p> + +<p>这里举例说明,假设你有一个5x5像素的输入图像，其中一个颜色通道的色值如下：</p> + +<pre><code> 0 20 40 235 235 + 100 120 140 235 235 + 200 220 240 235 235 + 225 225 255 255 255 + 225 225 255 255 255 +</code></pre> + +<p>你定义一个3*3卷积核如下：</p> + +<pre><code> 1 2 3 + 4 5 6 + 7 8 9 +</code></pre> + +<p>让我们专注于图像的第二行和第二列的颜色值（源像素值为120）。最简单的情况（输入图像的像素网格与内核像素网格完全对齐）,<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementDivisorAttribute" rel="nofollow noreferrer">‘divisor’</a>, <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementTargetXAttribute" rel="nofollow noreferrer">‘targetX’</a> 和<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementTargetYAttribute" rel="nofollow noreferrer">‘targetY’</a>都是默认值，那么输出色值将是:</p> + +<pre><code>(9* 0 + 8* 20 + 7* 40 + +6*100 + 5*120 + 4*140 + +3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)</code></pre> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h3 id="SVG">SVG</h3> + +<pre><code><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="emboss"> + <feConvolveMatrix + kernelMatrix="3 0 0 + 0 0 0 + 0 0 -3"/> + </filter> + </defs> + + <image xlink:href="/files/12668/MDN.svg" x="0" y="0" + height="200" width="200" style="filter:url(#emboss);" /> +</svg></code></pre> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("order") }}</li> + <li>{{ SVGAttr("kernelMatrix") }}</li> + <li>{{ SVGAttr("divisor") }}</li> + <li>{{ SVGAttr("bias") }}</li> + <li>{{ SVGAttr("targetX") }}</li> + <li>{{ SVGAttr("targetY") }}</li> + <li>{{ SVGAttr("edgeMode") }}</li> + <li>{{ SVGAttr("kernelUnitLength") }}</li> + <li>{{ SVGAttr("preserveAlpha") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEConvolveMatrixElement" title="en/DOM/SVGFEConvolveMatrixElement">SVGFEConvolveMatrixElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <li>{{ SVGElement("feBlend") }}</li> + <li>{{ SVGElement("feColorMatrix") }}</li> + <li>{{ SVGElement("feComponentTransfer") }}</li> + <li>{{ SVGElement("feComposite") }}</li> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feDisplacementMap") }}</li> + <li>{{ SVGElement("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fediffuselighting/index.html b/files/zh-cn/web/svg/element/fediffuselighting/index.html new file mode 100644 index 0000000000..0165839c35 --- /dev/null +++ b/files/zh-cn/web/svg/element/fediffuselighting/index.html @@ -0,0 +1,128 @@ +--- +title: feDiffuseLighting +slug: Web/SVG/Element/feDiffuseLighting +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 +translation_of: Web/SVG/Element/feDiffuseLighting +--- +<div>{{SVGRef}}</div> + +<p>滤镜光照一个图像，使用alpha通道作为隆起映射。结果图像，是一个RGBA不透明图像，取决于光的颜色、光的位置以及输入隆起映射的表面几何形状。</p> + +<p>滤镜制造的光映射可以与一个纹理图像组合，使用{{SVGElement("feComposite")}}滤镜的多重<code>arithmetic操作。在应用纹理图案之前合加多个光映射可以模拟多重光源。</code></p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<p>以下示例演示了一个圆上的<code>feDiffuseLighting</code>元素的效果，演示了每种可用的光源，光的方向来自左上角。</p> + +<pre class="brush: html"><svg width="440" height="140" xmlns="http://www.w3.org/2000/svg"> + + <!-- No light is applied --> + <text text-anchor="middle" x="60" y="22">No Light</text> + <circle cx="60" cy="80" r="50" fill="green" /> + + <!-- the light source is a fePointLight element --> + <text text-anchor="middle" x="170" y="22">fePointLight</text> + <filter id="lightMe1"> + <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white"> + <fePointLight x="150" y="60" z="20" /> + </feDiffuseLighting> + + <feComposite in="SourceGraphic" in2="light" + operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> + </filter> + + <circle cx="170" cy="80" r="50" fill="green" filter="url(#lightMe1)" /> + + <!-- the light source is a feDistantLight element --> + <text text-anchor="middle" x="280" y="22">feDistantLight</text> + <filter id="lightMe2"> + <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white"> + <feDistantLight azimuth="240" elevation="20"/> + </feDiffuseLighting> + + <feComposite in="SourceGraphic" in2="light" + operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> + </filter> + + <circle cx="280" cy="80" r="50" fill="green" filter="url(#lightMe2)" /> + + <!-- the light source is a feSpotLight source --> + <text text-anchor="middle" x="390" y="22">feSpotLight</text> + <filter id="lightMe3"> + <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white"> + <feSpotLight x="360" y="5" z="30" limitingConeAngle="20" + pointsAtX="390" pointsAtY="80" pointsAtZ="0"/> + </feDiffuseLighting> + + <feComposite in="SourceGraphic" in2="light" + operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> + </filter> + + <circle cx="390" cy="80" r="50" fill="green" filter="url(#lightMe3)" /> +</svg></pre> + +<p>预计的呈现：</p> + +<p><img alt="Expected rendering for the example" src="/files/4447/feDiffuseLighting.png" style="height: 120px; width: 430px;"></p> + +<p>实时呈现：</p> + +<p>{{EmbedLiveSample("Example",470,170)}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("surfaceScale") }}</li> + <li>{{ SVGAttr("diffuseConstant") }}</li> + <li>{{ SVGAttr("kernelUnitLength") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEDiffuseLightingElement" title="en/DOM/SVGFEDiffuseLightingElement">SVGFEDiffuseLightingElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("feBlend") }}</li> + <li>{{ SVGElement("feColorMatrix") }}</li> + <li>{{ SVGElement("feComponentTransfer") }}</li> + <li>{{ SVGElement("feComposite") }}</li> + <li>{{ SVGElement("feConvolveMatrix") }}</li> + <li>{{ SVGElement("feDisplacementMap") }}</li> + <li>{{ SVGElement("feDistantLight") }}</li> + <li>{{ SVGElement("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("fePointLight") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feSpotLight") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fedisplacementmap/index.html b/files/zh-cn/web/svg/element/fedisplacementmap/index.html new file mode 100644 index 0000000000..4626687fab --- /dev/null +++ b/files/zh-cn/web/svg/element/fedisplacementmap/index.html @@ -0,0 +1,70 @@ +--- +title: feDisplacementMap +slug: Web/SVG/Element/feDisplacementMap +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/feDisplacementMap +--- +<div>{{SVGRef}}</div> + +<p>映射置换滤镜，该滤镜用来自图像中从{{SVGAttr("in2")}}到空间的像素值置换图像从{{SVGAttr("in")}}到空间的像素值。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("in2") }}</li> + <li>{{ SVGAttr("scale") }}</li> + <li>{{ SVGAttr("xChannelSelector") }}</li> + <li>{{ SVGAttr("yChannelSelector") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEDisplacementMapElement" title="en/DOM/SVGFEDisplacementMapElement">SVGFEDisplacementMapElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <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("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fedistantlight/index.html b/files/zh-cn/web/svg/element/fedistantlight/index.html new file mode 100644 index 0000000000..5c06db0309 --- /dev/null +++ b/files/zh-cn/web/svg/element/fedistantlight/index.html @@ -0,0 +1,54 @@ +--- +title: feDistantLight +slug: Web/SVG/Element/feDistantLight +tags: + - SVG + - SVG光源 + - 元素 + - 参考 + - 滤镜 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/feDistantLight +--- +<div>{{SVGRef}}</div> + +<p>该滤镜定义了一个距离光源，可以用在灯光滤镜{{SVGElement("feDiffuseLighting")}}元素或{{SVGElement("feSpecularLighting")}}元素的内部。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("azimuth") }}</li> + <li>{{ SVGAttr("elevation") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEDistantLightElement" title="en/DOM/SVGFEDistantLightElement">SVGFEDistantLightElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("fePointLight") }}</li> + <li>{{ SVGElement("feSpotLight") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/feflood/index.html b/files/zh-cn/web/svg/element/feflood/index.html new file mode 100644 index 0000000000..5b77ba2792 --- /dev/null +++ b/files/zh-cn/web/svg/element/feflood/index.html @@ -0,0 +1,68 @@ +--- +title: feFlood +slug: Web/SVG/Element/feFlood +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/feFlood +--- +<div>{{SVGRef}}</div> + +<p>该滤镜用{{ SVGAttr("flood-color") }}元素定义的颜色和{{ SVGAttr("flood-opacity") }}元素定义的不透明度填充了滤镜子区域。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("flood-color") }}</li> + <li>{{ SVGAttr("flood-opacity") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEFloodElement" title="en/DOM/SVGFEFloodElement">SVGFEFloodElement</a>接口。</code></p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("set") }}</li> + <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("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fefunca/index.html b/files/zh-cn/web/svg/element/fefunca/index.html new file mode 100644 index 0000000000..79819b4249 --- /dev/null +++ b/files/zh-cn/web/svg/element/fefunca/index.html @@ -0,0 +1,75 @@ +--- +title: feFuncA +slug: Web/SVG/Element/feFuncA +tags: + - NeedsExample + - SVG +translation_of: Web/SVG/Element/feFuncA +--- +<div>{{SVGRef}}</div> + +<p><a href="/zh-CN/docs/Web/SVG">SVG</a> 滤镜 <strong><code><feFuncA></code></strong> 为它的父元素 {{SVGElement("feComponentTransfer")}} 的输入图形的透明度（alpha）组件定义了变换函数。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">核心属性</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Transfer_function_attributes">Transfer function attributes</a></li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<p class="syntaxbox"><em>无</em></p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了 {{domxref("SVGFEFuncAElement")}} 接口。</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("Filters 1.0", "#feFuncAElement", "<feFuncA>")}}</td> + <td>{{Spec2("Filters 1.0")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "filters.html#feFuncAElement", "<feFuncA>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.elements.feFuncA")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <li>{{ SVGElement("feComponentTransfer")}}</li> + <li>{{ SVGElement("feFuncR") }}</li> + <li>{{ SVGElement("feFuncB") }}</li> + <li>{{ SVGElement("feFuncG") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects">SVG 教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fefuncb/index.html b/files/zh-cn/web/svg/element/fefuncb/index.html new file mode 100644 index 0000000000..cb87c55819 --- /dev/null +++ b/files/zh-cn/web/svg/element/fefuncb/index.html @@ -0,0 +1,53 @@ +--- +title: feFuncB +slug: Web/SVG/Element/feFuncB +tags: + - SVG + - SVG滤镜 + - 元素 + - 参考 + - 需要兼容性表 + - 需要内容 + - 需要示例 +translation_of: Web/SVG/Element/feFuncB +--- +<div>{{SVGRef}}</div> + +<p>该滤镜为它的父{{SVGElement("feComponentTransfer")}}元素的输入图形的蓝色成分定义了变换函数。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Transfer_function_attributes" title="en/SVG/Attribute#Transfer_function_attributes">变换函数属性</a> »</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEFuncBElement" title="en/DOM/SVGFEFuncBElement">SVGFEFuncBElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <li>{{ SVGElement("feComponentTransfer") }}</li> + <li>{{ SVGElement("feFuncA") }}</li> + <li>{{ SVGElement("feFuncR") }}</li> + <li>{{ SVGElement("feFuncG") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fefuncg/index.html b/files/zh-cn/web/svg/element/fefuncg/index.html new file mode 100644 index 0000000000..aefbda78dd --- /dev/null +++ b/files/zh-cn/web/svg/element/fefuncg/index.html @@ -0,0 +1,53 @@ +--- +title: feFuncG +slug: Web/SVG/Element/feFuncG +tags: + - SVG + - SVG滤镜 + - 元素 + - 参考 + - 需要兼容性表 + - 需要内容 + - 需要示例 +translation_of: Web/SVG/Element/feFuncG +--- +<div>{{SVGRef}}</div> + +<p>该滤镜为它的父{{SVGElement("feComponentTransfer")}}元素的输入图形的绿色成分定义了变换函数。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Transfer_function_attributes" title="en/SVG/Attribute#TransferFunction">变换函数属性</a> »</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEFuncGElement" title="en/DOM/SVGFEFuncGElement">SVGFEFuncGElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <li>{{ SVGElement("feComponentTransfer") }}</li> + <li>{{ SVGElement("feFuncA") }}</li> + <li>{{ SVGElement("feFuncR") }}</li> + <li>{{ SVGElement("feFuncB") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fefuncr/index.html b/files/zh-cn/web/svg/element/fefuncr/index.html new file mode 100644 index 0000000000..f639b2b317 --- /dev/null +++ b/files/zh-cn/web/svg/element/fefuncr/index.html @@ -0,0 +1,53 @@ +--- +title: feFuncR +slug: Web/SVG/Element/feFuncR +tags: + - SVG + - SVG滤镜 + - 元素 + - 参考 + - 需要兼容性表 + - 需要内容 + - 需要示例 +translation_of: Web/SVG/Element/feFuncR +--- +<div>{{SVGRef}}</div> + +<p>该滤镜为它的父{{SVGElement("feComponentTransfer")}}元素的输入图形的红色成分定义了变换函数。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Transfer_function_attributes" title="en/SVG/Attribute#Transfer_function_attributes">变换函数属性</a> »</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEFuncRElement" title="en/DOM/SVGFEFuncRElement">SVGFEFuncRElement</a>接口。</code></p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <li>{{ SVGElement("feComponentTransfer") }}</li> + <li>{{ SVGElement("feFuncA") }}</li> + <li>{{ SVGElement("feFuncB") }}</li> + <li>{{ SVGElement("feFuncG") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fegaussianblur/index.html b/files/zh-cn/web/svg/element/fegaussianblur/index.html new file mode 100644 index 0000000000..1644bc3d1e --- /dev/null +++ b/files/zh-cn/web/svg/element/fegaussianblur/index.html @@ -0,0 +1,107 @@ +--- +title: feGaussianBlur +slug: Web/SVG/Element/feGaussianBlur +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 +translation_of: Web/SVG/Element/feGaussianBlur +--- +<div>{{SVGRef}}</div> + +<p>该滤镜对输入图像进行高斯模糊，属性{{ SVGAttr("stdDeviation") }}中指定的数量定义了钟形。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h3 id="简单示例">简单示例</h3> + +<pre class="brush: html"><svg width="230" height="120" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <filter id="blurMe"> + <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> + </filter> + + <circle cx="60" cy="60" r="50" fill="green" /> + + <circle cx="170" cy="60" r="50" fill="green" + filter="url(#blurMe)" /> +</svg></pre> + +<p>该示例的结果如下所示：</p> + +<p>{{EmbedLiveSample("Simple_example",232,124,"/files/4227/feGaussianBlur.png")}}</p> + +<h3 id="投影示例">投影示例</h3> + +<pre class="brush: html"><svg width="120" height="120" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <filter id="dropShadow"> + <feGaussianBlur in="SourceAlpha" stdDeviation="3" /> + <feOffset dx="2" dy="4" /> + <feMerge> + <feMergeNode /> + <feMergeNode in="SourceGraphic" /> + </feMerge> + </filter> + + <circle cx="60" cy="60" r="50" fill="green" + filter="url(#dropShadow)" /> +</svg></pre> + +<p>该示例的结果如下所示：</p> + +<p>{{EmbedLiveSample("Drop_shadow_example",125,124,"/files/4229/feGaussianBlur-dropshadow.png")}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("stdDeviation") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEGaussianBlurElement" title="en/DOM/SVGFEGaussianBlurElement">SVGFEGaussianBlurElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <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("feFlood") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en-US/docs/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/feimage/index.html b/files/zh-cn/web/svg/element/feimage/index.html new file mode 100644 index 0000000000..03cdc4120f --- /dev/null +++ b/files/zh-cn/web/svg/element/feimage/index.html @@ -0,0 +1,170 @@ +--- +title: feImage +slug: Web/SVG/Element/feImage +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/feImage +--- +<div>{{SVGRef}}</div> + +<p><code>feImage滤镜从外部来源取得图像数据，并提供像素数据作为输出（意味着如果外部来源是一个SVG图像，这个图像将被栅格化。）</code></p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">XLink属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了{{domxref("SVGFEImageElement")}}接口。</p> + +<h2 id="示例">示例</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="image"> + <feImage xlink:href="/files/6457/mdn_logo_only_color.png"/> + </filter> + </defs> + + <rect x="10%" y="10%" width="80%" height="80%" + style="filter:url(#image);"/> +</svg></pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Example", 200, 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("Filters 1.0", "#feImageElement", "<feImage>")}}</td> + <td>{{Spec2("Filters 1.0")}}</td> + <td>添加了 {{SVGAttr("href")}} 属性并弃用{{SVGAttr("xlink:href")}}。 添加了 {{SVGAttr("crossorigin")}} 属性。</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "filters.html#feImageElement", "<feImage>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop('2.0')}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatOpera('9.0')}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 部分支持，请参阅 {{bug(455986)}}.</p> + +<p>图表是基于 <a href="/en-US/SVG/Compatibility_sources">these sources</a> 的。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> + <li>{{ SVGElement("set") }}</li> + <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("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/femerge/index.html b/files/zh-cn/web/svg/element/femerge/index.html new file mode 100644 index 0000000000..5276ecace4 --- /dev/null +++ b/files/zh-cn/web/svg/element/femerge/index.html @@ -0,0 +1,64 @@ +--- +title: feMerge +slug: Web/SVG/Element/feMerge +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 + - 需要内容 + - 需要示例 +translation_of: Web/SVG/Element/feMerge +--- +<div>{{SVGRef}}</div> + +<p><code>feMerge</code>滤镜允许同时应用滤镜效果而不是按顺序应用滤镜效果。利用{{ SVGAttr("result") }}存储别的滤镜的输出可以实现这一点，然后在一个 {{ SVGElement("feMergeNode") }}子元素中访问它。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="Global_属性">Global 属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<p><em>无</em></p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEMergeElement" title="en/DOM/SVGFEMergeElement">SVGFEMergeElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <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("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMergeNode") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/femergenode/index.html b/files/zh-cn/web/svg/element/femergenode/index.html new file mode 100644 index 0000000000..aaefe41c54 --- /dev/null +++ b/files/zh-cn/web/svg/element/femergenode/index.html @@ -0,0 +1,50 @@ +--- +title: feMergeNode +slug: Web/SVG/Element/feMergeNode +tags: + - SVG + - SVG滤镜 + - 元素 + - 参考 + - 需要兼容性表 + - 需要内容 + - 需要示例 +translation_of: Web/SVG/Element/feMergeNode +--- +<div>{{SVGRef}}</div> + +<p><code>feMergeNode元素拿另一个滤镜的结果，让它的父</code>{{ SVGElement("feMerge") }}元素处理。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("in") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEMergeNodeElement" title="en/DOM/SVGFEMergeNodeElement">SVGFEMergeNodeElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/femorphology/index.html b/files/zh-cn/web/svg/element/femorphology/index.html new file mode 100644 index 0000000000..ffcdb546ec --- /dev/null +++ b/files/zh-cn/web/svg/element/femorphology/index.html @@ -0,0 +1,69 @@ +--- +title: feMorphology +slug: Web/SVG/Element/feMorphology +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 + - 需要内容 + - 需要示例 +translation_of: Web/SVG/Element/feMorphology +--- +<div>{{SVGRef}}</div> + +<p>该滤镜用来侵蚀或扩张输入的图像。它在增肥或瘦身效果方面特别有用。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("operator") }}</li> + <li>{{ SVGAttr("radius") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEMorphologyElement" title="en/DOM/SVGFEMorphologyElement">SVGFEMorphologyElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <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("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/feoffset/index.html b/files/zh-cn/web/svg/element/feoffset/index.html new file mode 100644 index 0000000000..1bdd235af1 --- /dev/null +++ b/files/zh-cn/web/svg/element/feoffset/index.html @@ -0,0 +1,69 @@ +--- +title: feOffset +slug: Web/SVG/Element/feOffset +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 + - 需要内容 + - 需要示例 +translation_of: Web/SVG/Element/feOffset +--- +<div>{{SVGRef}}</div> + +<p>该输入图像作为一个整体，在属性{{ SVGAttr("dx") }}和属性{{ SVGAttr("dy") }}的值指定了它的偏移量。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("dx") }}</li> + <li>{{ SVGAttr("dy") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEOffsetElement" title="en/DOM/SVGFEOffsetElement">SVGFEOffsetElement</a>接口。</code></p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <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("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fepointlight/index.html b/files/zh-cn/web/svg/element/fepointlight/index.html new file mode 100644 index 0000000000..aa99d875bc --- /dev/null +++ b/files/zh-cn/web/svg/element/fepointlight/index.html @@ -0,0 +1,53 @@ +--- +title: fePointLight +slug: Web/SVG/Element/fePointLight +tags: + - SVG + - SVG光源 + - 元素 + - 参考 + - 需要兼容性表 + - 需要内容 + - 需要示例 +translation_of: Web/SVG/Element/fePointLight +--- +<div>{{SVGRef}}</div> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("z") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEPointLightElement" title="en/DOM/SVGFEPointLightElement">SVGFEPointLightElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feDistantLight") }}</li> + <li>{{ SVGElement("feSpotLight") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fespecularlighting/index.html b/files/zh-cn/web/svg/element/fespecularlighting/index.html new file mode 100644 index 0000000000..ea7a31f6ba --- /dev/null +++ b/files/zh-cn/web/svg/element/fespecularlighting/index.html @@ -0,0 +1,74 @@ +--- +title: feSpecularLighting +slug: Web/SVG/Element/feSpecularLighting +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 + - 需要内容 + - 需要示例 +translation_of: Web/SVG/Element/feSpecularLighting +--- +<div>{{SVGRef}}</div> + +<p>该滤镜照亮一个源图形，使用alpha通道作为隆起映射。该结果图像是一个基于光色的RGBA图象。该光照计算遵守标准<a href="http://en.wikipedia.org/wiki/Phong_reflection_model" rel="external" title="http://en.wikipedia.org/wiki/Phong_reflection_model">冯氏照明模式</a>的镜面组件。结果图像依赖于光色、光的位置以及输入隆起映射的表面几何形状。光照计算的结果是叠加的。该滤镜假定观察者在X方向无穷远处。</p> + +<p>该滤镜制作了一个图像，图像包含光照计算的镜面反射部分。如此一个映射是为了与纹理相结合，使用算术{{SVGElement("feComposite")}}方法的叠加。利用在应用到纹理图像前添加多个光映射，可以模拟多个光源。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("surfaceScale") }}</li> + <li>{{ SVGAttr("specularConstant") }}</li> + <li>{{ SVGAttr("specularExponent") }}</li> + <li>{{ SVGAttr("kernelUnitLength") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFESpecularLightingElement" title="en/DOM/SVGFESpecularLightingElement">SVGFESpecularLightingElement</a>接口。</code></p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <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("feDistantLight") }}</li> + <li>{{ SVGElement("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("fePointLight") }}</li> + <li>{{ SVGElement("feSpotLight") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fespotlight/index.html b/files/zh-cn/web/svg/element/fespotlight/index.html new file mode 100644 index 0000000000..c58ee0fe76 --- /dev/null +++ b/files/zh-cn/web/svg/element/fespotlight/index.html @@ -0,0 +1,59 @@ +--- +title: feSpotLight +slug: Web/SVG/Element/feSpotLight +tags: + - SVG + - 元素 + - 参考 + - 需要兼容性表 + - 需要内容 + - 需要示例 +translation_of: Web/SVG/Element/feSpotLight +--- +<div>{{SVGRef}}</div> + +<p><code>feSpotLight</code>元素是一种光源元素，用于SVG文件。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("z") }}</li> + <li>{{ SVGAttr("pointsAtX") }}</li> + <li>{{ SVGAttr("pointsAtY") }}</li> + <li>{{ SVGAttr("pointsAtZ") }}</li> + <li>{{ SVGAttr("specularExponent") }}</li> + <li>{{ SVGAttr("limitingConeAngle") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFESpotLightElement" title="en/DOM/SVGFESpotLightElement">SVGFESpotLightElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feDistantLight") }}</li> + <li>{{ SVGElement("fePointLight") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/fetile/index.html b/files/zh-cn/web/svg/element/fetile/index.html new file mode 100644 index 0000000000..026af929c7 --- /dev/null +++ b/files/zh-cn/web/svg/element/fetile/index.html @@ -0,0 +1,67 @@ +--- +title: feTile +slug: Web/SVG/Element/feTile +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 + - 需要内容 + - 需要示例 +translation_of: Web/SVG/Element/feTile +--- +<div>{{SVGRef}}</div> + +<p>输入图像是平铺的，结果用来填充目标。它的效果近似于一个{{ SVGElement("pattern") }}图案对象。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("in") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFETileElement" title="en/DOM/SVGFETileElement">SVGFETileElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <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("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/feturbulence/index.html b/files/zh-cn/web/svg/element/feturbulence/index.html new file mode 100644 index 0000000000..0a467873e0 --- /dev/null +++ b/files/zh-cn/web/svg/element/feturbulence/index.html @@ -0,0 +1,71 @@ +--- +title: feTurbulence +slug: Web/SVG/Element/feTurbulence +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 + - 需要内容 + - 需要示例 +translation_of: Web/SVG/Element/feTurbulence +--- +<div>{{SVGRef}}</div> + +<p>该滤镜利用Perlin噪声函数创建了一个图像。它实现了人造纹理比如说云纹、大理石纹的合成。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="Global_属性">Global 属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("baseFrequency") }}</li> + <li>{{ SVGAttr("numOctaves") }}</li> + <li>{{ SVGAttr("seed") }}</li> + <li>{{ SVGAttr("stitchTiles") }}</li> + <li>{{ SVGAttr("type") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFETurbulenceElement" title="en/DOM/SVGFETurbulenceElement">SVGFETurbulenceElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("set") }}</li> + <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("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/filter/index.html b/files/zh-cn/web/svg/element/filter/index.html new file mode 100644 index 0000000000..2ca6bf0792 --- /dev/null +++ b/files/zh-cn/web/svg/element/filter/index.html @@ -0,0 +1,165 @@ +--- +title: filter +slug: Web/SVG/Element/filter +tags: + - SVG + - 元素 + - 参考 +translation_of: Web/SVG/Element/filter +--- +<div>{{SVGRef}}</div> + +<p><code>filter</code>元素作用是作为原子滤镜操作的容器。它不能直接呈现。可以利用目标SVG元素上的{{ SVGAttr("filter") }}属性引用一个滤镜。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en-US/SVG/Attribute#XLink">XLink属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("filterRes") }}</li> + <li>{{ SVGAttr("filterUnits") }}</li> + <li>{{ SVGAttr("primitiveUnits") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="DOM接口">DOM接口</h2> + +<p>该元素实现了<code><a href="/en-US/DOM/SVGFilterElement">SVGFilterElement</a>接口。</code></p> + +<h2 id="示例：">示例：</h2> + +<h4 id="SVG">SVG</h4> + +<pre class="notranslate"><svg width="230" height="120" xmlns="http://www.w3.org/2000/svg"> + <filter id="blurMe"> + <feGaussianBlur stdDeviation="5"/> + </filter> + + <circle cx="60" cy="60" r="50" fill="green" /> + + <circle cx="170" cy="60" r="50" fill="green" + filter="url(#blurMe)" /> +</svg></pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("Example",232,124,"/files/4227/feGaussianBlur.png")}}</p> + +<h2 id="说明">说明</h2> + +<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", "#FilterElement", "<filter>")}}</td> + <td>{{Spec2("Filters 1.0")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "filters.html#FilterElement", "<filter>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('2.0') }}</td> + <td>{{ CompatIE('10.0') }}</td> + <td>9.0</td> + <td>{{ CompatSafari('3.0') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile('2.0') }}</td> + <td>{{CompatNo}}</td> + <td>9.5</td> + <td>{{ CompatSafari('3.0') }}[1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 在Webkit浏览器上存在<a href="https://bugs.webkit.org/show_bug.cgi?id=26389">一些问题</a>。</p> + +<p>该表格基于<a href="/en-US/SVG/Compatibility_sources">这些资源</a>。</p> + +<h2 id="参见">参见</h2> + +<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("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en-US/SVG/Tutorial/Filter_effects">SVG教程：滤镜效果</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/font-face-format/index.html b/files/zh-cn/web/svg/element/font-face-format/index.html new file mode 100644 index 0000000000..f760fe32ff --- /dev/null +++ b/files/zh-cn/web/svg/element/font-face-format/index.html @@ -0,0 +1,46 @@ +--- +title: font-face-format +slug: Web/SVG/Element/font-face-format +tags: + - SVG + - SVG字体 + - 元素 + - 参考 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/font-face-format +--- +<div>{{SVGRef}}</div> + +<p><code>font-face-format</code>元素描述了它的父{{ SVGElement("font-face-uri") }}元素引用的字体的类型。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("string") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFontFaceFormatElement" title="en/DOM/SVGFontFaceFormatElement">SVGFontFaceFormatElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("font-face-uri") }}</li> + <li><a href="/en/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG_Fonts">SVG tutorial: SVG fonts</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/font-face-name/index.html b/files/zh-cn/web/svg/element/font-face-name/index.html new file mode 100644 index 0000000000..6f6e2ab7b1 --- /dev/null +++ b/files/zh-cn/web/svg/element/font-face-name/index.html @@ -0,0 +1,46 @@ +--- +title: font-face-name +slug: Web/SVG/Element/font-face-name +tags: + - SVG + - SVG字体 + - 元素 + - 参考 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/font-face-name +--- +<div>{{SVGRef}}</div> + +<p><code>font-face-name</code>元素指向本地安装的字体副本，用字体名称识别。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGATTR("name") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该对象实现了<code><a href="/en/DOM/SVGFontFaceNameElement" title="en/DOM/SVGFontFaceNameElement">SVGFontFaceNameElement</a></code>接口。</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{ SVGElement("font-face-src") }}</li> + <li><a href="/en/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG_Fonts">SVG教程：SVG字体</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/font-face-src/index.html b/files/zh-cn/web/svg/element/font-face-src/index.html new file mode 100644 index 0000000000..40e4c5efdf --- /dev/null +++ b/files/zh-cn/web/svg/element/font-face-src/index.html @@ -0,0 +1,44 @@ +--- +title: font-face-src +slug: Web/SVG/Element/font-face-src +tags: + - SVG + - SVG字体 + - 元素 + - 参考 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/font-face-src +--- +<div>{{SVGRef}}</div> + +<p><code>font-face-src</code>元素相当于CSS规范中的@font-face属性。它可以作为{{ SVGElement("font-face-name") }}元素的容器使用，指向本地安装的字体副本，{{ SVGElement("font-face-uri") }}元素则是利用远程定义字体。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<p><em>无</em></p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFontFaceSrcElement" title="en/DOM/SVGFontFaceSrcElement">SVGFontFaceSrcElement</a></code>接口。</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{ SVGElement("font-face") }}</li> + <li><a href="/en/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG_Fonts">SVG教程：SVG字体</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/font-face-uri/index.html b/files/zh-cn/web/svg/element/font-face-uri/index.html new file mode 100644 index 0000000000..1990e68f96 --- /dev/null +++ b/files/zh-cn/web/svg/element/font-face-uri/index.html @@ -0,0 +1,47 @@ +--- +title: font-face-uri +slug: Web/SVG/Element/font-face-uri +tags: + - SVG + - SVG字体 + - 元素 + - 参考 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/font-face-uri +--- +<div>{{SVGRef}}</div> + +<p><code>font-face-uri</code>元素指向远程字义的当前字体。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">XLink属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFontFaceUriElement" title="en/DOM/SVGFontFaceUriElement">SVGFontFaceUriElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("font-face-src") }}</li> + <li><a href="/en/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG_Fonts">SVG教程：SVG字体</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/font-face/index.html b/files/zh-cn/web/svg/element/font-face/index.html new file mode 100644 index 0000000000..cfd35104f5 --- /dev/null +++ b/files/zh-cn/web/svg/element/font-face/index.html @@ -0,0 +1,74 @@ +--- +title: font-face +slug: Web/SVG/Element/font-face +tags: + - SVG字体 +translation_of: Web/SVG/Element/font-face +--- +<div>{{SVGRef}}</div> + +<p>font-face元素相当于(corresponds to )CSS的@font-face规则声明，font-face元素定义了一个字体的外部属性(a font's outer properties)。</p> + +<h2 id="使用上下文">使用上下文 </h2> + +<p>{{svginfo}}</p> + +<h2 id="例子">例子</h2> + +<h2 id="属性Attributes">属性Attributes</h2> + +<h3 id="全局属性Global_attributes">全局属性Global attributes</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> +</ul> + +<h3 id="特定属性Specific_attributes">特定属性Specific attributes</h3> + +<ul> + <li>{{ SVGAttr("font-family") }}</li> + <li>{{ SVGAttr("font-style") }}</li> + <li>{{ SVGAttr("font-variant") }}</li> + <li>{{ SVGAttr("font-weight") }}</li> + <li>{{ SVGAttr("font-stretch") }}</li> + <li>{{ SVGAttr("font-size") }}</li> + <li>{{ SVGAttr("unicode-range") }}</li> + <li>{{ SVGAttr("units-per-em") }}</li> + <li>{{ SVGAttr("panose-1") }}</li> + <li>{{ SVGAttr("stemv") }}</li> + <li>{{ SVGAttr("stemh") }}</li> + <li>{{ SVGAttr("slope") }}</li> + <li>{{ SVGAttr("cap-height") }}</li> + <li>{{ SVGAttr("x-height") }}</li> + <li>{{ SVGAttr("accent-height") }}</li> + <li>{{ SVGAttr("ascent") }}</li> + <li>{{ SVGAttr("descent") }}</li> + <li>{{ SVGAttr("widths") }}</li> + <li>{{ SVGAttr("bbox") }}</li> + <li>{{ SVGAttr("ideographic") }}</li> + <li>{{ SVGAttr("alphabetic") }}</li> + <li>{{ SVGAttr("mathematical") }}</li> + <li>{{ SVGAttr("hanging") }}</li> + <li>{{ SVGAttr("v-ideographic") }}</li> + <li>{{ SVGAttr("v-alphabetic") }}</li> + <li>{{ SVGAttr("v-mathematical") }}</li> + <li>{{ SVGAttr("v-hanging") }}</li> + <li>{{ SVGAttr("underline-position") }}</li> + <li>{{ SVGAttr("underline-thickness") }}</li> + <li>{{ SVGAttr("strikethrough-position") }}</li> + <li>{{ SVGAttr("strikethrough-thickness") }}</li> + <li>{{ SVGAttr("overline-position") }}</li> + <li>{{ SVGAttr("overline-thickness") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>这个元素实现了 <code><a href="/en/DOM/SVGFontFaceElement" title="en/DOM/SVGFontFaceElement">SVGFontFaceElement</a></code> 接口。</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("font-face-src") }}</li> + <li><a href="/en/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG_Fonts">SVG tutorial: SVG fonts</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/font/index.html b/files/zh-cn/web/svg/element/font/index.html new file mode 100644 index 0000000000..adb1dab0d3 --- /dev/null +++ b/files/zh-cn/web/svg/element/font/index.html @@ -0,0 +1,56 @@ +--- +title: font +slug: Web/SVG/Element/font +tags: + - SVG + - SVG字体 + - 元素 + - 参考 + - 需要兼容性表 +translation_of: Web/SVG/Element/font +--- +<div>{{SVGRef}}</div> + +<p><code>font</code>元素定义了一个用于文字布局的字体。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("horiz-origin-x") }}</li> + <li>{{ SVGAttr("horiz-origin-y") }}</li> + <li>{{ SVGAttr("horiz-adv-x") }}</li> + <li>{{ SVGAttr("vert-origin-x") }}</li> + <li>{{ SVGAttr("vert-origin-y") }}</li> + <li>{{ SVGAttr("vert-adv-y") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现 <code><a href="/en/DOM/SVGFontElement" title="en/DOM/SVGFontElement">SVGFontElement</a></code> 接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("font-face") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("text") }}</li> + <li><a href="/en/SVG/Tutorial/SVG_Fonts" title="en/SVG/Tutorial/SVG_Fonts">SVG教程：SVG 字体</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/foreignobject/index.html b/files/zh-cn/web/svg/element/foreignobject/index.html new file mode 100644 index 0000000000..139dec935a --- /dev/null +++ b/files/zh-cn/web/svg/element/foreignobject/index.html @@ -0,0 +1,121 @@ +--- +title: foreignObject +slug: Web/SVG/Element/foreignObject +tags: + - SVG + - 元素 + - 参考 +translation_of: Web/SVG/Element/foreignObject +--- +<div>{{SVGRef}}</div> + +<p><a href="/zh-CN/docs/Web/SVG">SVG</a>中的<strong><code><foreignObject></code></strong>元素允许包含来自不同的XML命名空间的元素。在浏览器的上下文中，很可能是XHTML / HTML。</p> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css notranslate">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[16,27] notranslate"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <style> + polygon { fill: black } + + div { + color: white; + font:18px serif; + height: 100%; + overflow: auto; + } + </style> + + <polygon points="5,5 195,10 185,185 10,195" /> + + <!-- Common use case: embed HTML text into SVG --> + <foreignObject x="20" y="20" width="160" height="160"> + <!-- + In the context of SVG embeded into HTML, the XHTML namespace could + be avoided, but it is mandatory in the context of an SVG document + --> + <div xmlns="http://www.w3.org/1999/xhtml"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Sed mollis mollis mi ut ultricies. Nullam magna ipsum, + porta vel dui convallis, rutrum imperdiet eros. Aliquam + erat volutpat. + </div> + </foreignObject> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> +</div> + +<h2 id="属性">属性</h2> + +<dl> + <dt>{{SVGAttr("height")}}</dt> + <dd>设置 foreignObject 的高度.<br> + <small>值得类型: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>默认值</em>: <code>auto</code>; <em>是否可设置动画</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("width")}}</dt> + <dd>设置 foreignObject 的宽度.<br> + <small>值得类型: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>默认值</em>: <code>auto</code>; <em>是否可设置动画</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("x")}}</dt> + <dd>设置 foreignObject 的 x 坐标.<br> + <small>值得类型: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>默认值</em>: <code>0</code>; <em>是否可设置动画</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("y")}}</dt> + <dd>设置 foreignObject 的 y 坐标.<br> + <small>值得类型: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>默认值</em>: <code>0</code>; <em>是否可设置动画</em>: <strong>yes</strong></small></dd> +</dl> + +<div class="note"> +<p>注意:从SVG2开始，x、y、宽度和高度都是几何属性，这意味着这些属性也可以用作该元素的CSS属性。</p> +</div> + +<h3 id="Global_attributes">Global attributes</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Event Attributes</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Event_Attributes">Document event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>Aria Attributes</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</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', 'embedded.html#ForeignObjectElement', '<foreignObject>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.elements.foreignObject")}}</p> diff --git a/files/zh-cn/web/svg/element/g/index.html b/files/zh-cn/web/svg/element/g/index.html new file mode 100644 index 0000000000..d75c11cc71 --- /dev/null +++ b/files/zh-cn/web/svg/element/g/index.html @@ -0,0 +1,107 @@ +--- +title: g +slug: Web/SVG/Element/g +tags: + - SVG + - SVG容器 + - 元素 + - 参考 +translation_of: Web/SVG/Element/g +--- +<div>{{SVGRef}}</div> + +<p>元素<code>g</code>是用来组合对象的容器。添加到<code>g</code>元素上的变换会应用到其所有的子元素上。添加到<code>g</code>元素的属性会被其所有的子元素继承。此外，<code>g</code>元素也可以用来定义复杂的对象，之后可以通过{{SVGElement("use")}}元素来引用它们。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html" style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none;"><svg width="100%" height="100%" viewBox="0 0 95 50" + xmlns="http://www.w3.org/2000/svg"> + <g stroke="green" fill="white" stroke-width="5"> + <circle cx="25" cy="25" r="15" /> + <circle cx="40" cy="25" r="15" /> + <circle cx="55" cy="25" r="15" /> + <circle cx="70" cy="25" r="15" /> + </g> +</svg> +</pre> + +<p>{{EmbedLiveSample("Example",220,130)}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<p><em>没有专有属性。</em></p> + +<h2 id="DOM接口">DOM接口</h2> + +<p>该元素实现了<code><a href="/en-US/docs/DOM/SVGGElement" title="DOM/SVGGElement">SVGGElement</a>的所有接口</code>.</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th scope="col">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('8.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/docs/SVG/Compatibility_sources" title="SVG/Compatibility sources">这些资源</a>。</p> diff --git a/files/zh-cn/web/svg/element/glyph/index.html b/files/zh-cn/web/svg/element/glyph/index.html new file mode 100644 index 0000000000..24d3d3fd29 --- /dev/null +++ b/files/zh-cn/web/svg/element/glyph/index.html @@ -0,0 +1,89 @@ +--- +title: glyph +slug: Web/SVG/Element/glyph +tags: + - SVG + - SVG文档内容 + - 元素 + - 参考 + - 需要兼容性表 +translation_of: Web/SVG/Element/glyph +--- +<div>{{SVGRef}}</div> + +<p>一个<code>glyph</code>元素定义了SVG字体中的一个独立的字形。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: xml"><?xml version="1.0" standalone="yes"?> +<svg width="400px" height="300px" version="1.1" + xmlns = 'http://www.w3.org/2000/svg'> +<!-- Example copied from http://www.w3.org/TR/SVG/fonts.html#GlyphElement --> + <defs> + + <font id="Font1" horiz-adv-x="1000"> + <font-face font-family="Super Sans" font-weight="bold" font-style="normal" + units-per-em="1000" cap-height="600" x-height="400" + ascent="700" descent="300" + alphabetic="0" mathematical="350" ideographic="400" hanging="500"> + <font-face-src> + <font-face-name name="Super Sans Bold"/> + </font-face-src> + </font-face> + + <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph> + <glyph unicode="!" horiz-adv-x="80" d="M0,0h200v200h-200z"></glyph> + <glyph unicode="@" d="M0,50l100,300l400,100z"></glyph> + + </font> + </defs> + <text x="100" y="100" + style="font-family: 'Super Sans', Helvetica, sans-serif; + font-weight: bold; font-style: normal">Text + using embe@dded font!</text> +</svg> + + +</pre> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("d") }}</li> + <li>{{ SVGAttr("horiz-adv-x") }}</li> + <li>{{ SVGAttr("vert-origin-x") }}</li> + <li>{{ SVGAttr("vert-origin-y") }}</li> + <li>{{ SVGAttr("vert-adv-y") }}</li> + <li>{{ SVGAttr("unicode") }}</li> + <li>{{ SVGAttr("glyph-name") }}</li> + <li>{{ SVGAttr("orientation") }}</li> + <li>{{ SVGAttr("arabic-form") }}</li> + <li>{{ SVGAttr("lang") }}</li> +</ul> + +<h2 id="DOM接口">DOM接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGGlyphElement" title="en/DOM/SVGGlyphElement">SVGGlyphElement</a>接口。</code></p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("missing-glyph") }}</li> + <li><a href="/en/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG_Fonts">SVG教程：SVG 字体</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/glyphref/index.html b/files/zh-cn/web/svg/element/glyphref/index.html new file mode 100644 index 0000000000..5441c76747 --- /dev/null +++ b/files/zh-cn/web/svg/element/glyphref/index.html @@ -0,0 +1,106 @@ +--- +title: glyphRef +slug: Web/SVG/Element/glyphRef +tags: + - SVG + - SVG文本内容 + - 元素 + - 参考 + - 需要示例 +translation_of: Web/SVG/Element/glyphRef +--- +<div>{{SVGRef}}</div> + +<p><code>glyphRef</code>元素为引用的{{ SVGElement("altGlyph") }} 替代物提供了一个唯一可能的字形。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en-US/SVG/Attribute#XLink">XLink属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("dx") }}</li> + <li>{{ SVGAttr("dy") }}</li> + <li>{{ SVGAttr("glyphRef") }}</li> + <li>{{ SVGAttr("format") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en-US/DOM/SVGGlyphRefElement">SVGGlyphRefElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera('9.80')}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/SVG/Compatibility_sources">这些资源</a>。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("altGlyph") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/hkern/index.html b/files/zh-cn/web/svg/element/hkern/index.html new file mode 100644 index 0000000000..3c2914a0dc --- /dev/null +++ b/files/zh-cn/web/svg/element/hkern/index.html @@ -0,0 +1,52 @@ +--- +title: hkern +slug: Web/SVG/Element/hkern +tags: + - SVG + - SVG字体 + - 元素 + - 参考 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/hkern +--- +<div>{{SVGRef}}</div> + +<p>在自上而下的字体中，<code>hkern</code>元素可以精细调整两个雕刻文字的水平距离。这个处理就是”<a href="http://en.wikipedia.org/wiki/Kerning">字距处理</a>“</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("u1") }}</li> + <li>{{ SVGAttr("g1") }}</li> + <li>{{ SVGAttr("u2") }}</li> + <li>{{ SVGAttr("g2") }}</li> + <li>{{ SVGAttr("k") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGVKernElement" title="en/DOM/SVGVKernElement">SVGHKernElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("hkern") }}</li> + <li><a href="/en/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG_Fonts">SVG教程：SVG字体</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/image/index.html b/files/zh-cn/web/svg/element/image/index.html new file mode 100644 index 0000000000..4f9f2710b8 --- /dev/null +++ b/files/zh-cn/web/svg/element/image/index.html @@ -0,0 +1,143 @@ +--- +title: image +slug: Web/SVG/Element/image +tags: + - SVG + - SVG图形 + - 元素 + - 参考 +translation_of: Web/SVG/Element/image +--- +<div>{{SVGRef}}</div> + +<p>SVG文档中的SVG元素包含图像信息。它表现为图像文件或者其他SVG文件。</p> + +<p>SVG图像格式转换软件支持JPEG、PNG格式，是否支持动图GIF不明确。</p> + +<p>SVG文件是这样的一种图像：不被当做外部资源加载，不可以用<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:visited">:visited</a> 样式，不能有交互。使用动态SVG元素，可以用<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use"><use></a>引入外部的URL。使用SVG文件并添加scripts在里面，可以用<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object"><object></a> 放在 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject"><foreignObject></a>中。</p> + +<p>注意：HTML规范中定义<image>和<img>在解析时是等效的。这种规范只适用于SVG文件或SVG区块内。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("x") }}：图像水平方向上到原点的距离</li> + <li>{{ SVGAttr("y") }}：图像竖直方向上到原点的距离</li> + <li>{{ SVGAttr("width") }}：图像宽度。和HTML的<img>不同，该属性是必须的</li> + <li>{{ SVGAttr("height") }}：图像高度。和HTML的<img>不同，该属性是必须的</li> + <li>{{ SVGAttr("xlink:href") }}：图像的URL指向</li> + <li>{{ SVGAttr("preserveAspectRatio") }}：控制图像比例</li> +</ul> + +<h2 id="DOM接口">DOM接口</h2> + +<p>该元素实现<code><a href="/en/DOM/SVGImageElement" title="en/DOM/SVGImageElement">SVGImageElement</a></code> 接口。</p> + +<h2 id="示例">示例</h2> + +<p>在SVG对象中基本呈现PNG图像:</p> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" /> +</svg> +</pre> + +<p>{{EmbedLiveSample("Example", 250, 260)}}</p> + +<h2 id="说明">说明</h2> + +<table> + <thead> + <tr> + <th scope="col">版本</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'embedded.html#ImageElement', '<image>')}}</td> + <td>{{Spec2('SVG2')}} 候选推荐</td> + <td>允许省略高度和宽度</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#ImageElement', '<image>')}}</td> + <td>{{Spec2('SVG1.1')}} 推荐</td> + <td>初版规范</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">这些资源</a>。</p> diff --git a/files/zh-cn/web/svg/element/index.html b/files/zh-cn/web/svg/element/index.html new file mode 100644 index 0000000000..1e5d236194 --- /dev/null +++ b/files/zh-cn/web/svg/element/index.html @@ -0,0 +1,290 @@ +--- +title: SVG元素参考 +slug: Web/SVG/Element +tags: + - SVG + - SVG参考 +translation_of: Web/SVG/Element +--- +<p>« <a href="/zh-cn/docs/SVG">SVG</a> / <a href="/zh-CN/docs/Web/SVG/Attribute">SVG 属性参考</a> »</p> + +<p><span class="seoSummary">SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。在这里，您可以找到每个 SVG 元素的参考文档。</span></p> + +<h2 id="SVG_元素（从_A-Z_排序）">SVG 元素（从 A-Z 排序）</h2> + +<div class="index"> +<h3 id="A">A</h3> + +<ul> + <li>{{SVGElement("a")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("animateMotion")}}</li> + <li>{{SVGElement("animateTransform")}}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{SVGElement("circle")}}</li> + <li>{{SVGElement("clipPath")}}</li> + <li>{{SVGElement("color-profile")}}</li> +</ul> + +<h3 id="D">D</h3> + +<ul> + <li>{{SVGElement("defs")}}</li> + <li>{{SVGElement("desc")}}</li> + <li>{{SVGElement("discard")}}</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{SVGElement("ellipse")}}</li> +</ul> + +<h3 id="F">F</h3> + +<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("feDistantLight")}}</li> + <li>{{SVGElement("feDropShadow")}}</li> + <li>{{SVGElement("feFlood")}}</li> + <li>{{SVGElement("feFuncA")}}</li> + <li>{{SVGElement("feFuncB")}}</li> + <li>{{SVGElement("feFuncG")}}</li> + <li>{{SVGElement("feFuncR")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feImage")}}</li> + <li>{{SVGElement("feMerge")}}</li> + <li>{{SVGElement("feMergeNode")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("fePointLight")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feSpotLight")}}</li> + <li>{{SVGElement("feTile")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("foreignObject")}}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{SVGElement("g")}}</li> +</ul> + +<h3 id="H">H</h3> + +<ul> + <li>{{SVGElement("hatch")}}</li> + <li>{{SVGElement("hatchpath")}}</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{SVGElement("image")}}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{SVGElement("line")}}</li> + <li>{{SVGElement("linearGradient")}}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGElement("mask")}}</li> + <li>{{SVGElement("mesh")}}</li> + <li>{{SVGElement("meshgradient")}}</li> + <li>{{SVGElement("meshpatch")}}</li> + <li>{{SVGElement("meshrow")}}</li> + <li>{{SVGElement("metadata")}}</li> + <li>{{SVGElement("mpath")}}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{SVGElement("path")}}</li> + <li>{{SVGElement("pattern")}}</li> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("polyline")}}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{SVGElement("radialGradient")}}</li> + <li>{{SVGElement("rect")}}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{SVGElement("script")}}</li> + <li>{{SVGElement("set")}}</li> + <li>{{SVGElement("solidcolor")}}</li> + <li>{{SVGElement("stop")}}</li> + <li>{{SVGElement("style")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{SVGElement("switch")}}</li> + <li>{{SVGElement("symbol")}}</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{SVGElement("text")}}</li> + <li>{{SVGElement("textPath")}}</li> + <li>{{SVGElement("title")}}</li> + <li>{{SVGElement("tspan")}}</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{SVGElement("unknown")}}</li> + <li>{{SVGElement("use")}}</li> +</ul> + +<h3 id="V">V</h3> + +<ul> + <li>{{SVGElement("view")}}</li> +</ul> +</div> + +<h2 id="SVG_元素（按类别分类）">SVG 元素（按类别分类）</h2> + +<h3 id="动画元素">动画元素</h3> + +<p>{{SVGElement("animate")}}，{{SVGElement("animateColor")}}，{{SVGElement("animateMotion")}}，{{SVGElement("animateTransform")}}，{{SVGElement("discard")}}，{{SVGElement("mpath")}}，{{SVGElement("set")}}</p> + +<h3 id="基本形状元素">基本形状元素</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="容器元素">容器元素</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p> + +<h3 id="描述性元素">描述性元素</h3> + +<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p> + +<h3 id="滤镜元素">滤镜元素</h3> + +<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p> + +<h3 id="字体元素">字体元素</h3> + +<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p> + +<h3 id="渐变元素">渐变元素</h3> + +<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p> + +<h3 id="图形元素">图形元素</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p> + +<h3 id="图像渲染元素">图像渲染元素</h3> + +<p>{{SVGElement("mesh")}}, {{SVGElement("use")}}</p> + +<h3 id="光源元素">光源元素</h3> + +<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p> + +<h3 id="非渲染元素">非渲染元素</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}</p> + +<h3 id="绘制服务器元素">绘制服务器元素</h3> + +<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}</span></p> + +<h3 id="可渲染元素">可渲染元素</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}</p> + +<h3 id="形状元素">形状元素</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="结构元素">结构元素</h3> + +<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p> + +<h3 id="文本内容元素">文本内容元素</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="文本子内容元素">文本子内容元素</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="未分类元素">未分类元素</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p> + +<h2 id="过时和弃用的元素">过时和弃用的元素</h2> + +<div class="blockIndicator warning"> +<p><strong>警告：</strong> 这些是旧的SVG元素，已弃用且不应使用。<strong>您绝不应在新项目中使用它们，并应尽快在旧项目中替换它们。</strong>在此列出，仅供参考。</p> +</div> + +<h3 id="A_2">A</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}</p> + +<h3 id="C_2">C</h3> + +<p>{{SVGElement("cursor")}}</p> + +<h3 id="F_2">F</h3> + +<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}</p> + +<h3 id="G_2">G</h3> + +<p>{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}</p> + +<h3 id="H_2">H</h3> + +<p>{{SVGElement("hkern")}}</p> + +<h3 id="M_2">M</h3> + +<p>{{SVGElement("missing-glyph")}}</p> + +<h3 id="T_2">T</h3> + +<p>{{SVGElement("tref")}}</p> + +<h3 id="V_2">V</h3> + +<p>{{SVGElement("vkern")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute">SVG attribute reference</a></li> + <li><a href="/en-US/docs/Web/SVG/Tutorial">SVG Tutorial</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model#SVG_interfaces">SVG interface reference</a></li> +</ul> + +<p>{{SVGRef}}</p> diff --git a/files/zh-cn/web/svg/element/line/index.html b/files/zh-cn/web/svg/element/line/index.html new file mode 100644 index 0000000000..6dfd6bfe11 --- /dev/null +++ b/files/zh-cn/web/svg/element/line/index.html @@ -0,0 +1,117 @@ +--- +title: line +slug: Web/SVG/Element/line +tags: + - SVG + - SVG图形 + - 元素 + - 参考 + - 线 +translation_of: Web/SVG/Element/line +--- +<div>{{SVGRef}}</div> + +<p><code>line</code>元素是一个SVG基本形状，用来创建一条连接两个点的线。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<p>» <a href="https://developer.mozilla.org/files/3254/line.svg">line.svg</a></p> + +<p>你可以应用变形以得到同样的结果。从一条常见的线开始：</p> + +<p>» <a href="https://developer.mozilla.org/files/3345/line1.svg">line1.svg</a></p> + +<p>添加变形选项以改变线的方向：</p> + +<p>» <a href="https://developer.mozilla.org/files/3346/line2.svg">line2.svg</a></p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{SVGAttr("x1")}}</li> + <li>{{SVGAttr("x2")}}</li> + <li>{{SVGAttr("y1")}}</li> + <li>{{SVGAttr("y2")}}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en-US/docs/Web/API/SVGLineElement">SVGLineElement</a>接口</code></p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支持</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('8.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/docs/Web/SVG/Compatibility_sources">这些资源</a>。</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("path")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/lineargradient/index.html b/files/zh-cn/web/svg/element/lineargradient/index.html new file mode 100644 index 0000000000..e9b7172c09 --- /dev/null +++ b/files/zh-cn/web/svg/element/lineargradient/index.html @@ -0,0 +1,128 @@ +--- +title: linearGradient +slug: Web/SVG/Element/linearGradient +tags: + - SVG + - SVG渐变 + - 元素 +translation_of: Web/SVG/Element/linearGradient +--- +<div>{{SVGRef}}</div> + +<p><code>linearGradient</code>元素用来定义线性渐变，用于图形元素的填充或描边。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink" > + + <defs> + <linearGradient id="MyGradient"> + <stop offset="5%" stop-color="green"/> + <stop offset="95%" stop-color="gold"/> + </linearGradient> + </defs> + + <rect fill="url(#MyGradient)" + x="10" y="10" width="100" height="100"/> +</svg></pre> + +<p>{{EmbedLiveSample("Example", 120, 120, "https://mdn.mozillademos.org/files/10061/svg-lineargradient.png")}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="Global_属性">Global 属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("gradientUnits") }}</li> + <li>{{ SVGAttr("gradientTransform") }}</li> + <li>{{ SVGAttr("x1") }}</li> + <li>{{ SVGAttr("y1") }}</li> + <li>{{ SVGAttr("x2") }}</li> + <li>{{ SVGAttr("y2") }}</li> + <li>{{ SVGAttr("spreadMethod") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGLinearGradientElement" title="en/DOM/SVGLinearGradientElement">SVGLinearGradientElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('9.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatVersionUnknown}}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">这些资源</a>。</p> + +<h3 id="sect1"> </h3> + +<p>[1] WebKit不支持<code>spread方法</code> (<a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=5968">bug 5968</a>) 以及颜色插值 (<a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=6034">bug 6034</a>)。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("radialGradient") }}</li> + <li>{{ SVGElement("stop") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/marker/index.html b/files/zh-cn/web/svg/element/marker/index.html new file mode 100644 index 0000000000..92473f3527 --- /dev/null +++ b/files/zh-cn/web/svg/element/marker/index.html @@ -0,0 +1,125 @@ +--- +title: marker +slug: Web/SVG/Element/marker +tags: + - SVG + - SVG容器 + - 元素 +translation_of: Web/SVG/Element/marker +--- +<div>{{SVGRef}}</div> + +<p><code>marker</code>元素定义了在特定的{{ SVGElement("path") }}元素、{{ SVGElement("line") }}元素、{{ SVGElement("polyline") }}元素或者{{ SVGElement("polygon") }}元素上绘制的箭头或者多边标记图形。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<p>» <a href="https://developer.mozilla.org/files/3267/marker.svg" title="https://developer.mozilla.org/files/3267/marker.svg">marker.svg</a></p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("markerUnits") }}</li> + <li>{{ SVGAttr("refX") }}</li> + <li>{{ SVGAttr("refY") }}</li> + <li>{{ SVGAttr("markerWidth") }}</li> + <li>{{ SVGAttr("markerHeight") }}</li> + <li>{{ SVGAttr("orient") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGMarkerElement" title="en/DOM/SVGMarkerElement">SVGMarkerElement</a></code> 接口。</p> + +<h2 id="Example">Example</h2> + +<h3 id="SVG">SVG</h3> + +<pre><code><?xml version="1.0"?> +<svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <defs> + <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" + markerWidth="6" markerHeight="6" orient="auto"> + <path d="M 0 0 L 10 5 L 0 10 z" /> + </marker> + </defs> + + <polyline points="10,90 50,80 90,20" fill="none" stroke="black" + stroke-width="2" marker-end="url(#Triangle)" /> +</svg></code></pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: open sans light,sans-serif; font-size: 16px; line-height: 16px;">Feature</span></th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome('1.0') }}</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('9.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: open sans light,sans-serif; font-size: 16px; line-height: 16px;">Feature</span></th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">这些资源</a>。</p> diff --git a/files/zh-cn/web/svg/element/mask/index.html b/files/zh-cn/web/svg/element/mask/index.html new file mode 100644 index 0000000000..588aa14555 --- /dev/null +++ b/files/zh-cn/web/svg/element/mask/index.html @@ -0,0 +1,54 @@ +--- +title: mask +slug: Web/SVG/Element/mask +tags: + - SVG + - SVG容器 + - 元素 +translation_of: Web/SVG/Element/mask +--- +<div>{{SVGRef}}</div> + +<p>在SVG中，你可以指一个透明的遮罩层和当前对象合成，形成背景。透明遮罩层可以是任何其他图形对象或者{{ SVGElement("g") }}元素。<code>mask</code>元素用于定义这样的遮罩元素。属性{{ SVGAttr("mask") }}用来引用一个遮罩元素。</p> + +<h2 id="使用场景">使用场景</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<p>» <a href="https://developer.mozilla.org/files/3269/mask.svg" title="https://developer.mozilla.org/files/3269/mask.svg">mask.svg</a></p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("maskUnits") }}</li> + <li>{{ SVGAttr("maskContentUnits") }}</li> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("height") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGMaskElement" title="en/DOM/SVGMaskElement">SVGMaskElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("clipPath") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/metadata/index.html b/files/zh-cn/web/svg/element/metadata/index.html new file mode 100644 index 0000000000..e3c54f7d4d --- /dev/null +++ b/files/zh-cn/web/svg/element/metadata/index.html @@ -0,0 +1,86 @@ +--- +title: metadata +slug: Web/SVG/Element/metadata +tags: + - SVG + - SVG描述 + - 元素 +translation_of: Web/SVG/Element/metadata +--- +<div>{{SVGRef}}</div> + +<p><code>metadata</code>是数据的结构化数据。SVG内容里面包含的元数据必须放在<code>metadata</code>元素里面。<code>medatata</code>的内容物必须是来自其它XML命名空间的元素，比如说RDF、FOAT，等等。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<p><em>没有专有属性</em></p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en-US/DOM/SVGMetadataElement">SVGMetadataElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('8.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/SVG/Compatibility_sources">这些数据</a>。</p> diff --git a/files/zh-cn/web/svg/element/missing-glyph/index.html b/files/zh-cn/web/svg/element/missing-glyph/index.html new file mode 100644 index 0000000000..83c8c13080 --- /dev/null +++ b/files/zh-cn/web/svg/element/missing-glyph/index.html @@ -0,0 +1,53 @@ +--- +title: missing-glyph +slug: Web/SVG/Element/missing-glyph +tags: + - SVG + - SVG容器 + - 元素 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/missing-glyph +--- +<div>{{SVGRef}}</div> + +<p>如果对于给定的字符，字体没有定义一个合适的 {{ SVGElement("glyph") }}，那么就会呈现<code>missing-glyph</code>元素的内容。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("d") }}</li> + <li>{{ SVGAttr("horiz-adv-x") }}</li> + <li>{{ SVGAttr("vert-origin-x") }}</li> + <li>{{ SVGAttr("vert-origin-y") }}</li> + <li>{{ SVGAttr("vert-adv-y") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGMissingGlyphElement" title="en/DOM/SVGMissingGlyphElement">SVGMissingGlyphElement</a></code>接口。</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li><a href="/en/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG_Fonts">SVG教程：SVG字体</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/mpath/index.html b/files/zh-cn/web/svg/element/mpath/index.html new file mode 100644 index 0000000000..10a2ca69eb --- /dev/null +++ b/files/zh-cn/web/svg/element/mpath/index.html @@ -0,0 +1,79 @@ +--- +title: mpath +slug: Web/SVG/Element/mpath +tags: + - SVG + - SVG动画 + - 元素 + - 参考 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/mpath +--- +<div>{{SVGRef}}</div> + +<p>{{ SVGElement("animateMotion") }} 元素的<code>mpath</code>子元素使{{ SVGElement("animateMotion") }} 元素能够引用一个外部的{{ SVGElement("path") }}元素作为运动路径的定义。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 500 300" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" > + + <rect x="1" y="1" width="498" height="298" + fill="none" stroke="blue" stroke-width="2" /> + + <!-- Draw the outline of the motion path in blue, along + with three small circles at the start, middle and end. --> + <path id="path1" d="M100,250 C 100,50 400,50 400,250" + fill="none" stroke="blue" stroke-width="7.06" /> + <circle cx="100" cy="250" r="17.64" fill="blue" /> + <circle cx="250" cy="100" r="17.64" fill="blue" /> + <circle cx="400" cy="250" r="17.64" fill="blue" /> + + <!-- Here is a triangle which will be moved about the motion path. + It is defined with an upright orientation with the base of + the triangle centered horizontally just above the origin. --> + <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" + fill="yellow" stroke="red" stroke-width="7.06" > + <!-- Define the motion path animation --> + <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" > + <mpath xlink:href="#path1"/> + </animateMotion> + </path> +</svg> +</pre> + +<p>实时输出：</p> + +<p>{{EmbedLiveSample("Example",250,165)}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGMPathElement" title="en/DOM/SVGMPathElement">SVGMPathElement</a></code>接口。</p> + +<h2 id="相关的内容">相关的内容</h2> + +<ul> + <li>{{ SVGElement("animateMotion") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/path/index.html b/files/zh-cn/web/svg/element/path/index.html new file mode 100644 index 0000000000..33120a9f55 --- /dev/null +++ b/files/zh-cn/web/svg/element/path/index.html @@ -0,0 +1,123 @@ +--- +title: path +slug: Web/SVG/Element/path +tags: + - SVG + - SVG图形 + - 元素 + - 参考 +translation_of: Web/SVG/Element/path +--- +<div>{{SVGRef}}</div> + +<div class="callout-box"><strong><a href="/en-US/docs/Web/SVG/Tutorial/Paths">起步</a></strong><br> +本教程将教你开始使用SVG路径。</div> + +<p>path元素是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre><code><svg width="100%" height="100%" viewBox="0 0 400 400" + xmlns="http://www.w3.org/2000/svg"> + + <path d="M 100 100 L 300 100 L 200 300 z" + fill="orange" stroke="black" stroke-width="3" /> +</svg></code></pre> + +<p>输出结果：</p> + +<p>{{EmbedLiveSample("Example",200,215)}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{SVGAttr("d")}}</li> + <li>{{SVGAttr("pathLength")}}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en-US/docs/DOM/SVGPathElement">SVGPathElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('8.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/docs/Web/SVG/Compatibility_sources">这些资源</a>。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{SVGElement("circle")}}</li> + <li>{{SVGElement("ellipse")}}</li> + <li>{{SVGElement("line")}}</li> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("polyline")}}</li> + <li>{{SVGElement("rect")}}</li> + <li><a href="/en-US/docs/Web/SVG/Tutorial/Paths">The MDN SVG "Getting Started" tutorial : Path</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/pattern/index.html b/files/zh-cn/web/svg/element/pattern/index.html new file mode 100644 index 0000000000..cb82f58be7 --- /dev/null +++ b/files/zh-cn/web/svg/element/pattern/index.html @@ -0,0 +1,54 @@ +--- +title: pattern +slug: Web/SVG/Element/pattern +tags: + - SVG + - SVG容器 + - 元素 + - 需要兼容性表 +translation_of: Web/SVG/Element/pattern +--- +<div>{{SVGRef}}</div> + +<p>使用预定义的图形对一个对象进行填充或描边，就要用到<code>pattern</code>元素。<code>pattern</code>元素让预定义图形能够以固定间隔在x轴和y轴上重复（或平铺）从而覆盖要涂色的区域。先使用<code>pattern元素定义图案，然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。</code></p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<p>» <a href="https://developer.mozilla.org/files/3268/pattern.svg" title="https://developer.mozilla.org/files/3268/pattern.svg">pattern.svg</a></p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("patternUnits") }}</li> + <li>{{ SVGAttr("patternContentUnits") }}</li> + <li>{{ SVGAttr("patternTransform") }}</li> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGPatternElement" title="en/DOM/SVGPatternElement">SVGPatternElement</a></code>接口。</p> diff --git a/files/zh-cn/web/svg/element/polygon/index.html b/files/zh-cn/web/svg/element/polygon/index.html new file mode 100644 index 0000000000..8767722c25 --- /dev/null +++ b/files/zh-cn/web/svg/element/polygon/index.html @@ -0,0 +1,104 @@ +--- +title: polygon +slug: Web/SVG/Element/polygon +tags: + - SVG + - SVG图形 + - 元素 + - 参考 +translation_of: Web/SVG/Element/polygon +--- +<div>{{SVGRef}}</div> + +<p><code>polygon元素定义了一个由一组首尾相连的直线线段构成的闭合多边形形状。最后一点连接到第一点。欲了解开放形状，请看{{SVGElement("polyline")}}元素。</code></p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<p>» <a href="https://developer.mozilla.org/files/3259/polygon.svg" title="https://developer.mozilla.org/files/3259/polygon.svg">polygon.svg</a></p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("points") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGPolygonElement" title="en/DOM/SVGPolygonElement">SVGPolygonElement</a>接口。</code></p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{ CompatChrome('1.0') }}</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">这些资源</a>。</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{ SVGElement("polyline") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/polyline/index.html b/files/zh-cn/web/svg/element/polyline/index.html new file mode 100644 index 0000000000..a67c884d46 --- /dev/null +++ b/files/zh-cn/web/svg/element/polyline/index.html @@ -0,0 +1,105 @@ +--- +title: polyline +slug: Web/SVG/Element/polyline +tags: + - SVG + - SVG图形 + - 元素 + - 参考 +translation_of: Web/SVG/Element/polyline +--- +<div>{{SVGRef}}</div> + +<p><code>polyline</code>元素是SVG的一个基本形状，用来创建一系列直线连接多个点。典型的一个<code>polyline</code>是用来创建一个开放的形状，最后一点不与第一点相连。欲了解闭合形状，请看{{SVGElement("polygon")}} 元素。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<p>» <a href="https://developer.mozilla.org/files/3260/polyline.svg" title="https://developer.mozilla.org/files/3260/polyline.svg">polyline.svg</a></p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("points") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGPolylineElement" title="en/DOM/SVGPolylineElement">SVGPolylineElement</a></code>接口。</p> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome('1.0') }}</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">这些资源</a>。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("line") }}</li> + <li>{{ SVGElement("polygon") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/radialgradient/index.html b/files/zh-cn/web/svg/element/radialgradient/index.html new file mode 100644 index 0000000000..a104d45c15 --- /dev/null +++ b/files/zh-cn/web/svg/element/radialgradient/index.html @@ -0,0 +1,116 @@ +--- +title: radialGradient +slug: Web/SVG/Element/radialGradient +tags: + - SVG + - SVG渐变 + - 元素 +translation_of: Web/SVG/Element/radialGradient +--- +<div>{{SVGRef}}</div> + +<p><code>radialGradient</code> 用来定义径向渐变，以对图形元素进行填充或描边。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{SVGAttr("gradientUnits")}}</li> + <li>{{SVGAttr("gradientTransform")}}</li> + <li>{{SVGAttr("cx")}}</li> + <li>{{SVGAttr("cy")}}</li> + <li>{{SVGAttr("r")}}</li> + <li>{{SVGAttr("fx")}}</li> + <li>{{SVGAttr("fy")}}</li> + <li>{{SVGAttr("fr")}}</li> + <li>{{SVGAttr("spreadMethod")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了 {{domxref("SVGRadialGradientElement")}} 接口。</p> + +<h2 id="示例">示例</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: xml"><code class="language-html"><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">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 240 120<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>exampleGradient<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>10%<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>gold<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>95%<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>green<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>radialGradient</span> <span class="attr-name token">spreadMethod</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reflect<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>50%<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>50%<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">fx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>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>75%<span class="punctuation token">"</span></span> + <span class="attr-name token">fr</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">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flameGradient<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>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>stop</span> <span class="attr-name token">offset</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">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>yellow<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>95%<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>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>circle</span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>url(#exampleGradient)<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>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="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>url(#flameGradient)<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>180<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="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> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Example", 120, 120)}}</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', 'pservers.html#RadialGradients', '<radialGradient>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td>加入 <code>fr</code> 属性</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'pservers.html#RadialGradients', '<radialGradient>')}}</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> 并给我们发送 pull request。</div> + +<p>{{Compat("svg.elements.radialGradient")}}</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{SVGElement("linearGradient")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/rect/index.html b/files/zh-cn/web/svg/element/rect/index.html new file mode 100644 index 0000000000..0f33cf99c1 --- /dev/null +++ b/files/zh-cn/web/svg/element/rect/index.html @@ -0,0 +1,142 @@ +--- +title: rect +slug: Web/SVG/Element/rect +tags: + - SVG + - SVG图形 + - 元素 + - 参考 +translation_of: Web/SVG/Element/rect +--- +<div>{{SVGRef}}</div> + +<p><code>rect</code>元素是SVG的一个基本形状，用来创建矩形，基于一个角位置以及它的宽和高。它还可以用来创建圆角矩形。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h3 id="简单矩形">简单矩形</h3> + +<p> </p> + +<pre class="brush: xml"><?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> + +<p> </p> + +<p>» <a href="https://mdn.mozillademos.org/files/8893/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p> + +<h3 id="圆角矩形"><font face="Consolas, Monaco, Andale Mono, monospace">圆角矩形</font></h3> + +<p> </p> + +<pre class="brush: xml"><?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" + rx="15" ry="15"/> + +</svg></pre> + +<p> </p> + +<p>» <a href="https://mdn.mozillademos.org/files/8897/rect-2.svg" title="https://developer.mozilla.org/files/3248/rect-2.svg">rect-2.svg</a></p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>这个元素实现了 <code><a href="/en/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> 接口。</p> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th scope="col">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">这些资源</a>。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("path") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/script/index.html b/files/zh-cn/web/svg/element/script/index.html new file mode 100644 index 0000000000..c45248af1c --- /dev/null +++ b/files/zh-cn/web/svg/element/script/index.html @@ -0,0 +1,130 @@ +--- +title: script +slug: Web/SVG/Element/script +tags: + - SVG + - 元素 + - 参考 + - 脚本 +translation_of: Web/SVG/Element/script +--- +<p>一个SVG脚本元素等同于HTML中的<code><a href="/en-US/HTML/Element/Script">script</a>元素，因此这个位置是面向脚本的（例如，ECMAScript）。</code></p> + +<p>任何定义在<code>script</code>元素中的函数拥有一个跨当前文档的全局范围。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<p>下面的代码片段演示了SVG <code>script</code>标签的作用。在代码中，我们使用JavaScript改变SVG {{SVGElement("circle")}} 元素的半径。</p> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg"> + <script type="text/javascript"> + // <![CDATA[ + function change(evt) { + var target = evt.target; + var radius = target.getAttribute("r"); + + if (radius == 15) { + radius = 45; + } else { + radius = 15; + } + + target.setAttribute("r",radius); + } + // ]]> + </script> + + <circle cx="50" cy="50" r="45" fill="green" + onclick="change(evt)" /> +</svg> +</pre> + +<p>示例输出：</p> + +<p>{{EmbedLiveSample("Example",150,165)}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{SVGAttr("type")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> +</ul> + +<h2 id="DOM接口">DOM接口</h2> + +<p>该元素实现了<code><a href="/en-US/DOM/SVGScriptElement">SVGScriptElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('9.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/SVG/Compatibility_sources">这些资源</a>。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/HTML/Element/Script">HTML中的<code>script</code>元素</a></li> +</ul> + +<p>{{SVGRef}}</p> diff --git a/files/zh-cn/web/svg/element/set/index.html b/files/zh-cn/web/svg/element/set/index.html new file mode 100644 index 0000000000..ccd4ed2177 --- /dev/null +++ b/files/zh-cn/web/svg/element/set/index.html @@ -0,0 +1,50 @@ +--- +title: set +slug: Web/SVG/Element/set +tags: + - SVG + - SVG动画 + - 元素 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/set +--- +<div>{{SVGRef}}</div> + +<p><code>set</code>元素可以用来设定一个属性值，并为该值赋予一个持续时间。它支持所有的属性类型， 包括那些原理上不能插值的， 例如值为字符串和布尔类型的属性。 set元素是非叠加的。无法在其上使用additive属性或accumulate属性，即使声明了这些属性也会自动被忽略。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#AnimationEvent" title="en/SVG/Attribute#AnimationEvent">动画事件属性</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/en/SVG/Attribute#AnimationAttributeTarget" title="en/SVG/Attribute#AnimationAttributeTarget">动画属性目标属性</a> »</li> + <li><a href="/en/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">动画定时属性</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("to") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGSetElement" title="en/DOM/SVGSetElement">SVGSetElement</a></code> 接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("animate") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/stop/index.html b/files/zh-cn/web/svg/element/stop/index.html new file mode 100644 index 0000000000..28097fd94a --- /dev/null +++ b/files/zh-cn/web/svg/element/stop/index.html @@ -0,0 +1,126 @@ +--- +title: stop +slug: Web/SVG/Element/stop +tags: + - SVG + - SVG渐变 + - 元素 + - 参考 + - 需要示例 +translation_of: Web/SVG/Element/stop +--- +<div>{{SVGRef}}</div> + +<p>一个渐变上的颜色坡度，是用<code>stop</code>元素定义的。<code>stop</code>元素可以是{{SVGElement("linearGradient")}}元素或者{{SVGElement("radialGradient")}}元素的子元素。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 80 40" + xmlns="http://www.w3.org/2000/svg"> + + <defs> + <linearGradient id="MyGradient"> + <stop offset="5%" stop-color="#F60" /> + <stop offset="95%" stop-color="#FF6" /> + </linearGradient> + </defs> + + <!-- Outline the drawing area in black --> + <rect fill="none" stroke="black" + x="0.5" y="0.5" width="79" height="39"/> + + <!-- The rectangle is filled using a linear gradient --> + <rect fill="url(#MyGradient)" stroke="black" stroke-width="1" + x="10" y="10" width="60" height="20"/> +</svg> +</pre> + +<p>示例输出：</p> + +<p>{{EmbedLiveSample("Example",160,95)}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{SVGAttr("offset")}}</li> + <li>{{SVGAttr("stop-color")}}</li> + <li>{{SVGAttr("stop-opacity")}}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en-US/docs/Web/API/SVGStopElement">SVGStopElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatIE('1.0')}}</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('9.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/docs/Web/SVG/Compatibility_sources">这些资源</a>。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{SVGElement("linearGradient")}}</li> + <li>{{SVGElement("radialGradient")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/style/index.html b/files/zh-cn/web/svg/element/style/index.html new file mode 100644 index 0000000000..aa8f886674 --- /dev/null +++ b/files/zh-cn/web/svg/element/style/index.html @@ -0,0 +1,116 @@ +--- +title: style +slug: Web/SVG/Element/style +tags: + - SVG + - 元素 + - 参考 +translation_of: Web/SVG/Element/style +--- +<div>{{SVGRef}}</div> + +<p><code>style</code>元素元素样式表直接在SVG内容中间嵌入。SVG的<code>style</code>元素的属性与HTML中的相应的元素并无二致（请阅读HTML的 {{HTMLElement("style")}} 元素）。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg"> + <style> + /* <![CDATA[ */ + circle { + fill: orange; + stroke: black; + stroke-width: 10px; // Note that the value of a pixel depend on the viewBox + } + /* ]]> */ + </style> + + <circle cx="50" cy="50" r="40" /> +</svg> +</pre> + +<p>示例输出</p> + +<p>{{EmbedLiveSample("Example",150,165)}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{SVGAttr("type")}}</li> + <li>{{SVGAttr("media")}}</li> + <li>{{SVGAttr("title")}}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en-US/DOM/SVGStyleElement">SVGStyleElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('9.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/SVG/Compatibility_sources">这些资源</a>。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/HTML/Element/style">HTML中的<code><style></code>元素</a></li> +</ul> diff --git a/files/zh-cn/web/svg/element/svg/index.html b/files/zh-cn/web/svg/element/svg/index.html new file mode 100644 index 0000000000..fd694d1bb2 --- /dev/null +++ b/files/zh-cn/web/svg/element/svg/index.html @@ -0,0 +1,141 @@ +--- +title: svg +slug: Web/SVG/Element/svg +tags: + - SVG + - SVG容器 + - 元素 +translation_of: Web/SVG/Element/svg +--- +<ul> + <li>如果svg不是根元素，<code>svg</code> 元素可以用于在当前文档（比如说，一个HTML文档）内嵌套一个独立的svg片段 。 这个独立片段拥有独立的视口和坐标系统。</li> +</ul> + +<dl> +</dl> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<p>思考下下面的svg图片（代表意大利国旗）：</p> + +<pre class="brush: xml"><?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg" + width="150" height="100" viewBox="0 0 3 2"> + + <rect width="1" height="2" x="0" fill="#008d46" /> + <rect width="1" height="2" x="1" fill="#ffffff" /> + <rect width="1" height="2" x="2" fill="#d2232c" /> +</svg></pre> + +<p>它可以包含在html5文档里，如下所示：</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8" /> + <title>HTML/SVG Example</title> +</head> + +<body> + + <svg width="150" height="100" viewBox="0 0 3 2"> + <rect width="1" height="2" x="0" fill="#008d46" /> + <rect width="1" height="2" x="1" fill="#ffffff" /> + <rect width="1" height="2" x="2" fill="#d2232c" /> + </svg> + +</body> +</html></pre> + + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/zh-CN/docs/SVG/Attribute#ConditionalProccessing" title="en-US/docs/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/zh-CN/docs/SVG/Attribute#Core" title="en-US/docs/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/zh-CN/docs/SVG/Attribute#DocumentEvent" title="en-US/docs/SVG/Attribute#DocumentEvent">文档事件属性</a> »</li> + <li><a href="/zh-CN/docs/SVG/Attribute#GraphicalEvent" title="en-US/docs/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/zh-CN/docs/SVG/Attribute#Presentation" title="en-US/docs/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("version") }}</li> + <li>{{ SVGAttr("baseProfile") }}</li> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("contentScriptType") }}</li> + <li>{{ SVGAttr("contentStyleType") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en-US/docs/DOM/SVGSVGElement" title="en-US/docs/DOM/SVGSVGElement">SVGSVGElement</a></code> 接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome("1.0") }}</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/docs/SVG/Compatibility_sources" title="en-US/docs/SVG/Compatibility sources">这些来源</a>。</p> + +<p>{{SVGRef}}</p> diff --git a/files/zh-cn/web/svg/element/switch/index.html b/files/zh-cn/web/svg/element/switch/index.html new file mode 100644 index 0000000000..133652ca3a --- /dev/null +++ b/files/zh-cn/web/svg/element/switch/index.html @@ -0,0 +1,100 @@ +--- +title: switch +slug: Web/SVG/Element/switch +tags: + - SVG + - SVG容器 + - 元素 + - 需要示例 +translation_of: Web/SVG/Element/switch +--- +<div>{{SVGRef}}</div> + +<p><code>switch</code>元素对它的直接子元素上的属性{{ SVGAttr("requiredFeatures") }}、属性{{ SVGAttr("requiredExtensions") }} 和 属性{{ SVGAttr("systemLanguage") }}按照顺序进行评估，然后处理和呈现第一个评估为<code>true</code>的子元素。 其他子元素会被绕过不会被呈现。如果某个子元素是容器元素比如说是一个{{ SVGElement("g") }}元素，那么整个子树会被处理呈现或者全部绕过不呈现。</p> + +<p>注意：属性<code>display</code>和属性<code>visibility</code>的值对<code>switch元素处理是不起作用的。</code>特别是， 在<code>switch元素的子元素上</code>设置<code style="font-style: normal;">display</code>为none，对<code>switch</code> 元素的true/false测试处理不起作用。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("allowReorder") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en-US/docs/DOM/SVGSwitchElement" title="en/DOM/SVGSwitchElement">SVGSwitchElement</a></code> 接口。</p> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>1.8</td> + <td>9.0</td> + <td>8.0</td> + <td>3.0.4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{ CompatUnknown() }}</td> + <td>1.8</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>3.0.4</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/docs/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">这些资源</a>。</p> diff --git a/files/zh-cn/web/svg/element/symbol/index.html b/files/zh-cn/web/svg/element/symbol/index.html new file mode 100644 index 0000000000..42ddc1465b --- /dev/null +++ b/files/zh-cn/web/svg/element/symbol/index.html @@ -0,0 +1,123 @@ +--- +title: symbol +slug: Web/SVG/Element/symbol +tags: + - SVG + - SVG容器 + - 元素 + - 需要示例 +translation_of: Web/SVG/Element/symbol +--- +<div>{{SVGRef}}</div> + +<p><code>symbol</code>元素用来定义一个图形模板对象，它可以用一个{{ SVGElement("use") }}元素实例化。<code>symbol</code>元素对图形的作用是在同一文档中多次使用，添加结构和语义。结构丰富的文档可以更生动地呈现出来，类似讲演稿或盲文，从而提升了可访问性。注意，一个<code>symbol</code>元素本身是不呈现的。只有<code>symbol</code>元素的实例（亦即，一个引用了<code>symbol</code>的 {{ SVGElement("use") }}元素）才能呈现。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><svg> +<!-- symbol definition NEVER draw --> +<symbol id="sym01" viewBox="0 0 150 110"> + <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/> + <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/> +</symbol> + +<!-- actual drawing by "use" element --> +<use xlink:href="#sym01" + x="0" y="0" width="100" height="50"/> +<use xlink:href="#sym01" + x="0" y="50" width="75" height="38"/> +<use xlink:href="#sym01" + x="0" y="100" width="50" height="25"/> +</svg> +</pre> + +<p>{{EmbedLiveSample("Example", 150, 110)}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGSymbolElement" title="en/DOM/SVGSymbolElement">SVGSymbolElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + </tr> + <tr> + <th scope="col">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('9.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">这些资源</a>。</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("pattern") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/text/index.html b/files/zh-cn/web/svg/element/text/index.html new file mode 100644 index 0000000000..3f1fa7eecb --- /dev/null +++ b/files/zh-cn/web/svg/element/text/index.html @@ -0,0 +1,157 @@ +--- +title: text +slug: Web/SVG/Element/text +tags: + - SVG + - SVG文本内容 + - 元素 + - 参考 +translation_of: Web/SVG/Element/text +--- +<div>{{SVGRef}}</div> + +<p><code style="font-style: normal; line-height: 1.5;">text</code><span style="line-height: 1.5;">元素定义了一个由文字组成的图形。注意：我们可以将渐变</span><span style="line-height: 1.5;">、</span><span style="line-height: 1.5;">图案、</span><span style="line-height: 1.5;">剪切路径、遮罩</span><span style="line-height: 1.5;">或者</span><span style="line-height: 1.5;">滤镜应用到text上。</span></p> + +<h2 id="使用上下文">使用上下文</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: xml"><?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg" + width="100px" height="30px" viewBox="0 0 1000 300"> + + <text x="250" y="150" + font-family="Verdana" + font-size="55"> + Hello, out there + </text> + + <!-- Show outline of canvas using 'rect' element --> + <rect x="1" y="1" width="998" height="298" + fill="none" stroke="1" stroke-width="2" /> +</svg> +</pre> + +<p><text>元素用来绘制文本。下面这段代码展示了如何在坐标系中绘制一段文本。</p> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> + <text x="10" y="20">SVG Text Example</text> +</svg> +</pre> + +<p>可以旋转SVG文本。下面的代码做了一个演示。</p> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> + <text x="10" y="20" + transform="rotate(30 20,40)"> + SVG Text Rotation example + </text> +</svg> +</pre> + +<p>SVG文本还可以应用样式。</p> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> + <text x="10" y="20" + style="font-family: Times New Roman; + font-size : 24; + stroke : #00ff00; + fill : #0000ff;"> + SVG text styling + </text> +</svg> +</pre> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("dx") }}</li> + <li>{{ SVGAttr("dy") }}</li> + <li>{{ SVGAttr("text-anchor") }}</li> + <li>{{ SVGAttr("rotate") }}</li> + <li>{{ SVGAttr("textLength") }}</li> + <li>{{ SVGAttr("lengthAdjust") }}</li> +</ul> + +<h2 id="DOM接口">DOM接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGTextElement" title="en/DOM/SVGTextElement">SVGTextElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome('1.0') }}</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>这个图表基于<a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">这些资源</a>。</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{ SVGElement("tspan") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("altGlyph") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/textpath/index.html b/files/zh-cn/web/svg/element/textpath/index.html new file mode 100644 index 0000000000..fc629c0b3c --- /dev/null +++ b/files/zh-cn/web/svg/element/textpath/index.html @@ -0,0 +1,76 @@ +--- +title: textPath +slug: Web/SVG/Element/textPath +tags: + - SVG + - SVG文本内容 + - 元素 + - 参考 + - 需要兼容表 +translation_of: Web/SVG/Element/textPath +--- +<div>{{SVGRef}}</div> + +<p>除了笔直地绘制一行文字以外， SVG 也可以根据 {{ SVGElement("path") }} 元素的形状来放置文字。 只要在<code>textPath</code>元素内部放置文本，并通过其<code>xlink:href</code>属性值引用{{ SVGElement("path") }}元素，我们就可以让文字块呈现在{{ SVGElement("path") }}元素给定的路径上了。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 1000 300" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <path id="MyPath" + d="M 100 200 + C 200 100 300 0 400 100 + C 500 200 600 300 700 200 + C 800 100 900 100 900 100" /> + </defs> + + <use xlink:href="#MyPath" fill="none" stroke="red" /> + + <text font-family="Verdana" font-size="42.5"> + <textPath xlink:href="#MyPath"> + We go up, then we go down, then up again + </textPath> + </text> + + <!-- Show outline of the viewport using 'rect' element --> + <rect x="1" y="1" width="998" height="298" + fill="none" stroke="black" stroke-width="2" /> +</svg></pre> + +<p>即时结果：</p> + +<p>{{EmbedLiveSample("Example",500,175)}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("startOffset") }}</li> + <li>{{ SVGAttr("method") }}</li> + <li>{{ SVGAttr("spacing") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGTextPathElement" title="en/DOM/SVGTextPathElement">SVGTextPathElement</a></code>接口。</p> diff --git a/files/zh-cn/web/svg/element/title/index.html b/files/zh-cn/web/svg/element/title/index.html new file mode 100644 index 0000000000..5d7013239b --- /dev/null +++ b/files/zh-cn/web/svg/element/title/index.html @@ -0,0 +1,124 @@ +--- +title: title +slug: Web/SVG/Element/title +tags: + - SVG + - SVG描述 + - 元素 + - 参考 +translation_of: Web/SVG/Element/title +--- +<div>{{SVGRef}}</div> + +<p>SVG绘图中的每个窗口元素或图形元素都可以提供一个<code>title</code>描述性字符串，该描述只能是纯文本。如果当前的SVG文档片段在可视媒体中呈现为SVG，title元素不会呈现为绘图的一部分。然而，一些用户代理可能会，举个例子，把<code>title</code>显示为一个提示冒泡。替代性提词既可以看到也可以听到，它显示了title元素但是不会显示路径元素或者别的图形元素。<code>title</code>元素通常提升了SVG文档的可访问性。</p> + +<p>通常<code>title</code>元素必须是它的父元素的第一个子元素。注意，只有当<code>title</code>是它的父元素的第一个子元素的时候，那些编译器才会把<code>title</code>显示为一个提示冒泡。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<p>下面的代码片段显示了SVG <code><title></code>标签的用法。</p> + +<pre class="brush: xml"><svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"> + <g> + <title>SVG Title Demo example</title> + <rect x="10" y="10" width="200" height="50" + style="fill:none; stroke:blue; stroke-width:1px"/> + </g> +</svg> +</pre> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en-US/SVG/Attribute#Core">核心属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<p><em>没有专有属性</em></p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en-US/DOM/SVGTitleElement">SVGTitleElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('8.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + <tr> + <td>Tooltip display</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop('2.0')}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + <tr> + <td>Tooltip display</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop('2.0')}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en-US/SVG/Compatibility_sources">这些数据</a>。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("desc") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/tref/index.html b/files/zh-cn/web/svg/element/tref/index.html new file mode 100644 index 0000000000..0150f5a9a7 --- /dev/null +++ b/files/zh-cn/web/svg/element/tref/index.html @@ -0,0 +1,124 @@ +--- +title: tref +slug: Web/SVG/Element/tref +tags: + - SVG + - SVG文本内容 + - 元素 + - 参考 + - 需要兼容性表 +translation_of: Web/SVG/Element/tref +--- +<div>{{SVGRef}}</div> + +<p> {{ SVGElement("text") }} 的文本内容既可以是直接嵌入在{{SVGElement("text")}}元素中的的字符数据 ，也可以是引用元素的字符数据内容，<code>tref</code>元素用来指定的包含文本内容的引用元素。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: xml"><svg width="100%" height="100%" viewBox="0 0 1000 300" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <text id="ReferencedText"> + Referenced character data + </text> + </defs> + + <text x="100" y="100" font-size="45" > + Inline character data + </text> + + <text x="100" y="200" font-size="45" fill="red" > + <tref xlink:href="#ReferencedText"/> + </text> + + <!-- Show outline of canvas using 'rect' element --> + <rect x="1" y="1" width="998" height="298" + fill="none" stroke-width="2" /> +</svg> +</pre> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGTRefElement" title="en/DOM/SVGTRefElement">SVGTRefElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th scope="col">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("text") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/tspan/index.html b/files/zh-cn/web/svg/element/tspan/index.html new file mode 100644 index 0000000000..4e55a0be06 --- /dev/null +++ b/files/zh-cn/web/svg/element/tspan/index.html @@ -0,0 +1,112 @@ +--- +title: tspan +slug: Web/SVG/Element/tspan +tags: + - SVG + - SVG文本子元素 + - 元素 + - 参考 + - 需要兼容性表 +translation_of: Web/SVG/Element/tspan +--- +<div>{{SVGRef}}</div> + +<p>在 {{SVGElement("text")}}元素中，利用内含的<code>tspan</code>元素，可以调整文本和字体的属性以及当前文本的位置、绝对或相对坐标值。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<p>» <a href="https://developer.mozilla.org/files/3338/tspan.svg" title="https://developer.mozilla.org/files/3338/tspan.svg">tspan.svg</a></p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("dx") }}</li> + <li>{{ SVGAttr("dy") }}</li> + <li>{{ SVGAttr("rotate") }}</li> + <li>{{ SVGAttr("textLength") }}</li> + <li>{{ SVGAttr("lengthAdjust") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGTSpanElement" title="en/DOM/SVGTSpanElement">SVGTSpanElement</a></code>接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('9.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>该表格基于<a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">这些资源</a>。</p> + +<p>[1] 多种外观属性不起作用。rotate属性在Gecko2.0中实现。{{geckoRelease("2.0")}}.</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("text") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/element/use/index.html b/files/zh-cn/web/svg/element/use/index.html new file mode 100644 index 0000000000..a225a0914e --- /dev/null +++ b/files/zh-cn/web/svg/element/use/index.html @@ -0,0 +1,155 @@ +--- +title: use +slug: Web/SVG/Element/use +tags: + - SVG + - SVG图形 + - 元素 + - 参考 + - 需要浏览器兼容性 +translation_of: Web/SVG/Element/use +--- +<div>{{SVGRef}}</div> + +<p><code>use</code>元素在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中，然后将其粘贴到<code>use</code>元素的位置，很像HTML5中的克隆<a href="/en-US/docs/Web/HTML/Element/template">模板元素</a>。因为克隆的节点是不可见的，所以当使用<a href="/en/CSS">CSS</a>样式化一个<code>use</code>元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的DOM不能保证继承CSS属性，除非你明文设置使用<a href="/en/CSS/inheritance">CSS继承</a>。</p> + +<p>出于安全原因，一些浏览器可能在use元素上应用同源策略，还有可能拒绝载入xlink:href属性内的跨源URI。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: xml" id="Attributes"><svg width="100%" height="100%" xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>" xmlns:xlink="<a href="http://www.w3.org/1999/xlink">http://www.w3.org/1999/xlink</a>"> + <style> + .classA { fill:red } + </style> + <defs> + <g id="Port"> + <circle style="fill:inherit" r="10"/> + </g> + </defs> + + <text y="15">black</text> + <use x="50" y="10" xlink:href="#Port" /> + <text y="35">red</text> + <use x="50" y="30" xlink:href="#Port" class="classA"/> + <text y="55">blue</text> + <use x="50" y="50" xlink:href="#Port" style="fill:blue"/> + </svg> +</pre> + +<p> </p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="DOM接口">DOM接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGUseElement" title="en/DOM/SVGUseElement">SVGUseElement</a></code>接口。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Load from external URI</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatNo()}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Load from data: URI</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("10.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Load from external URI</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Load from data: URI</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/web/svg/element/view/index.html b/files/zh-cn/web/svg/element/view/index.html new file mode 100644 index 0000000000..1af4e6ed1a --- /dev/null +++ b/files/zh-cn/web/svg/element/view/index.html @@ -0,0 +1,42 @@ +--- +title: view +slug: Web/SVG/Element/view +tags: + - SVG + - 元素 + - 参考 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/view +--- +<div>{{SVGRef}}</div> + +<p><code>view</code>元素是查看图片的一个限定方法，就像一个缩放级别或者一个详细视图。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("viewBox") }}</li> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("zoomAndPan") }}</li> + <li>{{ SVGAttr("viewTarget") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGViewElement" title="en/DOM/SVGViewElement">SVGViewElement</a></code>接口。</p> diff --git a/files/zh-cn/web/svg/element/vkern/index.html b/files/zh-cn/web/svg/element/vkern/index.html new file mode 100644 index 0000000000..2ba71bbbc7 --- /dev/null +++ b/files/zh-cn/web/svg/element/vkern/index.html @@ -0,0 +1,77 @@ +--- +title: vkern +slug: Web/SVG/Element/vkern +tags: + - SVG + - SVG字体 + - 元素 + - 参考 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/vkern +--- +<div>{{SVGRef}}{{deprecated_header}}</div> + +<p>在自上而下的字体中，<code>vkern</code> 元素可以精确地调整两个字符（glyph）间的垂直距离。这个处理被称为<a href="http://en.wikipedia.org/wiki/Kerning">字距处理</a>。</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("u1") }}</li> + <li>{{ SVGAttr("g1") }}</li> + <li>{{ SVGAttr("u2") }}</li> + <li>{{ SVGAttr("g2") }}</li> + <li>{{ SVGAttr("k") }}</li> +</ul> + +<h2 id="示例">示例</h2> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了 {{domxref("SVGVKernElement")}} 接口。</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('SVG1.1', 'fonts.html#VKernElement', '<vkern>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.elements.vkern")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("hkern") }}</li> + <li><a href="/en-US/docs/Web/SVG/Tutorial/SVG_fonts">SVG 教程：SVG 字体</a></li> +</ul> |