diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/svg | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/svg')
200 files changed, 20016 insertions, 0 deletions
diff --git a/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.html b/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.html new file mode 100644 index 0000000000..5ba1fd3b42 --- /dev/null +++ b/files/zh-cn/web/svg/applying_svg_effects_to_html_content/index.html @@ -0,0 +1,240 @@ +--- +title: 在 HTML 内容中应用 SVG 效果 +slug: Web/SVG/Applying_SVG_effects_to_HTML_content +tags: + - CSS + - HTML + - SVG + - XHTML + - 指南 + - 需要示例 +translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +--- +<p>现代浏览器支持在 <a href="/en-US/docs/Web/CSS" title="Cascading Style Sheets">CSS</a> 样式中使用 <a href="/en-US/docs/SVG">SVG</a> 来对HTML内容应用图像效果。</p> + +<p>你可以在同一文件中使用SVG样式，也可以通过外部样式表引入。有三个属性可以使用： <a href="/en-US/docs/Web/CSS/mask"><code>mask</code></a>, <a href="/en-US/docs/Web/CSS/clip-path"><code>clip-path</code></a>, 和 <code><a href="/en-US/docs/Web/CSS/filter">filter</a>。</code></p> + +<div class="note"><strong>注意:</strong> 在外部文件引入的SVG必须与原始文件 <a href="/en-US/docs/Web/Security/Same-origin_policy">同源</a> 。</div> + +<h2 id="使用内嵌SVG">使用内嵌SVG</h2> + +<p>要想在CSS样式中应用SVG效果，首先需要创建一个引用SVG的CSS样式。</p> + +<pre class="brush: html notranslate"><style>p { mask: url(#my-mask); }</style></pre> + +<p>在上面的例子中, 所有段落会被<a href="/en-US/docs/Web/HTML/Global_attributes/id">ID</a> 为<code>my-mask的</code><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask">SVG <code><mask></code></a>遮罩.</p> + +<h3 id="例子_Masking">例子: Masking</h3> + +<p>例如，你可以在你的HTML文档中用SVG和CSS代码对HTML内容作渐变mask效果。</p> + +<pre class="brush: html notranslate"><svg height="0"> + <mask id="mask-1"> + <linearGradient id="gradient-1" y2="1"> + <stop stop-color="white" offset="0"/> + <stop stop-opacity="0" offset="1"/> + </linearGradient> + <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/> + </mask> +</svg> +</pre> + +<pre class="brush: css notranslate">.target { + mask: url(#mask-1); +} +p { + width: 300px; + border: 1px solid #000; + display: inline-block; +}</pre> + +<p>注意，在CSS中 遮罩（mask） 使用一个指向 ID 为 <code>#mask-1</code>的URL，这个ID是在上面的SVG中指定的。 SVG中其他的内容指定了渐变遮罩的细节。</p> + +<p>将SVG效果应用于 (X)HTML 是通过将 <code>target</code> 这个class应用于其他元素来实现的，如下所示：</p> + +<pre class="brush: html notranslate"><p class="target" style="background:lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p> +</pre> + +<p>上面的示例将渲染出一个有遮罩的例子</p> + +<p>{{EmbedLiveSample('Example_Masking', 650, 200)}}</p> + +<h3 id="例子_Clipping">例子: Clipping</h3> + +<p>此示例演示如何使用SVG剪辑HTML内容。请注意，即使链接的可点击区域也被剪切。</p> + +<pre class="brush: html notranslate"><p class="target" style="background:lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p> + +<button onclick="toggleRadius()">Toggle radius</button> + +<svg height="0"> + <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox"> + <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> + <rect x="0.5" y="0.2" width="0.5" height="0.8"/> + </clipPath> +</svg> +</pre> + +<pre class="brush: css notranslate">.target { + clip-path: url(#clipping-path-1); +} +p { + width: 300px; + border: 1px solid #000; + display: inline-block; +}</pre> + +<p>这个例子将建立一个由圆形和矩形组成的剪切区域，为其指定 ID <code>#clipping-path-1</code>，然后在CSS中引用它。剪切路径可以分配给具有 <code>target</code> class的任何元素。</p> + +<p>你可以实时地对SVG进行更改，并看到它们立即影响HTML的渲染。例如，可以在上面建立的剪切路径中调整圆形的大小：</p> + +<pre class="brush: js notranslate">function toggleRadius() { + var circle = document.getElementById("circle"); + circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; +} +</pre> + +<p>{{EmbedLiveSample('Example_Clipping', 650, 200)}}</p> + +<h3 id="例子_Filtering">例子: Filtering</h3> + +<p>这个例子演示了如何使用SVG对HTML内容进行过滤。它建立了几个过滤器，这些过滤器与CSS一起作用于正常和鼠标悬停状态 <a href="/en-US/docs/Web/CSS/:hover">hover</a> 下的三个元素。</p> + +<pre class="brush: html notranslate"><p class="target" style="background: lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<pre class="target">lorem</pre> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p> +</pre> + +<p>任何SVG过滤器都可以这样使用。例如，要应用模糊效果，你可以这样使用：</p> + +<pre class="brush: html notranslate"><svg height="0"> + <filter id="f1"> + <feGaussianBlur stdDeviation="3"/> + </filter> +</svg></pre> + +<p>也可以应用于颜色矩阵：</p> + +<pre class="brush: html notranslate"><svg height="0"> + <filter id="f2"> + <feColorMatrix values="0.3333 0.3333 0.3333 0 0 + 0.3333 0.3333 0.3333 0 0 + 0.3333 0.3333 0.3333 0 0 + 0 0 0 1 0"/> + </filter> +</svg> +</pre> + +<p>或更多的过滤器：</p> + +<pre class="brush: html notranslate"><span><svg height="0"> +</span> <filter id="f3"> + <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/> + </filter> + <filter id="f4"> + <feSpecularLighting surfaceScale="5" specularConstant="1" + specularExponent="10" lighting-color="white"> + <fePointLight x="-5000" y="-10000" z="20000"/> + </feSpecularLighting> + </filter> + <filter id="f5"> + <feColorMatrix values="1 0 0 0 0 + 0 1 0 0 0 + 0 0 1 0 0 + 0 1 0 0 0" style="color-interpolation-filters:sRGB"/> + </filter> +<span></svg></span></pre> + +<p>使用以下CSS应用五个过滤器：</p> + +<pre class="brush: css notranslate">p.target { filter:url(#f3); } +p.target:hover { filter:url(#f5); } +b.target { filter:url(#f1); } +b.target:hover { filter:url(#f4); } +pre.target { filter:url(#f2); } +pre.target:hover { filter:url(#f3); } +</pre> + +<p>{{EmbedLiveSample('Example_Filtering', 650, 200)}}</p> + +<p style="display: none;"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p> + +<h3 id="例子_Blurred_Text">例子: Blurred Text</h3> + +<p>为了模糊文本，基于Webkit的浏览器有一个名为blur的（前缀）CSS过滤器，（另见 <a href="/en-US/docs/Web/CSS/filter#blur%28%29_2">CSS filter</a>）。你可以使用SVG过滤器获得相同的效果。</p> + +<pre class="brush: html notranslate"><p class="blur">Time to clean my glasses</p> +<svg height="0"> + <defs> + <filter id="wherearemyglasses" x="0" y="0"> + <feGaussianBlur in="SourceGraphic" stdDeviation="1"/> + </filter> + </defs> +</svg> +</pre> + +<p>你可以在同一个class中使用SVG和CSS过滤器：</p> + +<pre class="brush: css notranslate">.blur { filter: url(#wherearemyglasses); }</pre> + +<p>{{ EmbedLiveSample('Example_Blurred_Text', 300, 100) }}</p> + +<p>模糊的计算量很大，所以请谨慎使用它，尤其是在包含滚动或动画的元素中。</p> + + + +<h3 id="例子_Text_Effects">例子: Text Effects</h3> + +<p>SVG 还可以用于添加比纯HTML文本更动态、更灵活的文本添加方法。</p> + +<p>通过使用SVG元素与HTML结合创建文本，你可以产生不同的文本的效果。如旋转文本：</p> + +<pre class="notranslate"><svg height="60" width="200"> + <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">Example text</text> +</svg></pre> + +<h2 id="使用外部引用">使用外部引用</h2> + +<p>用来clipping，masking，filtering的SVG可以从其他外部源载入，只要外部源是与要使用SVG的该HTML文档同源的。</p> + +<p>例如，CSS规则在一个名为default.css的文件中，如下这样：</p> + +<pre class="brush: css notranslate" id="line1">.target { clip-path: url(resources.svg#c1); }</pre> + +<p>这个SVG就可以从一个名为resources.svg的文件中导入，clip路径为ID c1。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/SVG" title="SVG">SVG</a></li> + <li><a class="external" href="http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html">SVG Effects for HTML Content</a> (blog post)</li> + <li><del><a class="external" href="/web-tech/2008/10/10/svg-external-document-references">SVG External Document References</a></del> (blog post) (<a href="http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/" title="Web Tech Blog » Blog Archive » SVG External Document References">[archive.org] Web Tech Blog » Blog Archive » SVG External Document References</a>)</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/accent-height/index.html b/files/zh-cn/web/svg/attribute/accent-height/index.html new file mode 100644 index 0000000000..ba39552047 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/accent-height/index.html @@ -0,0 +1,43 @@ +--- +title: accent-height +slug: Web/SVG/Attribute/accent-height +translation_of: Web/SVG/Attribute/accent-height +--- +<p>« 回到SVG属性指南首页</p> + +<p>此属性定义从原点到重点字符顶部的距离，通过字体坐标系内的距离测量。</p> + +<p>若未定义该属性，那么该属性就会被设置为{{ SVGAttr("ascent") }}。</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/fonts.html#FontFaceElementAccentHeightAttribute" title="http://www.w3.org/TR/SVG/fonts.html#FontFaceElementAccentHeightAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en-US/docs/SVG/Content_type","Number") }}</p> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>accent-height</code> attribute</p> + +<ul> + <li>{{ SVGElement("font-face") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/accumulate/index.html b/files/zh-cn/web/svg/attribute/accumulate/index.html new file mode 100644 index 0000000000..8a779fd704 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/accumulate/index.html @@ -0,0 +1,58 @@ +--- +title: accumulate +slug: Web/SVG/Attribute/accumulate +tags: + - SVG + - SVG属性 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/accumulate +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性控制了动画是否是累加的。</p> + +<p>在原来的结果的基础上重复动画的时候，它通常很有用，每一次循环都累加。这个属性告诉动画是否是每次循环，前一个动画属性值要加上去。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画累加属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong title="this is the default value">none</strong> | sum</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#AdditionAttributes" title="http://www.w3.org/TR/SVG/animate.html#AdditionAttributes">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>sum</dt> + <dd>指定第一次循环后的每次循环建立在上次循环的终值上。</dd> + <dt>none</dt> + <dd>指定重复循环是不累加的。这是默认值。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>additive</code>属性：</p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateMotion") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/alignment-baseline/index.html b/files/zh-cn/web/svg/attribute/alignment-baseline/index.html new file mode 100644 index 0000000000..33eb2afa6c --- /dev/null +++ b/files/zh-cn/web/svg/attribute/alignment-baseline/index.html @@ -0,0 +1,92 @@ +--- +title: alignment-baseline +slug: Web/SVG/Attribute/alignment-baseline +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/alignment-baseline +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>alignment-baseline</code>属性指定了一个对象如何相对于它的父元素对齐。这个属性指定了该元素的基线对齐到相应的父元素的基线。举个例子，允许罗马文字中的字母表基线在字体大小发生变化时保持一致。它的默认值是baseline，与该<code>alignment-baseline</code>属性的计算值同名。</p> + +<p>作为一个外观属性，它还可以直接作为CSS样式表内部的属性使用。请阅读{{ cssxref("alignment-baseline","CSS alignment-baseline") }}以了解更多信息。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong>auto</strong> | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AlignmentBaselineProperty" title="http://www.w3.org/TR/SVG11/text.html#AlignmentBaselineProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre><code><?xml version="1.0"?> +<svg width="300" height="120" viewBox="0 0 300 120" + xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <!-- Materialisation of anchors --> + <path d="M60,10 L60,110 + M30,10 L300,10 + M30,65 L300,65 + M30,110 L300,110 + " stroke="grey" /> + + <!-- Anchors in action --> + <text alignment-baseline="hanging" + x="60" y="10">A hanging</text> + + <text alignment-baseline="middle" + x="60" y="65">A middle</text> + + <text alignment-baseline="baseline" + x="60" y="110">A baseline</text> + + <!-- Materialisation of anchors --> + <circle cx="60" cy="10" r="3" fill="red" /> + <circle cx="60" cy="65" r="3" fill="red" /> + <circle cx="60" cy="110" r="3" fill="red" /> + +<style><![CDATA[ +text{ + font: bold 36px Verdana, Helvetica, Arial, sans-serif; +} +]]></style> +</svg></code> +</pre> + +<h2 id="元素">元素</h2> + +<p>下列元素使用<code>alignment-baseline属性：</code></p> + +<ul> + <li>{{ SVGElement("tspan") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("textPath") }}</li> +</ul> + +<p>如果对象要在别的元素中对齐（比如在{{ SVGElement("text") }}元素中），请阅读{{ SVGAttr("dominant-baseline") }}。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ cssxref("alignment-baseline","CSS alignment-baseline") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/attributename/index.html b/files/zh-cn/web/svg/attribute/attributename/index.html new file mode 100644 index 0000000000..0f7b065b02 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/attributename/index.html @@ -0,0 +1,64 @@ +--- +title: attributeName +slug: Web/SVG/Attribute/attributeName +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/attributeName +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性标识了在一个动画动作环节中，父元素的需要被改变的属性名。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画属性目标属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><attributeName></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#AttributeNameAttribute" title="http://www.w3.org/TR/SVG/animate.html#AttributeNameAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>下面的示例使用了y作为<code>attributeName</code>，通过改变一个矩形在Y轴上的位置来变动这个矩形。</p> + +<pre class="brush: xml"><?xml version="1.0"?> +<svg width="250" height="250" + viewPort="0 0 250 250" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <rect x="50" y="50" width="100" height="100"> + <animate attributeType="XML" + attributeName="y" + from="0" to="50" + dur="5s"/> + </rect> +</svg></pre> + +<p> </p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>attributeName</code>属性：</p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> + <li>{{ SVGElement("set") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/attributetype/index.html b/files/zh-cn/web/svg/attribute/attributetype/index.html new file mode 100644 index 0000000000..371d672c2b --- /dev/null +++ b/files/zh-cn/web/svg/attribute/attributetype/index.html @@ -0,0 +1,60 @@ +--- +title: attributeType +slug: Web/SVG/Attribute/attributeType +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/attributeType +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性指定目标属性和它相对应的值处于哪个命名空间里。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画属性目标属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td>CSS | XML | <strong title="this is the default value">auto</strong></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#AttributeTypeAttribute" title="http://www.w3.org/TR/SVG/animate.html#AttributeTypeAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>这个属性可取下列值之一：</p> + +<dl> + <dt>CSS</dt> + <dd>指定{{ SVGAttr("attributeName") }}的值是一个CSS属性名。</dd> + <dt> </dt> + <dt>XML</dt> + <dd>指定{{ SVGAttr("attributeName") }}的值是一个XML属性名，在目标元素的默认XML命名空间里。</dd> + <dt>auto</dt> + <dd>编译器将把{{ SVGAttr("attributeName") }}匹配到目标元素的一个属性。用户代理先搜索CSS属性列表以找出一个匹配的属性名，如果找不到，再为这个元素搜索默认XML命名空间。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>attributeType</code>属性：</p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> + <li>{{ SVGElement("set") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/baseline-shift/index.html b/files/zh-cn/web/svg/attribute/baseline-shift/index.html new file mode 100644 index 0000000000..b8f1c8f5f5 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/baseline-shift/index.html @@ -0,0 +1,69 @@ +--- +title: baseline-shift +slug: Web/SVG/Attribute/baseline-shift +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/baseline-shift +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>属性<code>baseline-shift</code>允许相对于父文本内容元素的<code>dominant-baseline</code>重定位<code>dominant-baseline</code>。该切换对象必须是一个下标或上标。</p> + +<p>作为一个外观属性，它还可以直接作为CSS样式表内部的属性使用。请看{{ cssxref("baseline-shift","CSS baseline-shift") }}以了解更多信息。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong>auto</strong> | baseline | super | sub | <percentage> | <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a> | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty" title="http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>baseline</dt> + <dd>没有基线切换，<code>dominant-baseline</code>依然在原来的位置。</dd> + <dt>sub</dt> + <dd><code>dominant-baseline</code>切换到下标的默认位置。</dd> + <dt>super</dt> + <dd><code>dominant-baseline</code>切换到上标的默认位置</dd> + <dt><percentage></dt> + <dd>该属性的结果值是这个百分数乘以 {{ SVGElement("text") }}元素的{{ SVGAttr("line-height") }}。如果是正值，dominant-baseline向shift同方向移动结果值；如果是负值，dominant-baseline向shift反方向移动结果值，相对于父文本内容元素。值“0%”等于”baseline“。</dd> + <dt><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></dt> + <dd>如果是正值，dominant-baseline向shift同方向移动<a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>距离；如果是负值，dominant-baseline向shift反方向移动<a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>距离。值”0cm“等于”baseline“。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p><code><font face="Open Sans, Arial, sans-serif">下列这些元素可以使用</font>baseline-shift</code>属性。</p> + +<ul> + <li>{{ SVGElement("tspan") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("textPath") }}</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ cssxref("baseline-shift","CSS baseline-shift") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/baseprofile/index.html b/files/zh-cn/web/svg/attribute/baseprofile/index.html new file mode 100644 index 0000000000..973a26bcf7 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/baseprofile/index.html @@ -0,0 +1,61 @@ +--- +title: baseProfile +slug: Web/SVG/Attribute/baseProfile +translation_of: Web/SVG/Attribute/baseProfile +--- +<p>« 返回 SVG 特性参考</p> + +<p><code>baseProfile</code> 特性描述了作者认为正确渲染内容所需要的最小的 SVG 语言概述。这个特性不会说明任何处理限制，可以把它看作是元数据。 比如，这个特性的值可以被编辑工具用来在用户的修改超出所指定的基准概述范围时发出警告。</p> + +<p>每个 SVG 概述应该为这个特性定义一个适合的文本。如果没有指定这个特性，效果就跟指定 <code>none</code> 一样。</p> + +<h2 id="使用背景">使用背景</h2> + +<table> + <tbody> + <tr> + <th scope="row">目录</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong>none</strong> | full| basic| tiny </td> + </tr> + <tr> + <th scope="row">动画特性</th> + <td>无</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a href="http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty" title="http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty">SVG 1.1 (第二版)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>none</dt> + <dd>代表了最小的 SVG 语言配置，没有描述作者关于正确渲染内容的观点。</dd> + <dt>full</dt> + <dd>代表一个正常的概述，适用于 PC。</dd> + <dt>basic</dt> + <dd>代表一个轻量级的概述，适用于 PDA。</dd> + <dt>tiny </dt> + <dd>代表更轻量的概述，适用于手机。</dd> +</dl> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><svg width="120" height="120" version="1.1" + xmlns="http://www.w3.org/2000/svg" baseProfile="full"> + + ... + +</svg></pre> + +<h2 id="元素">元素</h2> + +<p>以下元素会用到 <code>baseProfile</code> 特性</p> + +<ul> + <li>{{ SVGElement("svg") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/begin/index.html b/files/zh-cn/web/svg/attribute/begin/index.html new file mode 100644 index 0000000000..a7c87621b0 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/begin/index.html @@ -0,0 +1,85 @@ +--- +title: begin +slug: Web/SVG/Attribute/begin +tags: + - SVG + - SVG属性 + - 参考 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/begin +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>这个属性定义了动画何时开始。</p> + +<p>这个属性值是一个分号分隔的数列值。SMIL规范的<a class="external" href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists" title="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists">"Evaluation of begin and end time lists"</a>章节详细解释了开始时间数列。每个单独的值可以是下述之一：<code><offset-value></code>、 <code><syncbase-value></code>、 <code><event-value></code>、 <code><repeat-value></code>、 <code><accessKey-value></code>、 <code><wallclock-sync-value></code>或者关键词<code>indefinite</code>。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画定时属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><begin-value-list></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#BeginAttribute" title="http://www.w3.org/TR/SVG/animate.html#BeginAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p><code><begin-value-list></code>中的每一个值可以是下述之一：</p> + +<dl> + <dt><offset-value></dt> + <dd>一个<a href="/en/SVG/Content_type#Clock-value" title="en/SVG/Content_type#Clock-value">时钟值</a>代表了一个相对于SVG文档开头的时间点，SVG文档开头通常是指load事件或者DOMReady事件触发的时间点。负值是合法的。</dd> + <dt><syncbase-value></dt> + <dd>描述一个<em>syncbase</em>以及一个可选的来自于<em>syncbase</em>的时偏移。元素的动画开始时间被定义为相对于另一个动画的开头或者激活结束。一个ID及其后面跟着的.begin或.end构成了一个syncbase，ID引用到另一个动画元素，.begin或.end用来确定到底是与引用的动画元素的动画开头同步、 还是与引用的动画元素的动画激活结束同步。</dd> + <dt><event-value></dt> + <dd><font face="Consolas, Liberation Mono, Courier, monospace">描述了一个事件以及一个可选的时偏移，用来确定动画开始的时点。触发指定事件的时点，被定义为动画开始的时点。一个元素ID及其后面跟着的一个点及其后面跟着事件名构成了一个合法的event-value值。事件名必须是元素支持的事件名。全部合法的事件（不一定是所有元素都支持的事件）包括这些：focusin、 focusout、 </font><code>activate</code>、 <code>click</code>、 <code>mousedown</code>、 <code>mouseup</code>、 <code>mouseover</code>、 <code>mousemove</code>、 <code>mouseout</code>、 <code>DOMSubtreeModified</code>、 <code>DOMNodeInserted</code>、 <code>DOMNodeRemoved</code>、 <code>DOMNodeRemovedFromDocument</code>、 <code>DOMNodeInsertedIntoDocument</code>、 <code>DOMAttrModified</code>、 <code>DOMCharacterDataModified</code>、 <code>SVGLoad</code>、 <code>SVGUnload</code>、 <code>SVGAbort</code>、 <code>SVGError</code>、 <code>SVGResize</code>、 <code>SVGScroll</code>、 <code>SVGZoom</code>、 <code>beginEvent</code>、 <code>endEvent</code>和<code>repeatEvent。</code></dd> + <dt><repeat-value></dt> + <dd>描述了一个符合条件重复事件。repeat事件发生了指定次数的时间点，被定义为元素动画的开始时间点。</dd> + <dt><accessKey-value></dt> + <dd>描述了一个用来触发动画的访问键。当用户按下指定的键时，元素动画就开始了。</dd> + <dt><wallclock-sync-value></dt> + <dd>描述了一个动画开始时间，是真实世界钟的时点。时点的句法遵守ISO8601定义的句法。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Offset示例">Offset示例</h3> + +<p>» <a href="https://developer.mozilla.org/files/3290/begin-1-offset.svg" title="https://developer.mozilla.org/files/3290/begin-1-offset.svg">begin-1-offset.svg</a></p> + +<h3 id="Syncbase示例">Syncbase示例</h3> + +<p>» <a href="https://developer.mozilla.org/files/3291/begin-2-syncbase.svg" title="https://developer.mozilla.org/files/3291/begin-2-syncbase.svg">begin-2-syncbase.svg</a></p> + +<h3 id="Event示例">Event示例</h3> + +<p>» <a href="https://developer.mozilla.org/files/3292/begin-3-event.svg" title="https://developer.mozilla.org/files/3292/begin-3-event.svg">begin-3-event.svg</a></p> + +<h3 id="Repeat示例">Repeat示例</h3> + +<p>» <a href="https://developer.mozilla.org/files/3293/begin-4-repeat.svg" title="https://developer.mozilla.org/files/3293/begin-4-repeat.svg">begin-4-repeat.svg</a></p> + +<h3 id="Accesskey示例">Accesskey示例</h3> + +<p>» <a href="https://developer.mozilla.org/files/3294/begin-5-accesskey.svg" title="https://developer.mozilla.org/files/3294/begin-5-accesskey.svg">begin-5-accesskey.svg</a></p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>begin</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">动画元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/calcmode/index.html b/files/zh-cn/web/svg/attribute/calcmode/index.html new file mode 100644 index 0000000000..dc03724a62 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/calcmode/index.html @@ -0,0 +1,17 @@ +--- +title: calcMode +slug: Web/SVG/Attribute/calcMode +translation_of: Web/SVG/Attribute/calcMode +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>This attribute specifies the interpolation mode for the animation. The default mode is <strong>linear</strong>, however if the attribute does not support linear interpolation (e.g. for strings), the <code>calcMode</code> attribute is ignored and discrete interpolation is used.</p> +<h2 id="Usage_context">Usage context</h2> +<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Animation value attribute</td> </tr> <tr> <th scope="row">Value</th> <td>discrete | linear | paced | spline</td> </tr> <tr> <th scope="row">Animatable</th> <td>No</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute" title="http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> +</table> +<dl> <dt>discrete</dt> <dd>This specifies that the animation function will jump from one value to the next without any interpolation.</dd> <dt>linear</dt> <dd>Simple linear interpolation between values is used to calculate the animation function. Except for {{ SVGElement("animateMotion") }}, this is the default value.</dd> <dt>paced</dt> <dd>Defines interpolation to produce an even pace of change across the animation. This is only supported for values that define a linear numeric range, and for which some notion of "distance" between points can be calculated (e.g. position, width, height, etc.). If paced is specified, any {{ SVGAttr("keyTimes") }} or {{ SVGAttr("keySplines") }} will be ignored. For {{ SVGElement("animateMotion") }}, this is the default value.</dd> <dt>spline</dt> <dd>Interpolates from one value in the {{ SVGAttr("values") }} list to the next according to a time function defined by a cubic Bézier spline. The points of the spline are defined in the {{ SVGAttr("keyTimes") }} attribute, and the control points for each interval are defined in the {{ SVGAttr("keySplines") }} attribute.</dd> +</dl> +<h2 id="Example">Example</h2> +<h2 id="Elements">Elements</h2> +<p>The following elements can use the <code>calcMode</code> attribute</p> +<ul> <li>{{ SVGElement("animate") }}</li> <li>{{ SVGElement("animateColor") }}</li> <li>{{ SVGElement("animateMotion") }}</li> <li>{{ SVGElement("animateTransform") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/clip-path/index.html b/files/zh-cn/web/svg/attribute/clip-path/index.html new file mode 100644 index 0000000000..c05dcf75d4 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/clip-path/index.html @@ -0,0 +1,111 @@ +--- +title: clip-path +slug: Web/SVG/Attribute/clip-path +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/clip-path +--- +<div>{{SVGRef}}</div> + +<p>元素的表现属性 <strong><code>clip-path</code></strong> 为其定义或关联一条剪切路径。</p> + +<p class="note"><strong>注意：</strong><code>clip-path</code> 是一个表现属性，可以作为 CSS 属性使用。</p> + +<p>作为一种表现属性，<code>clip-path</code> 可以用于任何元素，不过效果最明显的是下列十九种元素：{{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('use')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + <clipPath id="myClip" clipPathUnits="objectBoundingBox"> + <circle cx=".5" cy=".5" r=".5" /> + </clipPath> + + <!-- 左上：应用自定义的剪切路径 --> + <rect x="1" y="1" width="8" height="8" stroke="green" + clip-path="url(#myClip)" /> + + <!-- 右上：应用 CSS 基本形状和 fill-box 几何。 + 实质上和自定义剪切路径并把 clipPathUnits + 设成 objectBoundingBox 一样 --> + <rect x="11" y="1" width="8" height="8" stroke="green" + clip-path="circle() fill-box" /> + + <!-- 左下 --> + <rect x="1" y="11" width="8" height="8" stroke="green" + clip-path="circle() stroke-box" /> + + <!-- 右下：应用CSS基本形状和 view-box 几何。 + 实质上和自定义剪切路径并把 clipPathUnits + 设成 userSpaceOnUse 一样 --> + <rect x="11" y="11" width="8" height="8" stroke="green" + clip-path="circle() view-box" /> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">值</th> + <td>{{cssxref('url')}} | [ {{cssxref('basic-shape')}} || <code><geometry-box></code> ] | <code>none</code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>是</td> + </tr> + </tbody> +</table> + +<dl> + <dt><geometry-box></dt> + <dd>geometry-box 是应用 {{cssxref('basic-shape')}} 的额外信息，用于区分 CSS 基本形状如何应用于元素上：<code>fill-box</code> 表示将对象的包围框作为参照框；<code>stroke-box</code> 表示将对象的包围框加上描边的范围作为参照框；<code>view-box</code> 表示使用最近的 SVG 视窗作为参照框。</dd> +</dl> + +<p class="note"><strong>注意：</strong>clip-path 语法的更多细节可参考 CSS 属性 {{cssxref('clip-path')}} 的参考页面。</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容</h2> + + + +<p>{{Compat("svg.attributes.presentation.clip-path")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td> + <td>{{Spec2('CSS Masks')}}</td> + <td>Extends its application to HTML elements. The <code>clip-path</code> property replaces the deprecated {{cssxref("clip")}} property.</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition (applies to SVG elements only).</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The CSS {{cssxref("clip-path")}} property</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/clip/index.html b/files/zh-cn/web/svg/attribute/clip/index.html new file mode 100644 index 0000000000..8409d35fca --- /dev/null +++ b/files/zh-cn/web/svg/attribute/clip/index.html @@ -0,0 +1,92 @@ +--- +title: clip +slug: Web/SVG/Attribute/clip +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/clip +--- +<div>{{SVGRef}}{{deprecated_header}}</div> + +<p><strong><code>clip</code></strong> 属性是定义元素可见区域的属性。</p> + +<p><code>clip</code> 属性的参数值与 {{ cssxref("clip","CSS clip property") }} 的参数值定义相同。指示当前用户坐标的无单位的值，可以用在 <code><shape></code> 的坐标值上。<code>auto</code> 值定义了一个剪切路径，其边界沿着由给定元素创建的视口的边界。</p> + +<p>As a presentation attribute, it can be applied to any element but it has effect only on the following six elements: {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, {{ SVGElement("image") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("pattern") }}, {{ SVGElement("marker") }}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> + <!-- Auto clipping --> + <svg x="0" width="10" height="10" + clip="auto"> + <circle cx="5" cy="5" r="4" stroke="green" /> + </svg> + + <!-- Rect(top, right, bottom, left) clipping --> + <svg x="10" width="10" height="10" + clip="rect(1, 9, 8, 2)"> + <circle cx="5" cy="5" r="4" stroke="green" /> + </svg> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p> +</div> + +<h2 id="用法">用法</h2> + +<p class="warning"><strong>Warning:</strong> This property is deprecated. Use {{cssxref("clip-path")}} instead.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">可用值</th> + <td><strong>auto</strong> | <shape> | inherit</td> + </tr> + <tr> + <th scope="row">默认值</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p>The value <code>auto</code> defines a clipping path along the bounds of the viewport created by the given element.</p> + +<p>The value <code>rect()</code> defines a clipping rectangle following the following syntax: <code>rect(<top>, <right>, <bottom>, <left>)</code>. The <code><top></code> and <code><bottom></code> values specify offsets from the <em>top border edge</em> of the element viewport, while <code><right></code> and <code><left></code> specify offsets from the <em>left border edge</em> of the element viewport.</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.attributes.presentation.clip")}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Masks', '#clip-property', 'clip')}}</td> + <td>{{Spec2('CSS Masks')}}</td> + <td>Deprecates <code>clip</code> property, suggests {{cssxref("clip-path")}} as replacement.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "masking.html#ClipProperty", "clip")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/color/index.html b/files/zh-cn/web/svg/attribute/color/index.html new file mode 100644 index 0000000000..787576df09 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/color/index.html @@ -0,0 +1,63 @@ +--- +title: color +slug: Web/SVG/Attribute/color +tags: + - SVG + - SVG属性 +translation_of: Web/SVG/Attribute/color +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考主页</a></p> + +<p><code>color</code> 属性用来为 {{ SVGAttr("fill") }} 属性、{{ SVGAttr("stroke") }} 属性、{{ SvgAttr("stop-color") }} 属性、{{ SVGAttr("flood-color") }} 属性和 {{ SVGAttr("lighting-color") }} 属性提供一个潜在的间接值（<code>currentColor</code>）。</p> + +<p>作为一个外观属性，它还可以直接用作CSS样式表的属性。请阅读 {{ cssxref("color","CSS color") }} 以了解更多信息。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a> | inherit</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProperty" title="http://www.w3.org/TR/SVG11/color.html#ColorProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <g color="green"> + <rect width="50" height="50" fill="currentColor" /> + <circle r="25" cx="70" cy="70" stroke="currentColor" fill="none" stroke-width="5" /> + </g> +</svg> +</pre> + +<p>{{ EmbedLiveSample('Example', '100%', '110') }}</p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>color</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">文本内容元素</a> »</li> + <li><a href="/en/SVG/Element#Shape_elements" title="en/SVG/Element#Shape_elements">形状元素</a> »</li> + <li>{{ SVGElement("stop") }}</li> + <li>{{ SVGElement("feFlood") }}</li> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> +</ul> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.attributes.presentation.color")}}</p> diff --git a/files/zh-cn/web/svg/attribute/cx/index.html b/files/zh-cn/web/svg/attribute/cx/index.html new file mode 100644 index 0000000000..bb7c027b2d --- /dev/null +++ b/files/zh-cn/web/svg/attribute/cx/index.html @@ -0,0 +1,172 @@ +--- +title: cx +slug: Web/SVG/Attribute/cx +tags: + - SVG + - SVG属性 +translation_of: Web/SVG/Attribute/cx +--- +<div>{{SVGRef}}</div> + +<p><strong><code>cx</code></strong> 属性定义一个中心点的 x 轴坐标。</p> + +<p>有三个元素在使用此属性：{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, 和 {{SVGElement("radialGradient")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> + <radialGradient cx="25%" id="myGradient"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + + <circle cx="50" cy="50" r="45"/> + <ellipse cx="150" cy="50" rx="45" ry="25" /> + <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" /> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', 100, 100)}}</p> +</div> + +<h2 id="圆">圆</h2> + +<p>对于 {{SVGElement('circle')}}，<code>cx</code> 用来定义图形中心的 x 轴坐标。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note">注：起始于 SVG2 <code>cx</code>，是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。</p> + +<h2 id="椭圆">椭圆</h2> + +<p>对于 {{SVGElement('ellipse')}}，<code>cx</code> 用来定义图形中心的 x 轴坐标。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注：</strong> 起始于 SVG2 <code>cx</code>，是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。</p> + +<h2 id="径向渐变">径向渐变</h2> + +<p>对于 {{SVGElement('radialGradient')}}, <code>cx</code> 用来定义径向渐变终止圆的 x 轴坐标。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>50%</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h4 id="示例">示例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient cx="0" id="myGradient000"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + + <radialGradient cx="50%" id="myGradient050"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + + <radialGradient cx="100%" id="myGradient100"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + </defs> + + <rect x="1" y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /> + <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /> + <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /> +</svg></pre> + +<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</p> + +<h2 id="技术规范">技术规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">技术规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#CX", "cx")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition as a geometry property</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for SVG2 paint servers.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><radialGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><ellipse></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><circle></code></td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/cy/index.html b/files/zh-cn/web/svg/attribute/cy/index.html new file mode 100644 index 0000000000..c4468107ba --- /dev/null +++ b/files/zh-cn/web/svg/attribute/cy/index.html @@ -0,0 +1,172 @@ +--- +title: cy +slug: Web/SVG/Attribute/cy +tags: + - SVG + - SVG属性 +translation_of: Web/SVG/Attribute/cy +--- +<div>{{SVGRef}}</div> + +<p><strong><code>cy</code></strong> 属性定义一个中心点的 y 轴坐标。</p> + +<p>有三个元素在使用此属性：{{SVGElement("circle")}}，{{SVGElement("ellipse")}} 和 {{SVGElement("radialGradient")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> + <radialGradient cy="25%" id="myGradient"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + + <circle cy="50" cx="50" r="45"/> + <ellipse cy="150" cx="50" rx="45" ry="25" /> + <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" /> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 300)}}</p> +</div> + +<h2 id="圆">圆</h2> + +<p>对于 {{SVGElement('circle')}}，<code>cy</code> 用来定义图形中心的 y 轴坐标。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注：</strong>起始于 SVG2，<code>cy</code> 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。</p> + +<h2 id="椭圆">椭圆</h2> + +<p>对于 {{SVGElement('ellipse')}}，<code>cy</code> 用来定义图形中心的 y 轴坐标。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注：</strong>起始于 SVG2，<code>cy</code> 是一个几何属性，意味着该属性也可以用作椭圆的 CSS 属性。</p> + +<h2 id="径向渐变">径向渐变</h2> + +<p>对于 {{SVGElement('radialGradient')}}，<code>cy</code> 用来定义径向渐变终止圆的 y 轴坐标。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>50%</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h4 id="示例">示例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient cy="0" id="myGradient000"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + + <radialGradient cy="50%" id="myGradient050"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + + <radialGradient cy="100%" id="myGradient100"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + </defs> + + <rect x="1" y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /> + <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /> + <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /> +</svg></pre> + +<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</p> + +<h2 id="技术规范">技术规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">技术规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#CY", "cy")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition as a geometry property</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementCYAttribute", "cy")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for SVG2 paint servers.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCYAttribute", "cy")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><radialGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCYAttribute", "cy")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><ellipse></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCYAttribute", "cy")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><circle></code></td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/d/index.html b/files/zh-cn/web/svg/attribute/d/index.html new file mode 100644 index 0000000000..70fd4309b9 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/d/index.html @@ -0,0 +1,200 @@ +--- +title: d +slug: Web/SVG/Attribute/d +tags: + - SVG + - SVG元素 + - 参考 +translation_of: Web/SVG/Attribute/d +--- +<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性定义了一个路径。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>路径定义属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td> </td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#DurAttribute" title="http://www.w3.org/TR/SVG/animate.html#DurAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>属性<code>d</code>实际上是一个字符串，包含了一系列路径描述。这些路径由下面这些指令组成：</p> + +<ul> + <li>Moveto</li> + <li>Lineto</li> + <li>Curveto</li> + <li>Arcto</li> + <li>ClosePath</li> +</ul> + +<p>这些组合在一个字符串中。这些不同的命令是大小写敏感的；一个大写的命令指明它的参数是绝对位置，而小写的命令指明相对于当前位置的点。可以指定一个负数值作为命令的参数：负角度将是逆时针的，绝对x和y位置将视为负坐标。负相对x值将会往左移，而负相对y值将会向上移。</p> + +<h2 id="Moveto">Moveto</h2> + +<p><code>Moveto</code>指令可以被想象成拎起绘图笔，落脚到另一处。在上一个点和这个指定点之间没有线段绘制。用一个Moveto命令开始一个路径是好的作法，因为如果没有一个初始化的Moveto，执行命令时开始点会是上一个操作发生过的地方，这样可能造成不确定的行为。</p> + +<p>句法：</p> + +<ul> + <li><code>M x,y</code> 在这里x和y是绝对坐标，分别代表水平坐标和垂直坐标。</li> + <li><code>m dx,dy</code> 在这里dx和dy是相对于当前点的距离，分别是向右和向下的距离。</li> +</ul> + +<p>示例：</p> + +<ul> + <li>位于绝对位置x=50, y= 100：<code><path d="M50,100..." /></code></li> + <li>往右移50，往下移100：<code><path d="m50,100..." /></code></li> +</ul> + +<h2 id="Lineto">Lineto</h2> + +<p>和<code>Moveto</code>指令不同，<code>Lineto</code>指令将绘制一条直线段。这个直线段从当前位置移到指定位置。原生的<code>Lineto</code>命令的句法是”L x, y“或者”l dx, dy“，在这里x和y是绝对坐标，而dx和dy分别是向右和向下的距离。还有字母H和V，分别指定水平和垂直移动。它们的句法与L相同，它的小写版本是相对距离，大写版本是绝对位置。</p> + +<h2 id="Curveto">Curveto</h2> + +<p>Curvto命令指定了一个<a href="/User:Jt//Sandbox/Curves_in_Paths" title="Curves in Paths">贝塞尔曲线</a>。有两种类型的贝塞尔曲线：立方曲线和二次方曲线。二次方贝塞尔曲线是一种特殊的立方贝塞尔曲线，在这里，控制点的两端是相同的。二次方贝塞尔曲线的句法是”Q cx, cy x, y“或”q dcx, dcy dx, dy“。cx和cy都是控制点的绝对坐标，而dcx和dcy分别是控制点在x和y方向上的距离。</p> + +<div> +<p>立方贝赛尔曲线遵守二次方贝赛尔曲线同样的概念，但是它需要考虑两个控制点。立方贝塞尔曲线的句法是：”C c1x,c1y c2x,c2y x,y“或者”c dc1x,dc1y dc2x,dc2y dx,dy“，在这里，c1x、c1y和c2x、c2y是分别是初始点和结束点的控制点的绝对坐标。dc1x、dc1y和dc2x、dc2y都是相对于初始点，而不是相对于结束点的。dx和dy分别是向右和向下的距离。</p> + +<p>为了连缀平滑的贝塞尔曲线，还可以使用T和S命令。它们的语法比别的Curveto命令简单，因为它假定第一个控制点是从前一个控制点关于前一个点的反射，或者说如果没有前一个控制点的话它实际上就是前一个点。T的句法是”T x,y“或者”t dx,dy“，分别对应于绝对坐标和相对距离，用来创建二次方贝塞尔曲线。S用来创建立方贝塞尔曲线，语法是”S cx,cy x,y“或者”s dcx,dcy dx,dy“，在这里(d)cx指定第二个控制点。</p> + +<p>最后，所有的贝塞尔曲线命令可以制作出一个多边贝塞尔图形，先初始化命令，然后多次指定所有的参数，就可以制作出一个多边贝赛尔图形。因此，下面的两个命令可以创建完全相同的路径：</p> + +<div class="geckoVersionNote"> +<p><path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100" /><br> + <path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" /></p> +</div> + +<h2 id="Arcto">Arcto</h2> + +<p>有时候描述一个椭圆弧曲线路径要比描述一个贝塞尔曲线路径更简单。说到底，path元素支持Arcto命令。圆弧的中心由别的变量计算出。一个arcto的声明相对而言有点复Visual Studio：”A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y“。解构它，rx和ry分别是x和y方向的半径，而LargeArcFlag的值要到是0要么是1，用来确定是要画小弧（0）还是画大弧（1）。SweepFlag也要么是0要么是1，用来确定弧是顺时针方向（1）还是逆时针方向（0）。x和y是目的地的坐标。虽然xAxisRotate支持改变x轴相对于当前引用框架的方向，但是在Gecko 7中，这个参数看起来没什么效果。</p> + +<h2 id="ClosePath">ClosePath</h2> + +<p>ClosePath命令将在当前路径从，从当前点到第一个点简单画一条直线。它是最简单的命令，而且不带有任何参数。它沿着到开始点的最短的线性路径，如果别的路径落在这路上，将可能路径相交。句法是”Z“或”z“，两种写法作用都一样。</p> +</div> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>d</code>属性：</p> + +<ul> + <li>{{SVGElement("path")}} »</li> + <li>{{SVGElement("glyph")}} »</li> +</ul> + +<p>同样的规则可以应用到{{SVGElement("animate")}}动画路径上。</p> + +<h2 id="提醒">提醒</h2> + +<p>原点（坐标系0,0点）经常是上下文的<strong>左上角</strong>。然而{{SVGElement("glyph")}}元素的原点在它的字母框的<strong>左下角</strong>。</p> + +<p>在任何两个数字之间允许加一个逗号，但是在别的地方不允许加逗号。</p> + +<h2 id="示例">示例</h2> + +<pre><code><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"> + <path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/> +</svg></code></pre> + +<p>为了演示<code>d="M37,17v15H14V17H37z M50,0H0v50h50V0z"的实际意义，我们来讨论这个字符串的每一小段。</code></p> + +<p style="margin-bottom: 1em; font-size: 15px; color: rgb(34, 34, 34); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 19.5px;"><img alt="enter image description here" src="http://img3.douban.com/view/photo/large/public/p2316231190.jpg" style="height: 400px; max-width: 630px; width: 400px;"></p> + +<ul> + <li><code>d=" M37,17 || v15 || H14 || V17 || H37 ||z // M50,0 || H0 || v50 || h50 || V0 || z"</code></li> + <li><code>d=</code> + <ul> + <li>这个属性包含了构成整个SVG的字符串。</li> + </ul> + </li> + <li><code>M37,17</code> + <ul> + <li><font face="Consolas, Liberation Mono, Courier, monospace">M是MoveTo的缩写。大写的“M”意味着绝对坐标，小写的“m”意味着相对距离。它暗含着是基于开始坐标，线在框里面，而且你在方框内矩形的右上角开始。</font></li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">37是开始svg位置的缩写，在X轴坐标37像素处。</font></li> + <li><code>17开始svg位置，在y轴的17像素处。</code></li> + </ul> + </li> + <li>v15 + <ul> + <li>v代表垂直。大写的V意味着绝对坐标，小写的v表示相对的长度、距离。dx/dy和x/y可以用在H/V和h/v相应的位置里。</li> + <li>这里是表示相对于给定坐标画一条15像素的垂直线。它意味着你向下画15像素，到坐标37,32。</li> + </ul> + </li> + <li><code>H14</code> + <ul> + <li>H代表水平，它是绝对坐标，因为它是大写的。</li> + <li>从v15的终点开始，画一条水平线直到到达绝对坐标14，当到达x坐标14时结束画线。笔触位于坐标14,32。</li> + </ul> + </li> + <li><code>V17</code> + <ul> + <li>就像前面那样，从上一条线的终点开始，画一条垂直线，直到到达y轴坐标17。笔触位于坐标14,17。</li> + </ul> + </li> + <li>H37 + <ul> + <li>最后，从14,17开始，画一条水平线，直到到达x轴坐标37。笔触位于坐标37,17（M的值）</li> + </ul> + </li> + <li><code>z</code> + <ul> + <li>小写的z和大写的Z都是闭合一系列svg线段。</li> + </ul> + </li> + <li><code>,</code> + <ul> + <li>逗号开始下一串简单矢量图形线段。下一系列简单矢量线段将制作外层方框。</li> + </ul> + </li> + <li><code>M50,0</code> + <ul> + <li>在x轴50和y轴0处开始。</li> + </ul> + </li> + <li><code>H0</code> + <ul> + <li>画一条直线直到(0,0)。</li> + </ul> + </li> + <li><code>v50</code> + <ul> + <li>相对于0,0画一条50像素的垂直线。这条线将画到(0,50)。</li> + </ul> + </li> + <li><code>h50</code> + <ul> + <li>相对于(0,-50)画一条50像素的水平线。这条线将向右画到(50,50)。</li> + </ul> + </li> + <li><code>V0</code> + <ul> + <li>画一条垂直线直到到达y轴坐标0。这将画线到(50,0)，即M的值。</li> + </ul> + </li> + <li><code>z</code> + <ul> + <li>小写的z和大写的Z都是闭合一系列svg线段。</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/display/index.html b/files/zh-cn/web/svg/attribute/display/index.html new file mode 100644 index 0000000000..ca8987c416 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/display/index.html @@ -0,0 +1,130 @@ +--- +title: display +slug: Web/SVG/Attribute/display +translation_of: Web/SVG/Attribute/display +--- +<div>{{SVGRef}}</div> + +<p>The <code><strong>display</strong></code> attribute lets you control the rendering of graphical or container elements.</p> + +<p><code><strong>display</strong></code>属性让你可以控制图形元素或容器元素的渲染。</p> + +<p>A value of <code>display="none"</code> indicates that the given element and its children will not be rendered. Any value other than <code>none</code> or <code>inherit</code> indicates that the given element will be rendered by the browser.</p> + +<p><code>display="none"</code>表示该元素和它的子元素不会被渲染。而非<code>none</code>或<code>inherit</code>的值表示元素会被浏览器渲染。</p> + +<p>When applied to a container element, setting <code>display</code> to <code>none</code> causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group. This means that any child of an element with <code>display="none"</code> will never be rendered even if the child has a value for <code>display</code> other than <code>none</code>.</p> + +<p>当应用到容器元素时，将<code>display</code>设为<code>none</code>会导致容器与它所有的子元素不可见，如此看来，它在一组元素中表现地像一个元素组。这表示具有<code>display="none"</code>属性元素的所有子元素都不会被渲染，即使子元素的<code>display</code>并不是<code>none</code>。</p> + +<p>When the <code>display</code> attribute is set to <code>none</code>, then the given element does not become part of the rendering tree. It has implications for the {{SVGElement("tspan")}}, {{SVGElement("tref")}}, and {{SVGElement("altGlyph")}} elements, event processing, for bounding box calculations and for calculation of clipping paths:</p> + +<p><code>display</code>属性被设为<code>none</code>的元素不会成为渲染树的一部分。它涉及到{{SVGElement("tspan")}}, {{SVGElement("tref")}}, 和 {{SVGElement("altGlyph")}}元素、用于盒边界与路径剪裁计算的事件处理。</p> + +<ul> + <li>If <code>display</code> is set to <code>none</code> on a {{SVGElement("tspan")}}, {{SVGElement("tref")}}, or {{SVGElement("altGlyph")}} element, then the text string is ignored for the purposes of text layout.</li> +</ul> + +<p> 如果在{{SVGElement("tspan")}}, {{SVGElement("tref")}}, 或{{SVGElement("altGlyph")}}元素中<code>display</code>的属性值被设为<code>none</code>,则为了文字布局，文字字符串会被忽视掉。</p> + +<ul> + <li>Regarding events, if <code>display</code> is set to <code>none</code>, the element receives no events.</li> +</ul> + +<p> 至于事件，如果<code>display</code>被设为<code>none</code>则该元素不接受任何事件。</p> + +<ul> + <li>The geometry of a <a href="/en-US/docs/Web/SVG/Element#Graphics_elements">graphics element</a> with <code>display</code> set to <code>none</code> is not included in bounding box and clipping paths calculations.</li> +</ul> + +<p> 图形元素的<code>display</code>属性被设为<code>none</code>则不会被盒边界和路径剪裁计算中包含进去。</p> + +<p>The <code>display</code> attribute only affects the direct rendering of a given element, whereas it does not prevent elements from being referenced by other elements. For example, setting it to <code>none</code> on a {{SVGElement("path")}} element will prevent that element from getting rendered directly onto the canvas, but the {{SVGElement("path")}} element can still be referenced by a {{SVGElement("textPath")}} element; furthermore, its geometry will be used in text-on-a-path processing even if the {{SVGElement("path")}} has a <code>display</code> value of <code>none</code>.</p> + +<p><code>display</code>属性只影响能被直接渲染的元素，尽管它不能防止该元素被其他元素参考。例如：将{SVGElement("path")}}元素设为none，会使得该元素不会被直接渲染到canvas上，但是{{SVGElement("textPath")}}元素依旧会参考{{SVGElement("path")}}。此外，即便{SVGElement("path")}}的<code>display</code>为<code>none</code>，它的形状在处理路径上的文本时仍然会被用到。</p> + +<p>This attribute also affects direct rendering into offscreen canvases, such as occurs with masks or clip paths. Thus, setting <code>display="none"</code> on a child of a {{SVGElement("mask")}} will prevent the given child element from being rendered as part of the mask. Similarly, setting <code>display="none"</code> on a child of a {{SVGElement("clipPath")}} element will prevent the given child element from contributing to the clipping path.</p> + +<p>这个属性也能影响直接渲染到屏幕外的画布，比如遮罩或路径剪裁。因此，把{{SVGElement("mask")}}元素的一个子元素设为<code>display="none"</code>将会阻止子元素参与到路径剪裁中。</p> + +<p class="note"><strong>Note:</strong> As a presentation attribute, <code>display</code> can be used as a CSS property. See {{cssxref("display", "CSS display")}} for further information.</p> + +<p>As a presentation attribute, it can be applied to any element.</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css notranslate">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html notranslate"><svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Here the yellow rectangle is displayed --> + <rect x="0" y="0" width="100" height="100" fill="skyblue"></rect> + <rect x="20" y="20" width="60" height="60" fill="yellow"></rect> + + <!-- Here the yellow rectangle is not displayed --> + <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect> + <rect x="140" y="20" width="60" height="60" fill="yellow" display="none"></rect> +</svg></pre> + +<p>{{EmbedLiveSample("topExample", "240", "120")}}</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Default value</th> + <td><code>inline</code></td> + </tr> + <tr> + <th scope="row">Value</th> + <td>{{csssyntax("display")}}</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p>For a description of the values, please refer to the {{cssxref("display", "CSS display")}} property.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "render.html#VisibilityControl", "display")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Refers to the CSS 2 specification of the <code>display</code> property, but outlines the differences regarding SVG.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#DisplayProperty", "display")}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.presentation.display")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{SVGAttr("visibility")}} attribute</li> + <li>{{cssxref("display", "CSS display")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/dominant-baseline/index.html b/files/zh-cn/web/svg/attribute/dominant-baseline/index.html new file mode 100644 index 0000000000..5df260eb1f --- /dev/null +++ b/files/zh-cn/web/svg/attribute/dominant-baseline/index.html @@ -0,0 +1,92 @@ +--- +title: dominant-baseline +slug: Web/SVG/Attribute/dominant-baseline +translation_of: Web/SVG/Attribute/dominant-baseline +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>The <code>dominant-baseline</code> attribute is used to determine or re-determine a scaled-baseline-table. A scaled-baseline-table is a compound value with three components: a baseline-identifier for the dominant-baseline, a baseline-table and a baseline-table font-size. Some values of the property re-determine all three values; other only re-establish the baseline-table font-size. When the initial value, <span class="prop-value">auto</span>, would give an undesired result, this property can be used to explicitly set the desire scaled-baseline-table.</p> +<p>If there is no baseline table in the nominal font or if the baseline table lacks an entry for the desired baseline, then the browser may use heuristics to determine the position of the desired baseline.</p> +<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("dominant-baseline","CSS dominant-baseline") }} for further information.</p> +<h2 id="Usage_context">Usage context</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><strong>auto</strong> | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#DominantBaselineProperty" title="http://www.w3.org/TR/SVG11/text.html#DominantBaselineProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> +<dl> + <dt> + auto</dt> + <dd> + <p>If this property occurs on a {{ SVGElement("text") }} element, then the computed value depends on the value of the {{ SVGAttr("writing-mode") }} attribute. If the {{ SVGAttr("writing-mode") }} is horizontal, then the value of the dominant-baseline component is <code>alphabetic</code>, else if the {{ SVGAttr("writing-mode") }} is vertical, then the value of the dominant-baseline component is <code>central</code>. </p> + <p>If this property occurs on a {{ SVGElement("tspan") }}, {{ SVGElement("tref") }}, {{ SVGElement("altGlyph") }} or {{ SVGElement("textPath") }} element, then the dominant-baseline and the baseline-table components remain the same as those of the parent text content element. If the computed {{ SVGAttr("baseline-shift") }} value actually shifts the baseline, then the baseline-table font-size component is set to the value of the {{ SVGAttr("font-size") }} attribute on the element on which the <code>dominant-baseline</code> attribute occurs, otherwise the baseline-table font-size remains the same as that of the element. If there is no parent text content element, the scaled-baseline-table value is constructed as above for {{ SVGElement("text") }} elements.</p> + </dd> + <dt> + use-script</dt> + <dd> + The dominant-baseline and the baseline-table components are set by determining the predominant script of the character data content. The {{ SVGAttr("writing-mode") }}, whether horizontal or vertical, is used to select the appropriate set of baseline-tables and the dominant baseline is used to select the baseline-table that corresponds to that baseline. The baseline-table font-size component is set to the value of the {{ SVGAttr("font-size") }} attribute on the element on which the <code>dominant-baseline</code> attribute occurs.</dd> + <dt> + no-change</dt> + <dd> + The dominant-baseline, the baseline-table, and the baseline-table font-size remain the same as that of the parent text content element.</dd> + <dt> + reset-size</dt> + <dd> + The dominant-baseline and the baseline-table remain the same, but the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element. This re-scales the baseline-table for the current {{ SVGAttr("font-size") }}.</dd> + <dt> + ideographic</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>ideographic</code>, the derived baseline-table is constructed using the <code>ideographic</code> baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.</dd> + <dt> + alphabetic</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>alphabetic</code>, the derived baseline-table is constructed using the <code>alphabetic</code> baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.</dd> + <dt> + hanging</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>hanging</code>, the derived baseline-table is constructed using the <code>hanging</code> baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.</dd> + <dt> + mathematical</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>mathematical</code>, the derived baseline-table is constructed using the <code>mathematical</code> baseline-table in the font, and the baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.</dd> + <dt> + central</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>central</code>. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. That font baseline-table is chosen using the following priority order of baseline-table names: <code>ideographic</code>, <code>alphabetic</code>, <code>hanging</code>, <code>mathematical</code>. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.</dd> + <dt> + middle</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>middle</code>. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. That font baseline-table is chosen using the following priority order of baseline-table names: <code>alphabetic</code>, <code>ideographic</code>, <code>hanging</code>, <code>mathematical</code>. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.</dd> + <dt> + text-after-edge</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>text-after-edge</code>. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. The choice of which font baseline-table to use from the baseline-tables in the font is browser dependent. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.</dd> + <dt> + text-before-edge</dt> + <dd> + The baseline-identifier for the dominant-baseline is set to be <code>text-before-edge</code>. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. The choice of which baseline-table to use from the baseline-tables in the font is browser dependent. The baseline-table font-size is changed to the value of the {{ SVGAttr("font-size") }} attribute on this element.</dd> +</dl> +<h2 id="Example">Example</h2> +<h2 id="Elements">Elements</h2> +<p>The following elements can use the <code>dominant-baseline-shift</code> attribute</p> +<ul> + <li><a href="/en/SVG/Element#Text_content_elements" title="https://developer.mozilla.org/en/SVG/Element#Text_content_elements">Text content elements</a> »</li> +</ul> +<h2 id="See_also">See also</h2> +<ul> + <li>{{ cssxref("dominant-baseline","CSS dominant-baseline") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/dur/index.html b/files/zh-cn/web/svg/attribute/dur/index.html new file mode 100644 index 0000000000..8121bf4bfb --- /dev/null +++ b/files/zh-cn/web/svg/attribute/dur/index.html @@ -0,0 +1,52 @@ +--- +title: dur +slug: Web/SVG/Attribute/dur +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/dur +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性标识了动画的简单持续时间。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画定时属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Clock-value" title="en/SVG/Content_type#Clock-value"><clock-value></a> | <strong title="this is the default value">indefinite</strong></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#DurAttribute" title="http://www.w3.org/TR/SVG/animate.html#DurAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><a href="/en/SVG/Content_type#Clock-value" title="en/SVG/Content type#Clock-value"><clock-value></a></dt> + <dd>指定简单持续时间的时长。值必须大于0。可以用小时（h）、分钟（m）、秒（s）、毫秒（ms）表达这个值。可以组合这些时间表达式以提供一个复合的持续时间，比如这样：<code>hh:mm:ss.iii</code>或者这样：<code>mm:ss.iii</code>。</dd> +</dl> + +<p>如果一个动画元素不带有<code>dur</code>属性，简单持续时间就是无限期的。请注意：如果一个简单持续时间是无限期的，则插值不能起作用（虽然它对 {{ SVGElement("set") }} 元素依然是有用的）。</p> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>dur</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">动画元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/dx/index.html b/files/zh-cn/web/svg/attribute/dx/index.html new file mode 100644 index 0000000000..66452d48a5 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/dx/index.html @@ -0,0 +1,68 @@ +--- +title: dx +slug: Web/SVG/Attribute/dx +tags: + - SVG + - SVG标签 +translation_of: Web/SVG/Attribute/dx +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考汇总</a></p> + +<p><code>dx属性表示一个元素或其内容在x轴方向上的偏移，偏移量取决于设置该属性的元素。</code></p> + +<p>对于{{SVGElement("feOffset")}}元素，它的值代表所有输入的图像的偏移量之和。这个总和被表达在由{{SVGElement("filter")}}元素的{{SVGAttr("primitiveUnits")}}属性定义的坐标系中。</p> + +<p>对于{{SVGElement("glyphRef")}}元素，它的值代表该符号在字体坐标系中x轴上的相对坐标。</p> + +<p>对于{{SVGElement("text")}}、{{SVGElement("tspan")}}、{{SVGElement("tref")}}和{{SVGElement("altGlyph")}}元素，由于这些元素允许设置<a href="/en/SVG/Content_type#List-of-Ts" title="/en/SVG/Content_type#List-of-Ts"><list-of-length></a>，所以更复杂。</p> + +<p>如果只提供了一个<a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>，当前文本位置会沿着坐标系内x轴方向偏移<a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a> 。</p> + +<p>如果提供了一个由逗号或者空格分隔的<a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>列表，列表中的值将会表示前n个字符沿x轴方向偏移的增量。因此，当前文本位置也因为绘制当前{{SVGElement("text")}}元素而沿x轴方向偏移。</p> + +<p>如果在<a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>列表中有更多的字符，那么对于每个字符，都有</p> + +<ul> + <li>如果祖先{{SVGElement("text")}}或{{SVGElement("tspan")}}元素对于给定的字符，通过dx的属性指定了相对x坐标，那么当前文本位置会沿坐标系的x轴方向偏移该数值（最近的祖先具有优先级）</li> + <li>否则没有额外的x轴方向的偏移发生</li> +</ul> + +<h2 id="用法上下文">用法上下文</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">分类</th> + <td>无</td> + </tr> + <tr> + <th scope="row">数值类型</th> + <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a> | <a href="/en/SVG/Content_type#List-of-<var>T<.2Fvar>s" title="/en/SVG/Content_type#List-of-<var>T<.2Fvar>s"><list-of-length></a></td> + </tr> + <tr> + <th scope="row">可变</th> + <td>是</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElementDXAttribute" rel="external" title="http://www.w3.org/TR/SVG11/text.html#AltGlyphElementDXAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetDxAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feOffsetDxAttribute">SVG 1.1 (2nd Edition): feOffset element</a><br> + <a href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElementDXAttribute" rel="external" title="http://www.w3.org/TR/SVG11/text.html#GlyphRefElementDXAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br> + <a href="http://www.w3.org/TR/SVG11/text.html#TextElementDXAttribute" rel="external" title="http://www.w3.org/TR/SVG11/text.html#TextElementDXAttribute">SVG 1.1 (2nd Edition): text element</a><br> + <a href="http://www.w3.org/TR/SVG11/text.html#TSpanElementDXAttribute" rel="external" title="http://www.w3.org/TR/SVG11/text.html#TSpanElementDXAttribute">SVG 1.1 (2nd Edition): tspan element</a></td> + </tr> + </tbody> +</table> + +<h2 id="元素">元素</h2> + +<p>这些元素可以使用dx属性</p> + +<ul> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("text") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("tspan") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/edgemode/index.html b/files/zh-cn/web/svg/attribute/edgemode/index.html new file mode 100644 index 0000000000..9b624cd315 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/edgemode/index.html @@ -0,0 +1,58 @@ +--- +title: edgeMode +slug: Web/SVG/Attribute/edgeMode +tags: + - SVG + - SVG属性 + - 滤镜 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/edgeMode +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>edgeMode</code>属性确定了当核心位于输入图像的边缘或贴近输入图像的边缘时，如何取用颜色值用于扩展输入图像，从而可以应用矩阵操作。</p> + +<p>如果没有指定<code>edgeMode</code>属性，等效于值被指定为<code>duplicate</code>。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong>duplicate</strong> | wrap | none</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementEdgeModeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementEdgeModeAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>duplicate</dt> + <dd>它指示输入图像沿着每条边扩展，复制输入图像的给定边缘上的颜色值。</dd> + <dt>wrap</dt> + <dd>它指示扩展输入图像，从图像相对的边缘取色。</dd> + <dt>none</dt> + <dd>它指示扩展输入图像，用0作为RGBA的像素值。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>edgeMode</code>属性：</p> + +<ul> + <li>{{ SVGElement("feConvolveMatrix") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/enable-background/index.html b/files/zh-cn/web/svg/attribute/enable-background/index.html new file mode 100644 index 0000000000..0d54c98265 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/enable-background/index.html @@ -0,0 +1,74 @@ +--- +title: enable-background +slug: Web/SVG/Attribute/enable-background +translation_of: Web/SVG/Attribute/enable-background +--- +<div>{{SVGRef}} {{deprecated_header("SVG 2")}}</div> + +<p>该<strong><code>enable-background</code></strong>属性指定如何管理背景图像的累积。</p> + +<p class="note"><strong>注意：</strong>作为演示文稿属性，<code>enable-background</code>可以用作CSS属性。</p> + +<p>作为表示属性，它可以应用于任何元素，但仅对以下11个元素有效：{{SVGElement("a")}}，{{SVGElement("defs")}}，{{SVGElement("字形")}}，{{SVGElement("g")}}，{{SVGElement("marker")}}，{{SVGElement("mask")}}，{{SVGElement("missing-glyph")}}，{{SVGElement("pattern")}}，{{SVGElement("svg")}}，{{SVGElement("switch")}}和{{SVGElement("symbol")}}}</p> + +<h2 id="上下文注释">上下文注释</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">值</th> + <td><code>accumulate</code>| <code>new</code>[ <code><x></code> <code><y></code> <code><width></code> <code><height></code>]？</td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>accumulate</code></td> + </tr> + <tr> + <th scope="row">可动画的</th> + <td>没有</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code>accumulate</code></dt> + <dd> + <p>如果祖先容器元素的属性值为<code>enable-background: new</code>，则当前容器元素内的所有图形元素都将呈现到父容器元素的背景图像画布上以及目标设备上。</p> + + <p>否则，没有当前的背景图像画布，因此图形元素仅渲染到目标设备上。</p> + </dd> + <dt><code>new [ <x> <y> <width> <height> ]?</code></dt> + <dd> + <p>该值使当前容器元素的子代能够访问背景图像。</p> + + <p>它还指示建立了新的（即最初为透明的黑色）背景图像画布，并且实际上，除了将当前容器元素的所有子对象呈现到目标设备上之外，还应将其呈现到新的背景图像画布中。</p> + + <p>The optional <code><x></code>, <code><y></code>, <code><width></code>, and <code><height></code> parameters are <code><a href="/en-US/docs/Web/SVG/Content_type#Number"><number></a></code> values that indicate the subregion of the container elementʼs user space where access to the background image is allowed to happen. Those values act as a clipping rectangle on the background image canvas.<br> + Negative values for <code><width></code> or <code><height></code> are forbidden. If one, two, or three values are specified or if neither <code><width></code> nor <code><height></code> are specified, the <code>BackgroundImage</code> and <code>BackgroundAlpha</code> of a filter primitive are processed as if background image processing were not enabled.</p> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG1.1", "filters.html#EnableBackgroundProperty", "enable-background")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求。</div> + +<p>{{Compat("svg.attributes.presentation.enable-background")}}</p> diff --git a/files/zh-cn/web/svg/attribute/end/index.html b/files/zh-cn/web/svg/attribute/end/index.html new file mode 100644 index 0000000000..a2e363e82e --- /dev/null +++ b/files/zh-cn/web/svg/attribute/end/index.html @@ -0,0 +1,49 @@ +--- +title: end +slug: Web/SVG/Attribute/end +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/end +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>这个属性定义了一个动画的结束值，可以约束激活持续时间。</p> + +<p>这个属性值是一个分号分隔的数列值。每个单独值可以是定义在{{ SVGAttr("begin") }}属性中同种类型。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画定时属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><End-value-list></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#EndAttribute" title="http://www.w3.org/TR/SVG/animate.html#EndAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>欲知在<code><end-value-list></code>中允许用哪些值，请阅读{{ SVGAttr("begin") }}属性。</p> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>end</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/fill-opacity/index.html b/files/zh-cn/web/svg/attribute/fill-opacity/index.html new file mode 100644 index 0000000000..183e6c632f --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fill-opacity/index.html @@ -0,0 +1,58 @@ +--- +title: fill-opacity +slug: Web/SVG/Attribute/fill-opacity +tags: + - SVG + - SVG属性 + - 参考 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/fill-opacity +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性指定了填色的不透明度或当前对象的内容物的不透明度。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value"><opacity-value></a> | inherit</td> + </tr> + <tr> + <th scope="row">初始值</th> + <td>1</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#FillOpacityProperty" title="http://www.w3.org/TR/SVG/painting.html#FillOpacityProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>fill-opacity</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">元素元素</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TexteContent">文本内容元素</a> »</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGAttr("stroke-opacity") }}</li> + <li>{{ SVGAttr("opacity") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/fill-rule/index.html b/files/zh-cn/web/svg/attribute/fill-rule/index.html new file mode 100644 index 0000000000..0a9cad8a92 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fill-rule/index.html @@ -0,0 +1,180 @@ +--- +title: fill-rule +slug: Web/SVG/Attribute/fill-rule +tags: + - SVG + - SVG属性 + - 参考 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/fill-rule +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><strong><code>fill-rule</code></strong> 是一个外观属性，它定义了用来确定一个多边形内部区域的算法。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>作为一个外观属性，fill-rule 可以被用于 CSS。</p> +</div> + +<p>作为一个外观属性，它可以被应用于任何元素，但只会在这八个元素中有效：{{SVGElement('altGlyph')}}、{{SVGElement('path')}}、{{SVGElement('polygon')}}、{{SVGElement('polyline')}}、{{SVGElement('text')}}、{{SVGElement('textPath')}}、{{SVGElement('tref')}} 和 {{SVGElement('tspan')}}。</p> + +<p>如何判断一个路径组成的多边形的内部区域，从而给它上色，对于一个简单的、没有交错的路径来说，是很显然的；然而，对于一个更为复杂的路径，比如一条与自身相交的路径，或者是这条路径上的其中一段将另一段包围着，要解释什么是“内部”，就不再这么显然了。</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> + <!-- fill-rule 的默认值 --> + <polygon fill-rule="nonzero" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> + + <!-- + 从这个形状的中心到无穷远处有两条路径段（红色部分），因此 + 该区域被认为是形状外部，并且没有被填充。 + --> + <polygon fill-rule="evenodd" stroke="red" + points="150,0 121,90 198,35 102,35 179,90"/> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td>nonzero | evenodd</td> + </tr> + <tr> + <th scope="row">默认值</th> + <td>nonzero</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty" title="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p><code>fill-rule</code> 属性为如何确定一个形状的内部（即可以被填充的区域）提供了两个可选值：</p> + +<dl> + <dt> + <h3 id="nonzero_2">nonzero</h3> + </dt> +</dl> + +<p>这个值确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。</p> + +<h4 id="Example">Example</h4> + +<div id="nonzero"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> + <!-- nonzero 填充规则被用于路径段会相交的形状上的效果 --> + <polygon fill-rule="nonzero" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> + + <!-- + nonzero 填充规则被用于一个形状在另一形状内部的效果 + 这两个正方形的路径段方向相同（都是顺时针） + --> + <path fill-rule="nonzero" stroke="red" + d="M110,0 h90 v90 h-90 z + M130,20 h50 v50 h-50 z"/> + + <!-- + 这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反 + 外面的正方形是顺时针，里面的正方形则是逆时针 + --> + <path fill-rule="nonzero" stroke="red" + d="M210,0 h90 v90 h-90 z + M230,20 v50 h50 v-50 z"/> +</svg></pre> +</div> + +<p>{{EmbedLiveSample('nonzero', '100%', 200)}}</p> + +<dl> + <dt> + <h3 id="evenodd_2">evenodd</h3> + </dt> +</dl> + +<p>这个值用确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。</p> + +<h4 id="Example_2">Example</h4> + +<div id="evenodd"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> + <!-- evenodd 填充规则被用于路径段会相交的形状上的效果 --> + <polygon fill-rule="evenodd" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> + + <!-- + evenodd 填充规则被用于一个形状在另一形状内部的效果 + 这两个正方形的路径段方向相同（都是顺时针） + --> + <path fill-rule="evenodd" stroke="red" + d="M110,0 h90 v90 h-90 z + M130,20 h50 v50 h-50 z"/> + + <!-- + 这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反 + 外面的正方形是顺时针，里面的正方形则是逆时针 + --> + <path fill-rule="evenodd" stroke="red" + d="M210,0 h90 v90 h-90 z + M230,20 v50 h50 v-50 z"/> +</svg></pre> +</div> + +<p>{{EmbedLiveSample('evenodd', '100%', 200)}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容</h2> + +<p>{{Compat("svg.attributes.presentation.fill-rule")}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#FillRuleProperty", "fill-rule")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for shapes and text</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for shapes and text</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/fill/index.html b/files/zh-cn/web/svg/attribute/fill/index.html new file mode 100644 index 0000000000..1367e0ee8a --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fill/index.html @@ -0,0 +1,83 @@ +--- +title: fill +slug: Web/SVG/Attribute/fill +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/fill +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>fill</code>属性根据它的使用环境，拥有两个意义。</p> + +<p><span style="line-height: 22.008px;">默认地，当动画元素结束时，目标元素的外观属性不再应用该效果。在动画元素结束后，要还保持这个动画的的值，就需要用到<code>fill</code>属性。</span></p> + +<p>对于形状元素和文本，<span style="line-height: 22.008px;"><code>fill</code>属性是外观属性，用来定义给定图形元素内部的颜色。哪一块算是“内部”取决于形状本身以及</span>{{ SVGAttr("fill-rule") }} 属性的值。作为一个外观属性，它可以直接用作CSS样式表内部的属性。</p> + +<h2 id="用法">用法</h2> + +<h3 id="对动画元素">对动画元素</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画定时属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong title="this is the default value">remove</strong> | freeze</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#FillAttribute" title="http://www.w3.org/TR/SVG/animate.html#FillAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>remove（默认值）</dt> + <dd>在动画的激活持续时间结束后，动画效果会移除（不再应用）。在动画的激活结束后，动画不再对目标元素有影响（除非动画重新开始）。</dd> + <dt>freeze</dt> + <dd>在动画激活持续时间结束后，文档持续时间的剩余时间里（或者直到动画重新开始）动画效果会“冻结”着。</dd> +</dl> + +<h3 id="对形状元素">对形状元素</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint"><paint></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#FillProperty" title="http://www.w3.org/TR/SVG/painting.html#FillProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>fill</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Animation_elements" title="en/SVG/Element#Animation">动画元素</a> »</li> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">形状元素</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">文本内容元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/filter/index.html b/files/zh-cn/web/svg/attribute/filter/index.html new file mode 100644 index 0000000000..3f4893168f --- /dev/null +++ b/files/zh-cn/web/svg/attribute/filter/index.html @@ -0,0 +1,68 @@ +--- +title: filter +slug: Web/SVG/Attribute/filter +tags: + - SVG + - SVG过滤器 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/filter +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><font face="Open Sans, Arial, sans-serif">属性</font><code>filter</code>定义了由{{ SVGElement("filter") }}元素定义滤镜效果，该滤镜效果将应用到该元素上。</p> + +<p>作为一个外观属性，它可以直接用作CSS样式表内部的属性。请阅读{{ cssxref("filter","CSS filter") }}以了解更多信息。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#FuncIRI" title="https://developer.mozilla.org/en/SVG/Content_type#FuncIRI"><funciri></a> | <strong>none</strong> | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterProperty" title="http://www.w3.org/TR/SVG11/filters.html#FilterProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><a href="/en/SVG/Content_type#FuncIRI" title="https://developer.mozilla.org/en/SVG/Content_type#FuncIRI"><funciri></a></dt> + <dd>元素的引用，它定义了将要应用到该元素的滤镜效果。</dd> + <dt>none</dt> + <dd>不对该元素应用任何滤镜效果。</dd> +</dl> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>filter</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Graphics_elements" title="en/SVG/Element#Graphics_elements">图形元素</a> »</li> + <li>{{ SVGElement("a") }}</li> + <li>{{ SVGElement("defs") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("g") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("missing-glyph") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("switch") }}</li> + <li>{{ SVGElement("symbol") }}</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ cssxref("filter","CSS filter") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/filterunits/index.html b/files/zh-cn/web/svg/attribute/filterunits/index.html new file mode 100644 index 0000000000..f9cd714104 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/filterunits/index.html @@ -0,0 +1,50 @@ +--- +title: filterUnits +slug: Web/SVG/Attribute/filterUnits +translation_of: Web/SVG/Attribute/filterUnits +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>filterUnits 属性定义{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和{{ SVGAttr("height") }}使用的坐标系系统.</p> + +<p>如果filterUnits属性未指定,那么效果如同指定了值为<code>objectBoundingBox.</code></p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><code>userSpaceOnUse</code> | <code><strong>objectBoundingBox</strong></code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElementFilterUnitsAttribute" title="http://www.w3.org/TR/SVG11/filters.html#FilterElementFilterUnitsAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>userSpaceOnUse</dt> + <dd>{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和 {{ SVGAttr("height") }} 表示当前坐标系统中的值，这些值表示{{ SVGElement("filter") }}元素在当前用户坐标系中的位置和大小(例如通过{{ SVGAttr("filter") }}引用该{{ SVGElement("filter") }}元素的元素所在的坐标系系统).</dd> + <dt>objectBoundingBox</dt> + <dd>在这种情况下,{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} 和 {{ SVGAttr("height") }}biao表示引用{{ SVGElement("filter") }}元素的元素的baow包围盒的分数或百分比.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h2 id="Elements">Elements</h2> + +<p>下面这些元素可以使用filterUnits属性:</p> + +<ul> + <li>{{ SVGElement("filter") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/font-family/index.html b/files/zh-cn/web/svg/attribute/font-family/index.html new file mode 100644 index 0000000000..7fa86002d6 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/font-family/index.html @@ -0,0 +1,49 @@ +--- +title: font-family +slug: Web/SVG/Attribute/font-family +tags: + - SVG属性 +translation_of: Web/SVG/Attribute/font-family +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p><code>font-family</code> 属性(attribute) 指出哪个字体集将被用来渲染文字， 在带优先级的字体集名称列表被指定，还有或没有泛指的字符集名称。(specified as a prioritized list of font family names and/or generic family names)。</p> +<p>作为一个表现层的属性，<code>font-family</code>属性也可以被直接用在CSS样式表中，详见 {{ cssxref("font-family","CSS font-family") }} 。</p> +<h2 id="使用上下文">使用上下文</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">分类</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">值</th> + <td>[[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] | inherit</td> + </tr> + <tr> + <th scope="row">可动画Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#FontFamilyProperty" title="http://www.w3.org/TR/SVG11/text.html#FontFamilyProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> +<h2 id="例子">例子</h2> +<h4 id="css">css</h4> +<pre>p.class1{font-family:"Times New Roman",Times,serif;} +p.class2{font-family:Arial,Helvetica;} +</pre> +<h4 id="html">html</h4> +<pre class="brush: html"><p class="class1">This is a paragraph, shown in the Times New Roman font.</p> +<p class="class2">This is a paragraph, shown in the Arial font.</p> +</pre> +<h2 id="元素">元素</h2> +<p>以下元素可以使用<code>font-family</code> 属性(attribute)</p> +<ul> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">Text content elements</a> »</li> +</ul> +<h2 id="另见">另见</h2> +<ul> + <li>{{ cssxref("font-family","CSS font-family") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/fr/index.html b/files/zh-cn/web/svg/attribute/fr/index.html new file mode 100644 index 0000000000..b06f88a08d --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fr/index.html @@ -0,0 +1,68 @@ +--- +title: fr +slug: Web/SVG/Attribute/fr +tags: + - SVG属性 + - SVG径向渐变 + - SVG径向渐变焦点 +translation_of: Web/SVG/Attribute/fr +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考主页</a></p> + +<p>对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的半径。若该属性没有被定义，默认值为 0%。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en-US/docs/Web/SVG/Content_type#Length"><length></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>非</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: html language-html"><code class="language-html"><span class="prolog token"><?xml version="1.0" standalone="no"?></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span> + <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>defs</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>radialGradient</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Gradient<span class="punctuation token">"</span></span> + <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> </span></code>fx="0.35" fy="0.35" fr="5%"<code class="language-html"><span class="tag token"><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>radialGradient</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>defs</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">rx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">ry</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> + <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>url(#Gradient)<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>black<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>transparent<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>35<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>35<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>38<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sans-serif<span class="punctuation token">"</span></span> <span class="attr-name token">font-size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10pt<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(fx,fy)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>63<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>63<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sans-serif<span class="punctuation token">"</span></span> <span class="attr-name token">font-size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10pt<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(cx,cy)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用 <code>fr</code> 属性：</p> + +<ul> + <li>{{ SVGElement("radialGradient") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/from/index.html b/files/zh-cn/web/svg/attribute/from/index.html new file mode 100644 index 0000000000..59e5f73f3c --- /dev/null +++ b/files/zh-cn/web/svg/attribute/from/index.html @@ -0,0 +1,63 @@ +--- +title: from +slug: Web/SVG/Attribute/From +translation_of: Web/SVG/Attribute/From +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考</a></p> + +<p>这个属性是在svg动画发生过程中被修改的属性的初始值。当同时使用了这个属性和 <a href="/en-US/docs/Web/SVG/Attribute/To">to</a> 属性, animation将会修改这个这个设定的动画属性的值从from属性的值到to属性的值。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画属性值</td> + </tr> + <tr> + <th scope="row">值</th> + <td><value></td> + </tr> + <tr> + <th scope="row">动画特征</th> + <td>No</td> + </tr> + <tr> + <th scope="row">标准化文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#FromAttribute" title="http://www.w3.org/TR/SVG/animate.html#FromAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>这个属性的准确的值类型取决于这个属性将要被用作动画的属性的值。</p> + +<h2 id="例子">例子</h2> + +<p>这个例子给from属性了一个100的值，让动画从100的宽度开始运行。</p> + +<pre class="brush: xml"><?xml version="1.0"?> +<svg width="200" height="200" + viewPort="0 0 200 200" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="100" height="100"> + <animate attributeType="XML" + attributeName="width" + from="100" to="150" + dur="3s" + fill="freeze"/> + </rect> + +</svg></pre> + +<h2 id="元素">元素</h2> + +<p>如下的元素能使用from属性</p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateMotion") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/fx/index.html b/files/zh-cn/web/svg/attribute/fx/index.html new file mode 100644 index 0000000000..20f6861f37 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fx/index.html @@ -0,0 +1,74 @@ +--- +title: fx +slug: Web/SVG/Attribute/fx +tags: + - SVG + - SVG属性 + - SVG径向渐变 + - SVG渐变 + - SVG渐变焦点 +translation_of: Web/SVG/Attribute/fx +--- +<p>« <a href="/zh-CN/docs/web/SVG/Attribute">SVG属性参考主页</a></p> + +<p>对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="https://developer.mozilla.org/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>非</td> + </tr> + <tr> + <th scope="row">规范文档 </th> + <td><a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: html language-html"><code class="language-html"><span class="prolog token"><?xml version="1.0" standalone="no"?></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span> + <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>defs</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>radialGradient</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Gradient<span class="punctuation token">"</span></span> + <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">fx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.25<span class="punctuation token">"</span></span> <span class="attr-name token">fy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.25<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>radialGradient</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>defs</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">rx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">ry</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> + <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>url(#Gradient)<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>black<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>transparent<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>35<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>35<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>38<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sans-serif<span class="punctuation token">"</span></span> <span class="attr-name token">font-size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10pt<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(fx,fy)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>63<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>63<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sans-serif<span class="punctuation token">"</span></span> <span class="attr-name token">font-size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10pt<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(cx,cy)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用 <code>fx</code> 属性：</p> + +<ul> + <li>{{ SVGElement("radialGradient") }}</li> +</ul> + +<p> + <audio style="display: none;"> </audio> +</p> diff --git a/files/zh-cn/web/svg/attribute/fy/index.html b/files/zh-cn/web/svg/attribute/fy/index.html new file mode 100644 index 0000000000..6b595a7090 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/fy/index.html @@ -0,0 +1,71 @@ +--- +title: fy +slug: Web/SVG/Attribute/fy +tags: + - SVG属性 + - SVG径向渐变 + - SVG径向渐变焦点 + - SVG渐变属性 +translation_of: Web/SVG/Attribute/fy +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考主页</a></p> + +<p>对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的 y 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>非</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","Coordinate") }}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html language-html"><code class="language-html"><span class="prolog token"><?xml version="1.0" standalone="no"?></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span> + <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>defs</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>radialGradient</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Gradient<span class="punctuation token">"</span></span> + <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">fx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.25<span class="punctuation token">"</span></span> <span class="attr-name token">fy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.25<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>radialGradient</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>defs</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">rx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">ry</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> + <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>url(#Gradient)<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>black<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>transparent<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>35<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>35<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>38<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sans-serif<span class="punctuation token">"</span></span> <span class="attr-name token">font-size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10pt<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(fx,fy)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>63<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>63<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sans-serif<span class="punctuation token">"</span></span> <span class="attr-name token">font-size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10pt<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(cx,cy)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用 <code>fy</code> 属性：</p> + +<ul> + <li>{{ SVGElement("radialGradient") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/height/index.html b/files/zh-cn/web/svg/attribute/height/index.html new file mode 100644 index 0000000000..98f18de2df --- /dev/null +++ b/files/zh-cn/web/svg/attribute/height/index.html @@ -0,0 +1,72 @@ +--- +title: height +slug: Web/SVG/Attribute/height +tags: + - NeedsCompatTable + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/height +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性在用户坐标系统中标识了一个垂直长度。该坐标的确切效果依赖于每个元素。大多数时候，它体现引用元素的矩形区域的高度（请阅读每个元素的文档以了解例外情况）。</p> + +<p>除了{{ SVGElement("svg") }}元素之外，别的元素都必须指定该属性，{{ SVGElement("svg") }}的高度默认是<strong>100%</strong>，而{{ SVGElement("filter") }}元素以及{{ SVGElement("mask") }}元素的默认高度是<strong>120%</strong>。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementHeightAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementHeightAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementHeightAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementHeightAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementHeightAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementHeightAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementHeightAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementHeightAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementHeightAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementHeightAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveHeightAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveHeightAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementHeightAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementHeightAttribute">SVG 1.1 (2nd Edition): mask element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/zh-CN/Content_type","Length") }}</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><?xml version="1.0"?> +<svg width="120" height="120" + viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="100" height="100"/> +</svg></pre> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用 <code>height </code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">滤镜元素</a> »</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("use") }}</li> + <li>{{ SVGElement("mask") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/id/index.html b/files/zh-cn/web/svg/attribute/id/index.html new file mode 100644 index 0000000000..25610abd4e --- /dev/null +++ b/files/zh-cn/web/svg/attribute/id/index.html @@ -0,0 +1,99 @@ +--- +title: id +slug: Web/SVG/Attribute/id +translation_of: Web/SVG/Attribute/id +--- +<div>{{SVGRef}}</div> + +<p><strong><code>id</code></strong> 属性给予元素一个唯一名称。</p> + +<p>所有元素均可使用该属性。</p> + +<div id="topExample"> +<pre class="brush: html"><svg width="120" height="120" viewPort="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> + <style type="text/css"> + <![CDATA[ + #smallRect { + stroke: #000066; + fill: #00cc00; + } + ]]> + </style> + + <rect id="smallRect" x="10" y="10" width="100" height="100" /> +</svg> +</pre> + +<p>{{EmbedLiveSample("topExample", "120", "120")}}</p> +</div> + +<h2 id="用法说明">用法说明</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">值</th> + <td><id></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">可动画</th> + <td>No</td> + </tr> + </tbody> +</table> + +<dl> + <dt><id></dt> + <dd> + <p>指定元素的ID。 该ID在节点树中必须是唯一的，不能为空字符串，并且不能包含任何空格字符。</p> + + <div class="blockIndicator note"> + <p><strong>注意:</strong> 应当避免使用会被解析为SVG视图规范的 <code>id</code> 值（如<code>MyDrawing.svg#svgView(viewBox(0,200,1000,1000))</code>），或被解析为用作URL目标片段的基本媒体片段的 <code>id</code> 值。</p> + </div> + + + + <p>该属性取值必须在XML文档中有效。 独立的SVG文档使用XML 1.0语法，该语法指定有效的ID仅包含指定的字符（字母，数字和一些标点符号），开头不能是数字，点（.）字符或 连字符减号（-）。</p> + </dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "struct.html#IDAttribute", "id")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Defines the allowed values in more detail.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#IDAttribute", "id")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.attributes.style.class")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/id">HTML <code>id</code></a></li> + <li>{{SVGAttr("class")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/image-rendering/index.html b/files/zh-cn/web/svg/attribute/image-rendering/index.html new file mode 100644 index 0000000000..462ec504ed --- /dev/null +++ b/files/zh-cn/web/svg/attribute/image-rendering/index.html @@ -0,0 +1,57 @@ +--- +title: image-rendering +slug: Web/SVG/Attribute/image-rendering +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/image-rendering +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p><code>image-rendering</code> 属性向浏览器提供了一个提示，即在图片处理时，如何进行速度 vs 质量之间的权衡。<br> + <br> + 作为一个显示属性，它也可以在 CSS 样式文件中作为属性而存在，请参考 {{ cssxref("image-rendering","CSS image-rendering") }} 获取更多的信息</p> +<h2 id="使用语境">使用语境</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong title="this is the default value">auto</strong> | optimizeSpeed | optimizeQuality | inherit</td> + </tr> + <tr> + <th scope="row">动画效果</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范性文件</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#ImageRenderingProperty" title="http://www.w3.org/TR/SVG11/painting.html#ImageRenderingProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> +<dl> + <dt> + auto</dt> + <dd> + 表示用户代理可以在速度和质量间做适当的权衡，但是质量将比速度更重要一些。</dd> + <dt> + optimizeSpeed</dt> + <dd> + 表示用户代理应该更注重速度。</dd> + <dt> + optimizeQuality</dt> + <dd> + 表示用户代理应该更注重质量</dd> +</dl> +<h2 id="示例">示例</h2> +<h2 id="元素">元素</h2> +<p>下面的元素可以能够使用 <code>image-rendering</code> 属性</p> +<ul> + <li>{{ SVGElement("image") }}</li> +</ul> +<h2 id="参考">参考</h2> +<ul> + <li>{{ cssxref("image-rendering","CSS image-rendering") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/in/index.html b/files/zh-cn/web/svg/attribute/in/index.html new file mode 100644 index 0000000000..e27cde1055 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/in/index.html @@ -0,0 +1,105 @@ +--- +title: in +slug: Web/SVG/Attribute/in +translation_of: Web/SVG/Attribute/in +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>in属性标识输入的原语.</p> + +<p>其值可以是下面六种关键词中的一种,或者是一个字符串匹配在同一个{{SVGElement("filter")}}元素中前面的原语的{{SVGAttr("result")}} 属性值. 如果没有提供值并且这是filter中第一个原语,那么原语将相当于使用SourceGraphic作为输入值. 如果没有提供值并且这不是第一个原语,那么原语将使用前面原语的result属性值作为输入.<br> + <br> + 如果{{SVGAttr("result")}}的值在同一个{{SVGElement("filter")}}中出现多次,那么将使用前面的距离使用该{{SVGAttr("result")}}值的原语最近的该result值的原语作为输入.</p> + +<p>除了SourceGraphic和<strong><filter-primitive-reference> (引用原语) </strong>, 关键词都没有在现代浏览器中实现.(译者注:SourceAlpha也被现代浏览器支持)</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><code>SourceGraphic</code> | <code>SourceAlpha</code> | <code>BackgroundImage</code> | <code>BackgroundAlpha</code> | <code>FillPaint</code> | <code>StrokePaint</code> | <filter-primitive-reference></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute" title="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>SourceGraphic</dt> + <dd>该关键词表示图形元素自身将作为{{SVGElement("filter")}}原语的原始输入.</dd> + <dt>SourceAlpha</dt> + <dd>该关键词表示图形元素自身将作为{{SVGElement("filter")}}原语的原始输入. SourceAlpha与SourceGraphic具有相同的规则除了SourceAlpha只使用元素的透明度.</dd> + <dt>BackgroundImage</dt> + <dd>该关键词表示filter元素当前底下的区域的图形快照将被调用.</dd> + <dt>BackgroundAlpha</dt> + <dd>跟BackgroundImage相同除了只使用透明度.</dd> + <dt>FillPaint</dt> + <dd>This keyword represents the value of the {{SVGAttr("fill")}} property on the target element for the filter effect. In many cases, the <code>FillPaint</code> is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.</dd> + <dt>StrokePaint</dt> + <dd>This keyword represents the value of the {{SVGAttr("stroke")}} property on the target element for the filter effect. In many cases, the <code>StrokePaint</code> is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.</dd> +</dl> + +<h2 id="Workaround_for_backgroundImage" name="Workaround_for_backgroundImage">BackgroundImage的解决方案</h2> + +<p>我们需要使用 < feimage >原语引入一个图像混合到过滤器本身内来替代使用"BackgroundImage".</p> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div style="width: 420px; height: 220px;"> +<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="backgroundMultiply"> + <!-- This will not work. --> + <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/> + </filter> + </defs> + <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" /> +</svg> + +<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="imageMultiply"> + <!-- This is a workaround. --> + <feImage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <feBlend in2="SourceGraphic" mode="multiply"/> + </filter> + </defs> + <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/> +</svg> +</div></pre> + +<h3 id="效果">效果</h3> + +<p>{{ EmbedLiveSample('Workaround_for_backgroundImage') }}</p> + +<h2 id="Workaround_for_BackgroundImage" name="Workaround_for_BackgroundImage">元素</h2> + +<p>下列元素可以使用该属性</p> + +<ul> + <li>{{SVGElement("feBlend")}}</li> + <li>{{SVGElement("feColorMatrix")}}</li> + <li>{{SVGElement("feComponentTransfer")}}</li> + <li>{{SVGElement("feComposite")}}</li> + <li>{{SVGElement("feConvolveMatrix")}}</li> + <li>{{SVGElement("feDiffuseLighting")}}</li> + <li>{{SVGElement("feDisplacementMap")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feTile")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/index.html b/files/zh-cn/web/svg/attribute/index.html new file mode 100644 index 0000000000..ed2afd450f --- /dev/null +++ b/files/zh-cn/web/svg/attribute/index.html @@ -0,0 +1,476 @@ +--- +title: SVG 属性参考 +slug: Web/SVG/Attribute +tags: + - SVG + - SVG Attribute + - SVG Reference + - SVG 属性 + - 矢量图形 +translation_of: Web/SVG/Attribute +--- +<div>{{SVGRef}}</div> + +<p class="summary"><span class="seoSummary">SVG 元素可以通过属性来修改，这些属性指定有关如何处理或呈现元素的详细信息。</span> 下面列出了 SVG 中所有的可用属性以及参考文档的链接，以帮助您了解哪些元素支持它们，以及它们如何工作。</p> + +<h2 id="SVG_属性（从_A-Z_排序）">SVG 属性（从 A-Z 排序）</h2> + +<div class="index"> +<h3 id="A">A</h3> + +<ul> + <li>{{SVGAttr("accent-height")}}</li> + <li>{{SVGAttr("accumulate")}}</li> + <li>{{SVGAttr("additive")}}</li> + <li>{{SVGAttr("alignment-baseline")}}</li> + <li>{{SVGAttr("allowReorder")}}</li> + <li>{{SVGAttr("alphabetic")}}</li> + <li>{{SVGAttr("amplitude")}}</li> + <li>{{SVGAttr("arabic-form")}}</li> + <li>{{SVGAttr("ascent")}}</li> + <li>{{SVGAttr("attributeName")}}</li> + <li>{{SVGAttr("attributeType")}}</li> + <li>{{SVGAttr("autoReverse")}}</li> + <li>{{SVGAttr("azimuth")}}</li> +</ul> + +<h3 id="B">B</h3> + +<ul> + <li>{{SVGAttr("baseFrequency")}}</li> + <li>{{SVGAttr("baseline-shift")}}</li> + <li>{{SVGAttr("baseProfile")}}</li> + <li>{{SVGAttr("bbox")}}</li> + <li>{{SVGAttr("begin")}}</li> + <li>{{SVGAttr("bias")}}</li> + <li>{{SVGAttr("by")}}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{SVGAttr("calcMode")}}</li> + <li>{{SVGAttr("cap-height")}}</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("clip")}}</li> + <li>{{SVGAttr("clipPathUnits")}}</li> + <li>{{SVGAttr("clip-path")}}</li> + <li>{{SVGAttr("clip-rule")}}</li> + <li>{{SVGAttr("color")}}</li> + <li>{{SVGAttr("color-interpolation")}}</li> + <li>{{SVGAttr("color-interpolation-filters")}}</li> + <li>{{SVGAttr("color-profile")}}</li> + <li>{{SVGAttr("color-rendering")}}</li> + <li>{{SVGAttr("contentScriptType")}}</li> + <li>{{SVGAttr("contentStyleType")}}</li> + <li>{{SVGAttr("cursor")}}</li> + <li>{{SVGAttr("cx")}}</li> + <li>{{SVGAttr("cy")}}</li> +</ul> + +<h3 id="D">D</h3> + +<ul> + <li>{{SVGAttr("d")}}</li> + <li>{{SVGAttr("decelerate")}}</li> + <li>{{SVGAttr("descent")}}</li> + <li>{{SVGAttr("diffuseConstant")}}</li> + <li>{{SVGAttr("direction")}}</li> + <li>{{SVGAttr("display")}}</li> + <li>{{SVGAttr("divisor")}}</li> + <li>{{SVGAttr("dominant-baseline")}}</li> + <li>{{SVGAttr("dur")}}</li> + <li>{{SVGAttr("dx")}}</li> + <li>{{SVGAttr("dy")}}</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{SVGAttr("edgeMode")}}</li> + <li>{{SVGAttr("elevation")}}</li> + <li>{{SVGAttr("enable-background")}}</li> + <li>{{SVGAttr("end")}}</li> + <li>{{SVGAttr("exponent")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{SVGAttr("fill")}}</li> + <li>{{SVGAttr("fill-opacity")}}</li> + <li>{{SVGAttr("fill-rule")}}</li> + <li>{{SVGAttr("filter")}}</li> + <li>{{SVGAttr("filterRes")}}</li> + <li>{{SVGAttr("filterUnits")}}</li> + <li>{{SVGAttr("flood-color")}}</li> + <li>{{SVGAttr("flood-opacity")}}</li> + <li>{{SVGAttr("font-family")}}</li> + <li>{{SVGAttr("font-size")}}</li> + <li>{{SVGAttr("font-size-adjust")}}</li> + <li>{{SVGAttr("font-stretch")}}</li> + <li>{{SVGAttr("font-style")}}</li> + <li>{{SVGAttr("font-variant")}}</li> + <li>{{SVGAttr("font-weight")}}</li> + <li>{{SVGAttr("format")}}</li> + <li>{{SVGAttr("from")}}</li> + <li>{{SVGAttr("fr")}}</li> + <li>{{SVGAttr("fx")}}</li> + <li>{{SVGAttr("fy")}}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{SVGAttr("g1")}}</li> + <li>{{SVGAttr("g2")}}</li> + <li>{{SVGAttr("glyph-name")}}</li> + <li>{{SVGAttr("glyph-orientation-horizontal")}}</li> + <li>{{SVGAttr("glyph-orientation-vertical")}}</li> + <li>{{SVGAttr("glyphRef")}}</li> + <li>{{SVGAttr("gradientTransform")}}</li> + <li>{{SVGAttr("gradientUnits")}}</li> +</ul> + +<h3 id="H">H</h3> + +<ul> + <li>{{SVGAttr("hanging")}}</li> + <li>{{SVGAttr("height")}}</li> + <li>{{SVGAttr("href")}}</li> + <li>{{SVGAttr("hreflang")}}</li> + <li>{{SVGAttr("horiz-adv-x")}}</li> + <li>{{SVGAttr("horiz-origin-x")}}</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{SVGAttr("id")}}</li> + <li>{{SVGAttr("ideographic")}}</li> + <li>{{SVGAttr("image-rendering")}}</li> + <li>{{SVGAttr("in")}}</li> + <li>{{SVGAttr("in2")}}</li> + <li>{{SVGAttr("intercept")}}</li> +</ul> + +<h3 id="K">K</h3> + +<ul> + <li>{{SVGAttr("k")}}</li> + <li>{{SVGAttr("k1")}}</li> + <li>{{SVGAttr("k2")}}</li> + <li>{{SVGAttr("k3")}}</li> + <li>{{SVGAttr("k4")}}</li> + <li>{{SVGAttr("kernelMatrix")}}</li> + <li>{{SVGAttr("kernelUnitLength")}}</li> + <li>{{SVGAttr("kerning")}}</li> + <li>{{SVGAttr("keyPoints")}}</li> + <li>{{SVGAttr("keySplines")}}</li> + <li>{{SVGAttr("keyTimes")}}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{SVGAttr("lang")}}</li> + <li>{{SVGAttr("lengthAdjust")}}</li> + <li>{{SVGAttr("letter-spacing")}}</li> + <li>{{SVGAttr("lighting-color")}}</li> + <li>{{SVGAttr("limitingConeAngle")}}</li> + <li>{{SVGAttr("local")}}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{SVGAttr("marker-end")}}</li> + <li>{{SVGAttr("marker-mid")}}</li> + <li>{{SVGAttr("marker-start")}}</li> + <li>{{SVGAttr("markerHeight")}}</li> + <li>{{SVGAttr("markerUnits")}}</li> + <li>{{SVGAttr("markerWidth")}}</li> + <li>{{SVGAttr("mask")}}</li> + <li>{{SVGAttr("maskContentUnits")}}</li> + <li>{{SVGAttr("maskUnits")}}</li> + <li>{{SVGAttr("mathematical")}}</li> + <li>{{SVGAttr("max")}}</li> + <li>{{SVGAttr("media")}}</li> + <li>{{SVGAttr("method")}}</li> + <li>{{SVGAttr("min")}}</li> + <li>{{SVGAttr("mode")}}</li> +</ul> + +<h3 id="N">N</h3> + +<ul> + <li>{{SVGAttr("name")}}</li> + <li>{{SVGAttr("numOctaves")}}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{SVGAttr("offset")}}</li> + <li>{{SVGAttr("opacity")}}</li> + <li>{{SVGAttr("operator")}}</li> + <li>{{SVGAttr("order")}}</li> + <li>{{SVGAttr("orient")}}</li> + <li>{{SVGAttr("orientation")}}</li> + <li>{{SVGAttr("origin")}}</li> + <li>{{SVGAttr("overflow")}}</li> + <li>{{SVGAttr("overline-position")}}</li> + <li>{{SVGAttr("overline-thickness")}}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{SVGAttr("panose-1")}}</li> + <li>{{SVGAttr("paint-order")}}</li> + <li>{{SVGAttr("path")}}</li> + <li>{{SVGAttr("pathLength")}}</li> + <li>{{SVGAttr("patternContentUnits")}}</li> + <li>{{SVGAttr("patternTransform")}}</li> + <li>{{SVGAttr("patternUnits")}}</li> + <li>{{SVGAttr("ping")}}</li> + <li>{{SVGAttr("pointer-events")}}</li> + <li>{{SVGAttr("points")}}</li> + <li>{{SVGAttr("pointsAtX")}}</li> + <li>{{SVGAttr("pointsAtY")}}</li> + <li>{{SVGAttr("pointsAtZ")}}</li> + <li>{{SVGAttr("preserveAlpha")}}</li> + <li>{{SVGAttr("preserveAspectRatio")}}</li> + <li>{{SVGAttr("primitiveUnits")}}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{SVGAttr("r")}}</li> + <li>{{SVGAttr("radius")}}</li> + <li>{{SVGAttr("referrerPolicy")}}</li> + <li>{{SVGAttr("refX")}}</li> + <li>{{SVGAttr("refY")}}</li> + <li>{{SVGAttr("rel")}}</li> + <li>{{SVGAttr("rendering-intent")}}</li> + <li>{{SVGAttr("repeatCount")}}</li> + <li>{{SVGAttr("repeatDur")}}</li> + <li>{{SVGAttr("requiredExtensions")}}</li> + <li>{{SVGAttr("requiredFeatures")}}</li> + <li>{{SVGAttr("restart")}}</li> + <li>{{SVGAttr("result")}}</li> + <li>{{SVGAttr("rotate")}}</li> + <li>{{SVGAttr("rx")}}</li> + <li>{{SVGAttr("ry")}}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{SVGAttr("scale")}}</li> + <li>{{SVGAttr("seed")}}</li> + <li>{{SVGAttr("shape-rendering")}}</li> + <li>{{SVGAttr("slope")}}</li> + <li>{{SVGAttr("spacing")}}</li> + <li>{{SVGAttr("specularConstant")}}</li> + <li>{{SVGAttr("specularExponent")}}</li> + <li>{{SVGAttr("speed")}}</li> + <li>{{SVGAttr("spreadMethod")}}</li> + <li>{{SVGAttr("startOffset")}}</li> + <li>{{SVGAttr("stdDeviation")}}</li> + <li>{{SVGAttr("stemh")}}</li> + <li>{{SVGAttr("stemv")}}</li> + <li>{{SVGAttr("stitchTiles")}}</li> + <li>{{SVGAttr("stop-color")}}</li> + <li>{{SVGAttr("stop-opacity")}}</li> + <li>{{SVGAttr("strikethrough-position")}}</li> + <li>{{SVGAttr("strikethrough-thickness")}}</li> + <li>{{SVGAttr("string")}}</li> + <li>{{SVGAttr("stroke")}}</li> + <li>{{SVGAttr("stroke-dasharray")}}</li> + <li>{{SVGAttr("stroke-dashoffset")}}</li> + <li>{{SVGAttr("stroke-linecap")}}</li> + <li>{{SVGAttr("stroke-linejoin")}}</li> + <li>{{SVGAttr("stroke-miterlimit")}}</li> + <li>{{SVGAttr("stroke-opacity")}}</li> + <li>{{SVGAttr("stroke-width")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("surfaceScale")}}</li> + <li>{{SVGAttr("systemLanguage")}}</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{SVGAttr("tabindex")}}</li> + <li>{{SVGAttr("tableValues")}}</li> + <li>{{SVGAttr("target")}}</li> + <li>{{SVGAttr("targetX")}}</li> + <li>{{SVGAttr("targetY")}}</li> + <li>{{SVGAttr("text-anchor")}}</li> + <li>{{SVGAttr("text-decoration")}}</li> + <li>{{SVGAttr("text-rendering")}}</li> + <li>{{SVGAttr("textLength")}}</li> + <li>{{SVGAttr("to")}}</li> + <li>{{SVGAttr("transform")}}</li> + <li>{{SVGAttr("type")}}</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{SVGAttr("u1")}}</li> + <li>{{SVGAttr("u2")}}</li> + <li>{{SVGAttr("underline-position")}}</li> + <li>{{SVGAttr("underline-thickness")}}</li> + <li>{{SVGAttr("unicode")}}</li> + <li>{{SVGAttr("unicode-bidi")}}</li> + <li>{{SVGAttr("unicode-range")}}</li> + <li>{{SVGAttr("units-per-em")}}</li> +</ul> + +<h3 id="V">V</h3> + +<ul> + <li>{{SVGAttr("v-alphabetic")}}</li> + <li>{{SVGAttr("v-hanging")}}</li> + <li>{{SVGAttr("v-ideographic")}}</li> + <li>{{SVGAttr("v-mathematical")}}</li> + <li>{{SVGAttr("values")}}</li> + <li>{{SVGAttr("vector-effect")}}</li> + <li>{{SVGAttr("version")}}</li> + <li>{{SVGAttr("vert-adv-y")}}</li> + <li>{{SVGAttr("vert-origin-x")}}</li> + <li>{{SVGAttr("vert-origin-y")}}</li> + <li>{{SVGAttr("viewBox")}}</li> + <li>{{SVGAttr("viewTarget")}}</li> + <li>{{SVGAttr("visibility")}}</li> +</ul> + +<h3 id="W">W</h3> + +<ul> + <li>{{SVGAttr("width")}}</li> + <li>{{SVGAttr("widths")}}</li> + <li>{{SVGAttr("word-spacing")}}</li> + <li>{{SVGAttr("writing-mode")}}</li> +</ul> + +<h3 id="X">X</h3> + +<ul> + <li>{{SVGAttr("x")}}</li> + <li>{{SVGAttr("x-height")}}</li> + <li>{{SVGAttr("x1")}}</li> + <li>{{SVGAttr("x2")}}</li> + <li>{{SVGAttr("xChannelSelector")}}</li> + <li>{{SVGAttr("xlink:actuate")}}</li> + <li>{{SVGAttr("xlink:arcrole")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> + <li>{{SVGAttr("xlink:role")}}</li> + <li>{{SVGAttr("xlink:show")}}</li> + <li>{{SVGAttr("xlink:title")}}</li> + <li>{{SVGAttr("xlink:type")}}</li> + <li>{{SVGAttr("xml:base")}}</li> + <li>{{SVGAttr("xml:lang")}}</li> + <li>{{SVGAttr("xml:space")}}</li> +</ul> + +<h3 id="Y">Y</h3> + +<ul> + <li>{{SVGAttr("y")}}</li> + <li>{{SVGAttr("y1")}}</li> + <li>{{SVGAttr("y2")}}</li> + <li>{{SVGAttr("yChannelSelector")}}</li> +</ul> + +<h3 id="Z">Z</h3> + +<ul> + <li>{{SVGAttr("z")}}</li> + <li>{{SVGAttr("zoomAndPan")}}</li> +</ul> +</div> + +<h2 id="SVG_属性（按类别分类）">SVG 属性（按类别分类）</h2> + +<h3 id="Generic_Attributes">Generic Attributes</h3> + +<h4 id="核心属性"><a href="/docs/Web/SVG/Attribute/Core">核心属性</a></h4> + +<p>{{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}}</p> + +<h4 id="样式属性"><a href="/docs/Web/SVG/Attribute/Styling">样式属性</a></h4> + +<p>{{SVGAttr("class")}}, {{SVGAttr("style")}}</p> + +<h4 id="条件处理属性">条件处理属性</h4> + +<p>{{SVGAttr("externalResourcesRequired")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}.</p> + +<h3 id="XLink_属性">XLink 属性</h3> + +<p>{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:type")}}, {{SVGAttr("xlink:role")}}, {{SVGAttr("xlink:arcrole")}}, {{SVGAttr("xlink:title")}}, {{SVGAttr("xlink:show")}}, {{SVGAttr("xlink:actuate")}}</p> + +<h3 id="显示属性"><a href="/docs/Web/SVG/Attribute/Presentation">显示属性</a></h3> + +<div class="note">注意，所有 SVG 显示属性都可以作为 CSS 属性来使用。</div> + +<p>{{SVGAttr("alignment-baseline")}}, {{SVGAttr("baseline-shift")}}, {{SVGAttr("clip")}}, {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}, {{SVGAttr("color")}}, {{SVGAttr("color-interpolation")}}, {{SVGAttr("color-interpolation-filters")}}, {{SVGAttr("color-profile")}}, {{SVGAttr("color-rendering")}}, {{SVGAttr("cursor")}}, {{SVGAttr("direction")}}, {{SVGAttr("display")}}, {{SVGAttr("dominant-baseline")}}, {{SVGAttr("enable-background")}}, {{SVGAttr("fill")}}, {{SVGAttr("fill-opacity")}}, {{SVGAttr("fill-rule")}}, {{SVGAttr("filter")}}, {{SVGAttr("flood-color")}}, {{SVGAttr("flood-opacity")}}, {{SVGAttr("font-family")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("glyph-orientation-horizontal")}}, {{SVGAttr("glyph-orientation-vertical")}}, {{SVGAttr("image-rendering")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("lighting-color")}}, {{SVGAttr("marker-end")}}, {{SVGAttr("marker-mid")}}, {{SVGAttr("marker-start")}}, {{SVGAttr("mask")}}, {{SVGAttr("opacity")}}, {{SVGAttr("overflow")}}, {{SVGAttr("pointer-events")}}, {{SVGAttr("shape-rendering")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("stop-opacity")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stroke-dasharray")}}, {{SVGAttr("stroke-dashoffset")}}, {{SVGAttr("stroke-linecap")}}, {{SVGAttr("stroke-linejoin")}}, {{SVGAttr("stroke-miterlimit")}}, {{SVGAttr("stroke-opacity")}}, {{SVGAttr("stroke-width")}}, {{SVGAttr("text-anchor")}}, {{SVGAttr("transform")}}, {{SVGAttr("text-decoration")}}, {{SVGAttr("text-rendering")}}, {{SVGAttr("unicode-bidi")}}, {{SVGAttr("vector-effect")}}, {{SVGAttr("visibility")}}, {{SVGAttr("word-spacing")}}, {{SVGAttr("writing-mode")}}</p> + +<h3 id="滤镜属性">滤镜属性</h3> + +<h4 id="滤镜原始属性">滤镜原始属性</h4> + +<p>{{SVGAttr("height")}}, {{SVGAttr("result")}}, {{SVGAttr("width")}}, {{SVGAttr("x")}}, {{SVGAttr("y")}}</p> + +<h4 id="传递函数属性">传递函数属性</h4> + +<p>{{SVGAttr("type")}}, {{SVGAttr("tableValues")}}, {{SVGAttr("slope")}}, {{SVGAttr("intercept")}}, {{SVGAttr("amplitude")}}, {{SVGAttr("exponent")}}, {{SVGAttr("offset")}}</p> + +<h3 id="动画属性">动画属性</h3> + +<h4 id="动画属性目标属性">动画属性目标属性</h4> + +<p>{{SVGAttr("attributeType")}}, {{SVGAttr("attributeName")}}</p> + +<h4 id="动画时间属性">动画时间属性</h4> + +<p>{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}</p> + +<h4 id="动画取值属性">动画取值属性</h4> + +<p>{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}, {{SVGAttr("autoReverse")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}}</p> + +<h4 id="动画额外属性">动画额外属性</h4> + +<p>{{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}</p> + +<h3 id="事件属性">事件属性</h3> + +<h4 id="动画事件属性"><a href="/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes">动画事件属性</a></h4> + +<p><strong><code>onbegin</code></strong>, <strong><code>onend</code></strong>, <strong><code>onrepeat</code></strong></p> + +<h4 id="文档事件属性"><a href="/docs/Web/SVG/Attribute/Events#Document_Event_Attributes">文档事件属性</a></h4> + +<p><strong><code>onabort</code></strong>, <strong><code>onerror</code></strong>, <strong><code>onresize</code></strong>, <strong><code>onscroll</code></strong>, <strong><code>onunload</code></strong></p> + +<h4 id="全局事件属性"><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">全局事件属性</a></h4> + +<p><code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code></p> + +<h4 id="图像事件属性"><a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">图像事件属性</a></h4> + +<p><strong><code>onactivate</code></strong>, <strong><code>onfocusin</code></strong>, <strong><code>onfocusout</code></strong></p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/SVG/Element">SVG 元素参考</a></li> + <li><a href="/zh-CN/docs/Web/SVG/Tutorial">SVG 教程</a></li> + <li><a href="/zh-CN/docs/Web/API/Document_Object_Model#SVG_interfaces">SVG 接口参考</a></li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/kernelmatrix/index.html b/files/zh-cn/web/svg/attribute/kernelmatrix/index.html new file mode 100644 index 0000000000..c216cfd948 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/kernelmatrix/index.html @@ -0,0 +1,41 @@ +--- +title: kernelMatrix +slug: Web/SVG/Attribute/kernelMatrix +translation_of: Web/SVG/Attribute/kernelMatrix +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>用于order属性定义一列<a href="/en/SVG/Content_type#Number"><number></a>为{{SVGElement("feConvolveMatrix")}} 元素构成核矩阵. 值之间用空格或逗号分开. <a href="/en/SVG/Content_type#Number"><number></a>的数量必须等于在{{SVGAttr("order")}}属性中定义的<orderX>和<orderY>的乘积.</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><a href="/en/SVG/Content_type#List-of-<var>T<.2Fvar>s" title="en/SVG/Content_type#List-of-<var>T<.2Fvar>s"><list of number></a></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementKernelMatrixAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementKernelMatrixAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<h2 id="Elements">Elements</h2> + +<p>下面的元素可以使用<code>kernelMatrix属性</code></p> + +<ul> + <li>{{ SVGElement("feConvolveMatrix") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/keytimes/index.html b/files/zh-cn/web/svg/attribute/keytimes/index.html new file mode 100644 index 0000000000..b3aaab6aef --- /dev/null +++ b/files/zh-cn/web/svg/attribute/keytimes/index.html @@ -0,0 +1,97 @@ +--- +title: keyTimes +slug: Web/SVG/Attribute/keyTimes +tags: + - SVG + - SVG属性 + - keyTimes +translation_of: Web/SVG/Attribute/keyTimes +--- +<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG </a>属性参考主页</p> + +<p>keyTimes属性是一个以分号分隔的时间值列表，用于控制动画的执行步骤。列表中的每个值与{{ SVGAttr("values") }}中的值一一对应，定义了{{ SVGAttr("values") }}中的值在动画中何时执行，keyTimes列表中的每一个值都是指定在[0-1]之间的浮点数，表示动画的完成时间。</p> + +<p>如果指定了keyTimes列表，那么一定有与之完全对应的{{ SVGAttr("values") }}列表。</p> + +<p>每一个连续的时间值必须大于等于前一个时间值。</p> + +<p>keyTimes列表的语义取决于插值模式：</p> + +<ul> + <li>对于linear(线性)和spline(样条)动画，列表中的第一个时间值必须为0，列表的最后一个时间值必须为1。与每个value关联的时间值定义了何时设置该value，该value在keyTimes的时间 值的中间插值。</li> + <li>对于discrete(离线)动画，列表中的第一个值必须为0。与每个value关联的时间值定义了何时设置该value，动画函数使用该value，直到keyTimes中定义的下一个时间值。</li> +</ul> + +<p> </p> + +<p> </p> + +<ul> +</ul> + +<p> </p> + +<p>如果插值模式是paced（踏步），keyTimes属性被忽略。</p> + +<p>如果duration（持续时间）不确定，则将忽略任何keyTimes规范。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画值属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><list></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute" title="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><?xml version="1.0"?> +<svg width="120" height="120" + viewPort="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <circle cx="60" cy="10" r="10"> + + <animate attributeName="cx" + attributeType="XML" + dur="4s" + values="60 ; 110 ; 60 ; 10 ; 60" + keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" + repeatCount="indefinite"/> + + <animate attributeName="cy" + attributeType="XML" + dur="4s" + values="10 ; 60 ; 110 ; 60 ; 10 " + keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" + repeatCount="indefinite"/> + + </circle> +</svg> +</pre> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用 <code>keyTimes属性</code></p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateMotion") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/letter-spacing/index.html b/files/zh-cn/web/svg/attribute/letter-spacing/index.html new file mode 100644 index 0000000000..4f2568aeba --- /dev/null +++ b/files/zh-cn/web/svg/attribute/letter-spacing/index.html @@ -0,0 +1,90 @@ +--- +title: letter-spacing +slug: Web/SVG/Attribute/letter-spacing +translation_of: Web/SVG/Attribute/letter-spacing +--- +<div>{{SVGRef}}</div> + +<p><span class="seoSummary">The <strong><code>letter-spacing</code></strong> attribute controls spacing between text characters, in addition to any spacing from the {{SVGAttr("kerning")}} attribute.</span></p> + +<p>If the attribute value is a unitless number (like <code>128</code>), the browser processes it as a {{cssxref("length")}} in the current user coordinate system.</p> + +<p>If the attribute value has a unit identifier, such as <code>.25em</code> or <code>1%</code>, then the browser converts the <length> into its corresponding value in the current user coordinate system.</p> + +<p class="note"><strong>Note:</strong> As a presentation attribute, <code>letter-spacing</code> can be used as a CSS property. See the {{cssxref("letter-spacing", "CSS letter-spacing")}} property for more information.</p> + +<p>As a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: {{SVGElement("altGlyph")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, and {{SVGElement("tspan")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html; hightlight[2,3]"><svg viewBox="0 0 400 30" xmlns="http://www.w3.org/2000/svg"> + <text y="20" letter-spacing="2">Bigger letter-spacing</text> + <text x="200" y="20" letter-spacing="-0.5">Smaller letter-spacing</text> +</svg></pre> + +<p>{{EmbedLiveSample("topExample", "200", "30")}}</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code>normal</code> | {{cssxref("length")}}</td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>normal</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p>For a description of the values, please refer to the <a href="/en-US/docs/Web/CSS/letter-spacing#Values">CSS <code>letter-spacing</code></a> property.</p> + +<p class="note">As of May 2019, Firefox <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=371787">ignores <code>letter-spacing</code></a> and renders text without.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Text", "#letter-spacing-property", "letter-spacing")}}</td> + <td>{{Spec2("CSS3 Text")}}</td> + <td>SVG 2 just refers to the definition in CSS Text 3.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "text.html#LetterSpacingProperty", "letter-spacing")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.presentation.letter-spacing")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("letter-spacing", "CSS letter-spacing")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/marker-end/index.html b/files/zh-cn/web/svg/attribute/marker-end/index.html new file mode 100644 index 0000000000..348f884d8a --- /dev/null +++ b/files/zh-cn/web/svg/attribute/marker-end/index.html @@ -0,0 +1,103 @@ +--- +title: marker-end +slug: Web/SVG/Attribute/marker-end +translation_of: Web/SVG/Attribute/marker-end +--- +<div>{{SVGRef}}</div> + +<p><strong><code>marker-end</code></strong> 属性将在给定<a href="/en-US/docs/Web/SVG/Element#Shape_elements">形状</a>的最终顶点绘制的箭头或者多边形标记。</p> + +<p>对于除SVG的polyline和path元素之外的所有形状元素，最后的一个顶点与第一个顶点相同。在这种情况下，如果SVG的marker-start属性和 <code>marker-end</code> 的值都不是 <code><span class="prop-value">none</span></code> ，然后再最后一个顶点渲染两个图标。 对于一个 <code><span class="element-name"><path></span></code> 元素， 对于每个封闭的子路径，他的最后一个顶点都与第一个顶点相同。 <code>marker-end</code> 仅在<a href="/en-US/docs/Web/SVG/Attribute/d#Path_commands">路径数据</a>的最终顶点上呈现。</p> + +<p class="note"><strong>Note:</strong> 作为一个图像属性, <code>marker-end</code> 可以用作css属性.</p> + +<p>作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, and {{SVGElement("rect")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css notranslate">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html; hightlight[12] notranslate"><svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> + <defs> + <marker id="triangle" viewBox="0 0 10 10" + refX="1" refY="5" + markerUnits="strokeWidth" + markerWidth="10" markerHeight="10" + orient="auto"> + <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00"/> + </marker> + </defs> + <polyline fill="none" stroke="black" + points="20,100 40,60 70,80 100,20" marker-end="url(#triangle)"/> +</svg> +</pre> + +<p>{{EmbedLiveSample("topExample", "200", "200")}}</p> +</div> + +<h2 id="使用说明">使用说明</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code>none</code> | <code><marker-ref></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code>none</code></dt> + <dd>表示将不会在终点绘制任何符号。</dd> + <dt><code><marker-ref></code></dt> + <dd>这个值表示的是对 {{SVGElement("marker")}} 元素的引用, 将在终点绘制该元素.。如果引用无效，将不会绘制任何东西。</dd> +</dl> + +<h2 id="技术指标">技术指标</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#MarkerEndProperty", "marker-end")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#MarkerEndProperty", "marker-end")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.attributes.presentation.marker-end")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGAttr("marker-start")}}</li> + <li>{{SVGAttr("marker-mid")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/marker-start/index.html b/files/zh-cn/web/svg/attribute/marker-start/index.html new file mode 100644 index 0000000000..00ed2c1284 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/marker-start/index.html @@ -0,0 +1,103 @@ +--- +title: marker-start +slug: Web/SVG/Attribute/marker-start +translation_of: Web/SVG/Attribute/marker-start +--- +<div>{{SVGRef}}</div> + +<p><strong><code>marker-start</code></strong> 属性将在给定<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/SVG/Element#Shape_elements">形状</a>的起始顶点绘制的箭头或者多边形标记</p> + +<p>对于除SVG的polyline和path元素之外的所有形状元素，最后的一个顶点与第一个顶点相同。在这种情况下，如果SVG的<code>marker-start</code>属性和 {{SVGAttr("marker-end")}} 的值都不是 <code>none</code> ，然后再最后一个顶点渲染两个图标。 对于一个 <code><path></code> 元素， 对于每个封闭的子路径，他的最后一个顶点都与第一个顶点相同。 <code>marker-end</code> 仅在<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#Path_commands">路径数据</a>的起始顶点上呈现。</p> + +<p class="note"><strong>Note:</strong>作为一个图像属性, <code>marker-start</code> 可以用作css属性.</p> + +<p>作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, 和{{SVGElement("rect")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css notranslate">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html; hightlight[12] notranslate"><svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> + <defs> + <marker id="triangle" viewBox="0 0 10 10" + refX="1" refY="5" + markerUnits="strokeWidth" + markerWidth="10" markerHeight="10" + orient="auto"> + <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00"/> + </marker> + </defs> + <polyline fill="none" stroke="black" + points="20,100 40,60 70,80 100,20" marker-start="url(#triangle)"/> +</svg> +</pre> + +<p>{{EmbedLiveSample("topExample", "200", "200")}}</p> +</div> + +<h2 id="使用说明">使用说明</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">值</th> + <td><code>none</code> | <code><marker-ref></code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">可用作与动画</th> + <td>是</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code>none</code></dt> + <dd>表示将不会在起点绘制任何符号。</dd> + <dt><code><marker-ref></code></dt> + <dd>这个值表示的是对 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/SVG/Element/marker" title="marker元素定义了在特定的<path>元素、<line>元素、<polyline>元素或者<polygon>元素上绘制的箭头或者多边标记图形。"><code><marker></code></a> 元素的引用, 将在起点绘制该元素.。如果引用无效，将不会绘制任何东西。</dd> +</dl> + +<h2 id="技术指标">技术指标</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#MarkerStartProperty", "marker-start")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#MarkerStartProperty", "marker-start")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.attributes.presentation.marker-start")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGAttr("marker-end")}}</li> + <li>{{SVGAttr("marker-mid")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/mask/index.html b/files/zh-cn/web/svg/attribute/mask/index.html new file mode 100644 index 0000000000..d357ccf8a8 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/mask/index.html @@ -0,0 +1,59 @@ +--- +title: mask +slug: Web/SVG/Attribute/mask +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/mask +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>mask</code>属性绑定的元素将应用给定的{{ SVGElement("mask") }}元素。</p> + +<p>作为一个外观属性，它可以直接用作CSS样式表内部的属性。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#FuncIRI" title="https://developer.mozilla.org/en/SVG/Content_type#FuncIRI"><FuncIRI></a> | <strong title="this is the default value">none</strong> | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskProperty" title="hhttp://www.w3.org/TR/SVG/masking.html#MaskProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><a href="/en/SVG/Content_type#FuncIRI" title="https://developer.mozilla.org/en/SVG/Content_type#FuncIRI"><funcIRI></a></dt> + <dd>对同一SVG文档片段内部别的图形对象的一个引用 ，这个图形对象将用作遮罩。这个引用的句法与{{ cssxref("uri","CSS URI") }}的句法相同。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>mask</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Container" title="en/SVG/Element#Container">容器元素</a> »</li> + <li><a href="/en/SVG/Element#Graphical" title="en/SVG/Element#Graphical">图形元素</a> »</li> +</ul> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{ SVGElement("mask") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/max/index.html b/files/zh-cn/web/svg/attribute/max/index.html new file mode 100644 index 0000000000..1c21348b7e --- /dev/null +++ b/files/zh-cn/web/svg/attribute/max/index.html @@ -0,0 +1,91 @@ +--- +title: max +slug: Web/SVG/Attribute/max +translation_of: Web/SVG/Attribute/max +--- +<div>{{SVGRef}}</div> + +<p>The <strong><code>max</code></strong> attribute specifies the maximum value of the active animation duration.</p> + +<p>Five elements are using this attribute: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, and {{SVGElement("set")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html; highlight[3,5]"><svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> + <circle cx="60" cy="10" r="10"> + <animate attributeName="cx" dur="4s" max="6s" repeatCount="indefinite" + values="60 ; 110 ; 60 ; 10 ; 60" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> + <animate attributeName="cy" dur="4s" max="6s" repeatCount="indefinite" + values="10 ; 60 ; 110 ; 60 ; 10" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> + </circle> +</svg></pre> + +<p>{{EmbedLiveSample("topExample", "200", "200")}}</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#Clock-value"><clock-value></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><clock-value></code></dt> + <dd> + <p>Specifies the length of the maximum value of the active duration, measured in local time. The value must be greater than 0.</p> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#MaxAttribute", "max")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#MaxAttribute", "max")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.animate.max")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{SVGAttr("min")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/media/index.html b/files/zh-cn/web/svg/attribute/media/index.html new file mode 100644 index 0000000000..ffc594fdb4 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/media/index.html @@ -0,0 +1,90 @@ +--- +title: media +slug: Web/SVG/Attribute/media +translation_of: Web/SVG/Attribute/media +--- +<div>{{SVGRef}}</div> + +<p><span class="seoSummary"><code><strong>media</strong></code>属性指定只有符合{{Glossary("media query")}}的样式表才会被应用。 </span></p> + +<p>只有一个元素使用这个属性： {{SVGElement("style")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html; highlight[5]"><svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> + <style> + rect { fill: black; } + </style> + <style media="all and (min-width: 600px)"> + rect { fill: seagreen; } + </style> + + <text y="15">Resize the window to see the effect</text> + <rect y="20" width="200" height="200" /> +</svg></pre> + +<p>{{EmbedLiveSample("topExample", "200", "200")}}</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/CSS/@media#media-query-list"><media-query-list></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>all</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><media-query-list></code></dt> + <dd> + <p>This value holds a media query that needs to match in order for the style sheet to be applied.</p> + + <p>如果没有指定，样式表就会被应用。</p> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "styling.html#StyleElementMediaAttribute", "media")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Changed the value definition from different media types as defined in CSS 2 to <code><a href="/en-US/docs/Web/CSS/@media#media-query-list"><media-query-list></a></code>.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "styling.html#StyleElementMediaAttribute", "media")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.elements.style.media")}}</p> diff --git a/files/zh-cn/web/svg/attribute/opacity/index.html b/files/zh-cn/web/svg/attribute/opacity/index.html new file mode 100644 index 0000000000..1d5940c7d6 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/opacity/index.html @@ -0,0 +1,69 @@ +--- +title: opacity +slug: Web/SVG/Attribute/opacity +tags: + - SVG + - SVG属性 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/opacity +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>opacity属性指定了一个对象或一组对象的透明度，也就是说，元素后面的背景的透过率。</p> + +<p>作为一个外观属性，它可以直接用作CSS样式表内部的属性，请阅读 {{ cssxref("opacity","CSS opacity") }}以了解更多信息。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><opacity-value> | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#OpacityProperty" title="http://www.w3.org/TR/SVG11/masking.html#OpacityProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><opacity-value></dt> + <dd>一致的不透明度设置，作为一个<a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a>被应用到整个对象上。任何超过范围0.0到1.0的值都会被压回这个范围。0.0表示完全透明，1.0表示完全不透明。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>opacity</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">图形元素</a> »</li> + <li>{{ SVGElement("a") }}</li> + <li>{{ SVGElement("defs") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("g") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("missing-glyph") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("switch") }}</li> + <li>{{ SVGElement("symbol") }}</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ cssxref("opacity","CSS opacity") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/order/index.html b/files/zh-cn/web/svg/attribute/order/index.html new file mode 100644 index 0000000000..5f54974826 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/order/index.html @@ -0,0 +1,47 @@ +--- +title: order +slug: Web/SVG/Attribute/order +translation_of: Web/SVG/Attribute/order +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>order 属性确定被用作{{ SVGElement("feConvolveMatrix") }}元素的矩阵的大小.</p> + +<p>提供的值必须是大于0的<a href="/en/SVG/Content_type#Integer" title="/en/SVG/Content_type#Integer"><整数></a>. 第一个值<orderX>,确定矩阵的列数. 第二个值<orderY>确定矩阵的行数.如果<orderY>没有指定，那么它的默认值相当于<orderX>的值.</p> + +<p>一个典型的值是order="3". 建议只使用较小的值(例如3); 大值可能会导致较高的CPU开销而且通常界面上并不能表现出高耗能造成的效果.</p> + +<p>如果未指定该属性，则其效果就如同指定值为3.</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><a href="/en/SVG/Content_type#Number-optional-number" title="en/SVG/Content_type#Color"><number-optional-number></a></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<h2 id="Elements">Elements</h2> + +<p>下列元素可以使用order属性</p> + +<ul> + <li>{{ SVGElement("feConvolveMatrix") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/origin/index.html b/files/zh-cn/web/svg/attribute/origin/index.html new file mode 100644 index 0000000000..a72b0f75c7 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/origin/index.html @@ -0,0 +1,59 @@ +--- +title: origin +slug: Web/SVG/Attribute/origin +translation_of: Web/SVG/Attribute/origin +--- +<div>{{SVGRef}}</div> + +<p>该<code><strong>origin</strong></code>属性指定动画的运动原点。在SVG中无效。</p> + +<p>只有一个元素正在使用此属性：{{SVGElement("animateMotion")}}</p> + +<h2 id="总体注释">总体注释</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">值</th> + <td><code>default</code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>default</code></td> + </tr> + <tr> + <th scope="row">可动画的</th> + <td>没有</td> + </tr> + </tbody> +</table> + +<h2 id="技术指标">技术指标</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#OriginAttribute", "origin")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>没变</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#OriginAttribute", "origin")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初始定义（请<a href="https://www.w3.org/TR/smil-animation/#MotionOriginAttribute">参见SMIL动画规范</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="也可以看看">也可以看看</h2> + +<ul> + <li><a href="https://www.w3.org/TR/smil-animation/#MotionOriginAttribute"><code>origin</code>SMIL动画规范中的定义</a></li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/overflow/index.html b/files/zh-cn/web/svg/attribute/overflow/index.html new file mode 100644 index 0000000000..3353ca8ba6 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/overflow/index.html @@ -0,0 +1,70 @@ +--- +title: overflow +slug: Web/SVG/Attribute/overflow +translation_of: Web/SVG/Attribute/overflow +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>The <code>overflow</code> attribute has the same parameter values as defined for the {{ cssxref("overflow","CSS overflow property") }}. However, the following additional points apply:</p> + +<ul> + <li>The <code>overflow</code> attribute only applies to elements that establish new viewports (see below), {{ SVGElement("pattern") }} elements and {{ SVGElement("marker") }} elements. For all other elements, the property has no effect.</li> + <li>For those elements to which the <code>overflow</code> attribute can apply, if the <code>overflow</code> attribute has the value <code>hidden</code> or <code>scroll</code>, the effect is that a new clipping path in the shape of a rectangle is created. The result is equivalent to defining a {{ SVGElement("clipPath") }} element whose content is a {{ SVGElement("rect") }} element which defines the equivalent rectangle, and then specifying the <uri> of this {{ SVGElement("clipPath") }} element on the {{ SVGAttr("clip-path") }} attribute for the given element.</li> + <li>If the <code>overflow</code> attribute has a value other than <code>hidden</code> or <code>scroll</code>, the property has no effect.</li> + <li>Within SVG content, the value <code>auto</code> is equivalent to the value <code>visible</code>.</li> + <li>When an outermost svg element is embedded inline within HTML, if the <code>overflow</code> attribute has the value <code>hidden</code> or <code>scroll</code>, then the browser will establish an initial clipping path equal to the bounds of the initial viewport; otherwise, the initial clipping path is set according to the CSS clipping rules.</li> + <li>When an outermost svg element is stand-alone, the <code>overflow</code> attribute on the outermost svg element is ignored for the purposes of visual rendering and the initial clipping path is set to the bounds of the initial viewport.</li> + <li>The initial value for <code>overflow</code> as defined in CSS is <code>visible</code>, and this applies also to the root {{ SVGElement("svg") }} element; however, for child elements of an SVG document, SVG's browser style sheet overrides this initial value and sets the <code>overflow</code> attribute on elements that establish new viewports, ‘pattern’ elements and ‘marker’ elements to the value <code>hidden</code>.</li> +</ul> + +<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("overflow","CSS overflow") }} for further information.</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td>visible | hidden | scroll | auto | inherit</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#OverflowProperty" title="http://www.w3.org/TR/SVG11/masking.html#OverflowProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>overflow</code> attribute</p> + +<ul> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("marker") }}</li> +</ul> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.presentation.overflow")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ cssxref("overflow","CSS overflow") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/path/index.html b/files/zh-cn/web/svg/attribute/path/index.html new file mode 100644 index 0000000000..dfb04656e3 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/path/index.html @@ -0,0 +1,5 @@ +--- +title: path +slug: Web/SVG/Attribute/path +--- +<p>返回路径信息的数组</p> diff --git a/files/zh-cn/web/svg/attribute/pathlength/index.html b/files/zh-cn/web/svg/attribute/pathlength/index.html new file mode 100644 index 0000000000..0d0ad395a0 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/pathlength/index.html @@ -0,0 +1,219 @@ +--- +title: pathLength +slug: Web/SVG/Attribute/pathLength +translation_of: Web/SVG/Attribute/pathLength +--- +<div> +<p>{{SVGRef}}</p> + +<p>The <strong><code>pathLength</code></strong> attribute lets authors specify a total length for the path, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio <code>pathLength</code>/(<em>computed value of path length</em>).</p> + +<p>This can affect the actual rendered lengths of paths; including text paths, animation paths, and various stroke operations. Basically, all computations that require the length of the path. {{SVGAttr('stroke-dasharray')}}, for example, will assume the start of the path being 0 and the end point the value defined in the <code>pathLength</code> attribute.</p> + +<p>Seven elements are using this attribute: {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, and {{SVGElement('rect')}}</p> +</div> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg"> + <style> + path { + fill: none; + stroke: black; + stroke-width: 2; + stroke-dasharray: 10; + } + </style> + + <!-- No pathLength, the real length of the path is used. In that case, 100 user units --> + <path d="M 0,10 h100"/> + + <!-- compute everything like if the path length was 90 user units long --> + <path d="M 0,20 h100" pathLength="90"/> + + <!-- compute everything like if the path length was 50 user units long --> + <path d="M 0,30 h100" pathLength="50"/> + + <!-- compute everything like if the path length was 30 user units long --> + <path d="M 0,40 h100" pathLength="30"/> + + <!-- compute everything like if the path length was 10 user units long --> + <path d="M 0,50 h100" pathLength="10"/> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="circle">circle</h2> + +<p>For {{SVGElement('circle')}}, <code>pathLength</code> lets authors specify a total length for the circle, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="ellipse">ellipse</h2> + +<p>For {{SVGElement('ellipse')}}, <code>pathLength</code> lets authors specify a total length for the ellipse, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="line">line</h2> + +<p>For {{SVGElement('line')}}, <code>pathLength</code> lets authors specify a total length for the line, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="path">path</h2> + +<p>For {{SVGElement('path')}}, <code>pathLength</code> lets authors specify a total length for the path, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="polygon">polygon</h2> + +<p>For {{SVGElement('polygon')}}, <code>pathLength</code> lets authors specify a total length for the shape, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="polyline">polyline</h2> + +<p>For {{SVGElement('polyline')}}, <code>pathLength</code> lets authors specify a total length for the shape, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="rect">rect</h2> + +<p>For {{SVGElement('circle')}}, <code>pathLength</code> lets authors specify a total length for the rectangle, in user units.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "paths.html#PathLengthAttribute", "pathLength")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "paths.html#PathLengthAttribute", "pathLength")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/patternunits/index.html b/files/zh-cn/web/svg/attribute/patternunits/index.html new file mode 100644 index 0000000000..25bde24a36 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/patternunits/index.html @@ -0,0 +1,92 @@ +--- +title: patternUnits +slug: Web/SVG/Attribute/patternUnits +translation_of: Web/SVG/Attribute/patternUnits +--- +<div>{{SVGRef}}</div> + +<p>The <strong><code>patternUnits</code></strong> attribute indicates which coordinate system to use for the geometry properties of the {{ SVGElement("pattern") }} element.</p> + +<p>Only one element is using this attribute: {{SVGElement('pattern')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <!-- All geometry properties are relative to the current user space --> + <pattern id="p1" x="12.5" y="12.5" width="25" height="25" + patternUnits="userSpaceOnUse"> + <circle cx="10" cy="10" r="10" /> + </pattern> + + <!-- All geometry properties are relative to the target bounding box --> + <pattern id="p2" x=".125" y=".125" width=".25" height=".25" + patternUnits="objectBoundingBox"> + <circle cx="10" cy="10" r="10" /> + </pattern> + + <!-- Left square with user space tiles --> + <rect x="10" y="10" width="80" height="80" + fill="url(#p1)" /> + + <!-- Right square with bounding box tiles --> + <rect x="110" y="10" width="80" height="80" + fill="url(#p2)" /> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="pattern">pattern</h2> + +<p>For {{SVGElement('pattern')}}, <code>patternUnits</code> defines the coordinate system in use for the geometry properties ({{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }}) of the element.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code>userSpaceOnUse</code> | <code>objectBoundingBox</code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>objectBoundingBox</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<dl> + <dt>userSpaceOnUse</dt> + <dd>This value indicates that all coordinates for the geometry preoperties refer to the user coordinate system as defined when the pattern was applied.</dd> + <dt>objectBoundingBox</dt> + <dd>This value indicates that all coordinates for the geometry properties represent fractions or percentages of the bounding box of the element to which the mask is applied. A bounding box could be considered the same as if the content of the {{ SVGElement("mask") }} were bound to a "<code>0 0 1 1</code>" {{ SVGAttr("viewbox") }}.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "pservers.html#PatternElementPatternUnitsAttribute", "patternUnits")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#PatternElementPatternUnitsAttribute", "patternUnits")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/pointer-events/index.html b/files/zh-cn/web/svg/attribute/pointer-events/index.html new file mode 100644 index 0000000000..5a490a1b6d --- /dev/null +++ b/files/zh-cn/web/svg/attribute/pointer-events/index.html @@ -0,0 +1,102 @@ +--- +title: pointer-events +slug: Web/SVG/Attribute/pointer-events +translation_of: Web/SVG/Attribute/pointer-events +--- +<div>{{SVGRef}}</div> + +<p>pointer-events属性是一个展示属性，用于定义元素是否或何时可能是鼠标事件的目标元素。</p> + +<p class="note"><strong>Note:</strong> 作为一个展示属性， {{cssxref('pointer-events')}} 可以被当做CSS属性使用.</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> + <!-- + Circle元素将始终拦截鼠标事件。 + 为了改变较底部的的rect元素的颜色， + 你需要点击rect元素在圆外的部分 + --> + <rect x="0" y="0" height="10" width="10" fill="black" /> + <circle cx="5" cy="5" r="4" fill="white" + pointer-events="visiblePoint" /> + + <!-- + 下面的circle元素将永远不会获取到鼠标事件， + 当你点击circle元素或者点击rect元素时， + rect元素都会改变颜色 + --> + <rect x="10" y="0" height="10" width="10" fill="black" /> + <circle cx="15" cy="5" r="4" fill="white" + pointer-events="none" /> +</svg></pre> + +<pre class="brush: js">window.addEventListener('mouseup', (e) => { + // 在 #000000 和 #FFFFFF之间随机选取一个颜色 + const color = Math.round(Math.random() * 0xFFFFFF) + + // 将color变量的值按照css的要求进行格式化 + const fill = '#' + color.toString(16).padStart(6,'0') + + // 将color变量设置的颜色应用到实际点击的元素上 + e.target.style.fill = fill +})</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p> +</div> + +<p>作为一个展示属性，他可以被很多元素使用，但和它紧密相关的只有下面的23个元素: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('switch')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tspan')}}, {{SVGElement('use')}}</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><code>bounding-box</code> | <code>visiblePainted</code> | <code>visibleFill</code> | <code>visibleStroke</code> | <code>visible</code> | <code>painted</code> | <code>fill</code> | <code>stroke</code> | <code>all</code> | <code>none</code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>visiblePainted</code></td> + </tr> + <tr> + <th scope="row">是否可动画</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p><em>为了详细了解每个可能的值，请参考CSS文档 {{cssxref('pointer-events')}}.</em></p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容</h2> + +<div class="hidden">此页浏览器兼容的表格是根据结构化的数据生成的.如果你想要的为这份数据做贡献，请检出以下链接的内容 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并发送拉取请求</div> + +<p>{{Compat("svg.attributes.presentation.pointer-events")}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "interact.html#PointerEventsProperty", "pointer-events")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "interact.html#PointerEventsProperty", "pointer-events")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/points/index.html b/files/zh-cn/web/svg/attribute/points/index.html new file mode 100644 index 0000000000..bf3a2b6579 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/points/index.html @@ -0,0 +1,56 @@ +--- +title: points +slug: Web/SVG/Attribute/points +tags: + - SVG + - SVG属性 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/points +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>points</code>属性定义了用来画一个{{ SVGElement("polyline") }}元素或画一个SVGElement("polygon") }}元素的点的数列。</p> + +<p>每个点用用户坐标系统中的一个X坐标和Y坐标定义。用逗号分开每个点的X和Y坐标标记是一个常用实践（但是并非必要），使用空间标注每个点。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><list-of-points></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#PolylineElementPointsAttribute" title="http://www.w3.org/TR/SVG/shapes.html#PolylineElementPointsAttribute">SVG 1.1 (2nd Edition): The polyline element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#PolygonElementPointsAttribute" title="http://www.w3.org/TR/SVG/shapes.html#PolygonElementPointsAttribute">SVG 1.1 (2nd Edition): The polygon element</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <polygon points="100,10 250,150 200,110" + style="fill:lime;stroke:purple;stroke-width:1" /> +</svg> +</pre> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>points</code>属性：</p> + +<ul> + <li>{{ SVGElement("polyline") }}</li> + <li>{{ SVGElement("polygon") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/presentation/index.html b/files/zh-cn/web/svg/attribute/presentation/index.html new file mode 100644 index 0000000000..fd9ebaa059 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/presentation/index.html @@ -0,0 +1,276 @@ +--- +title: SVG Presentation Attributes +slug: Web/SVG/Attribute/Presentation +translation_of: Web/SVG/Attribute/Presentation +--- +<p>{{draft}}</p> + +<p>SVG表现属性是能够被用在SVG元素属性上的CSS属性。</p> + +<div class="index"> +<ul> + <li><a href="#attr-alignment-baseline">alignment-baseline</a></li> + <li><a href="#attr-baseline-shift">baseline-shift</a></li> + <li><a href="#attr-clip">clip</a></li> + <li><a href="#attr-clip-path">clip-path</a></li> + <li><a href="#attr-clip-rule">clip-rule</a></li> + <li><a href="#attr-color">color</a></li> + <li><a href="#attr-color-interpolation">color-interpolation</a></li> + <li><a href="#attr-color-interpolation-filters">color-interpolation-filters</a></li> + <li><a href="#attr-color-profile">color-profile</a></li> + <li><a href="#attr-color-rendering">color-rendering</a></li> + <li><a href="#attr-cursor">cursor</a></li> + <li><a href="#attr-direction">direction</a></li> + <li><a href="#attr-display">display</a></li> + <li><a href="#attr-dominant-baseline">dominant-baseline</a></li> + <li><a href="#attr-enable-background">enable-background</a></li> + <li><a href="#attr-fill">fill</a></li> + <li><a href="#attr-fill-opacity">fill-opacity</a></li> + <li><a href="#attr-fill-rule">fill-rule</a></li> + <li><a href="#attr-filter">filter</a></li> + <li><a href="#attr-flood-color">flood-color</a></li> + <li><a href="#attr-flood-opacity">flood-opacity</a></li> + <li><a href="#attr-font-family">font-family</a></li> + <li><a href="#attr-font-size">font-size</a></li> + <li><a href="#attr-font-size-adjust">font-size-adjust</a></li> + <li><a href="#attr-font-stretch">font-stretch</a></li> + <li><a href="#attr-font-style">font-style</a></li> + <li><a href="#attr-font-variant">font-variant</a></li> + <li><a href="#attr-font-weight">font-weight</a></li> + <li><a href="#attr-glyph-orientation-horizontal">glyph-orientation-horizontal</a></li> + <li><a href="#attr-glyph-orientation-vertical">glyph-orientation-vertical</a></li> + <li><a href="#attr-image-rendering">image-rendering</a></li> + <li><a href="#attr-kerning">kerning</a></li> + <li><a href="#attr-letter-spacing">letter-spacing</a></li> + <li><a href="#attr-lighting-color">lighting-color</a></li> + <li><a href="#attr-marker-end">marker-end</a></li> + <li><a href="#attr-marker-mid">marker-mid</a></li> + <li><a href="#attr-marker-start">marker-start</a></li> + <li><a href="#attr-mask">mask</a></li> + <li><a href="#attr-opacity">opacity</a></li> + <li><a href="#attr-overflow">overflow</a></li> + <li><a href="#attr-pointer-events">pointer-events</a></li> + <li><a href="#attr-shape-rendering">shape-rendering</a></li> + <li><a href="#attr-solid-color">solid-color</a></li> + <li><a href="#attr-solid-opacity">solid-opacity</a></li> + <li><a href="#attr-stop-color">stop-color</a></li> + <li><a href="#attr-stop-opacity">stop-opacity</a></li> + <li><a href="#attr-stroke">stroke</a></li> + <li><a href="#attr-stroke-dasharray">stroke-dasharray</a></li> + <li><a href="#attr-stroke-dashoffset">stroke-dashoffset</a></li> + <li><a href="#attr-stroke-linecap">stroke-linecap</a></li> + <li><a href="#attr-stroke-linejoin">stroke-linejoin</a></li> + <li><a href="#attr-stroke-miterlimit">stroke-miterlimit</a></li> + <li><a href="#attr-stroke-opacity">stroke-opacity</a></li> + <li><a href="#attr-stroke-width">stroke-width</a></li> + <li><a href="#attr-text-anchor">text-anchor</a></li> + <li><a href="#attr-text-decoration">text-decoration</a></li> + <li><a href="#attr-text-rendering">text-rendering</a></li> + <li><a href="#attr-transform">transform</a></li> + <li><a href="#attr-unicode-bidi">unicode-bidi</a></li> + <li><a href="#attr-vector-effect">vector-effect</a></li> + <li><a href="#attr-visibility">visibility</a></li> + <li><a href="#attr-word-spacing">word-spacing</a></li> + <li><a href="#attr-writing-mode">writing-mode</a></li> +</ul> +</div> + +<h2 id="Attributes">Attributes</h2> + +<dl> + <dt id="attr-alignment-baseline">{{SVGAttr('alignment-baseline')}}</dt> + <dd>It specifies how an object is aligned along the font baseline with respect to its parent.<br> + <small><em>Value</em>: <strong><code>auto</code></strong>|<code>baseline</code>|<code>before-edge</code>|<code>text-before-edge</code>|<code>middle</code>|<code>central</code>|<code>after-edge</code>|<code>text-after-edge</code>|<code>ideographic</code>|<code>alphabetic</code>|<code>hanging</code>|<code>mathematical</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-baseline-shift">{{SVGAttr('baseline-shift')}}</dt> + <dd>It allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element.<br> + <small><em>Value</em>: <strong><code>auto</code></strong>|<code>baseline</code>|<code>super</code>|<code>sub</code>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>|<a href="/docs/Web/SVG/Content_type#Length"><length></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-clip">{{SVGAttr('clip')}} {{deprecated_inline('css')}}</dt> + <dd>It defines what portion of an element is visible.<br> + <small><em>Value</em>: <strong><code>auto</code></strong>|{{cssxref("shape")}}|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-clip-path">{{SVGAttr('clip-path')}}</dt> + <dd>It binds the element it is applied to with a given {{SVGElement('clipPath')}} element.<br> + <small><em>Value</em>: <strong><code>none</code></strong>|<a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-clip-rule">{{SVGAttr('clip-rule')}}</dt> + <dd>It indicates how to determine what side of a path is inside a shape in order to know how a {{SVGElement('clipPath')}} should clip its target.<br> + <small><em>Value</em>: <strong><code>nonezero</code></strong>|<code>evenodd</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-color">{{SVGAttr('color')}}</dt> + <dd>It provides a potential indirect value (<code>currentColor</code>) for the <code>fill</code>, <code>stroke</code>, <code>stop-color</code>, <code>flood-color</code> and <code>lighting-color</code> presentation attributes.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Color"><color></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-color-interpolation">{{SVGAttr('color-interpolation')}}</dt> + <dd>It specifies the color space for gradient interpolations, color animations, and alpha compositing.<br> + <small><em>Value</em>: <code>auto</code>|<strong><code>sRGB</code></strong>|<code>linearRGB</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-color-interpolation-filters">{{SVGAttr('color-interpolation-filters')}}</dt> + <dd>It specifies the color space for imaging operations performed via filter effects.<br> + <small><em>Value</em>: <code>auto</code>|<code>sRGB</code>|<strong><code>linearRGB</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-color-profile">{{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}}</dt> + <dd>It defines which color profile a raster image included through the {{SVGElement('image')}} element should use.<br> + <small><em>Value</em>: <code>auto</code>|<code>sRGB</code>|<code>linearRGB</code>|<a href="/docs/Web/SVG/Content_type#Name"><name></a>|<a href="/docs/Web/SVG/Content_type#IRI"><IRI></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-color-rendering">{{SVGAttr('color-rendering')}}</dt> + <dd>It provides a hint to the browser about how to optimize its color interpolation and compositing operations.<br> + <small><em>Value</em>: <strong><code>auto</code></strong>|<code>optimizeSpeed</code>|<code>optimizeQuality</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-cursor">{{SVGAttr('cursor')}}</dt> + <dd>It specifies the mouse cursor displayed when the mouse pointer is over an element.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<a href="/docs/Web/CSS/cursor#Values"><keywords></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-direction">{{SVGAttr('direction')}}</dt> + <dd>It specifies the base writing direction of text.<br> + <small><em>Value</em>: <strong><code>ltr</code></strong>|<code>rtl</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-display">{{SVGAttr('display')}}</dt> + <dd>It allows to control the rendering of graphical or container elements.<br> + <small><em>Value</em>: see css {{cssxref('display')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-dominant-baseline">{{SVGAttr('dominant-baseline')}}</dt> + <dd>It defines the baseline used to align the box’s text and inline-level contents.<br> + <small><em>Value</em>: <code>auto</code>|<code>text-bottom</code>|<code>alphabetic</code>|<code>ideographic</code>|<code>middle</code>|<code>central</code>| <code>mathematical</code>|<code>hanging</code>|<code>text-top</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-enable-background">{{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}}</dt> + <dd>It tells the browser how to manage the accumulation of the background image.<br> + <small><em>Value</em>: <strong><code>accumulate</code></strong>|<code>new</code>|<code>inherit</code>; <em>Animatable</em>: <strong>No</strong></small></dd> + <dt id="attr-fill">{{SVGAttr('fill')}}</dt> + <dd>It defines the color of the inside of the graphical element it applies to.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Paint"><paint></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-fill-opacity">{{SVGAttr('fill-opacity')}}</dt> + <dd>It specifies the opacity of the color or the content the current object is filled with.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Number"><number></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-fill-rule">{{SVGAttr('fill-rule')}}</dt> + <dd>It indicates how to determine what side of a path is inside a shape.<br> + <small><em>Value</em>: <strong><code>nonzero</code></strong>|<code>evenodd</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-filter">{{SVGAttr('filter')}}</dt> + <dd>It defines the filter effects defined by the {{SVGElement('filter')}} element that shall be applied to its element.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-flood-color">{{SVGAttr('flood-color')}}</dt> + <dd>It indicates what color to use to flood the current filter primitive subregion defined through the {{SVGElement('feFlood')}} or {{SVGElement('feDropShadow')}} element.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Color"><color></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-flood-opacity">{{SVGAttr('flood-opacity')}}</dt> + <dd>It indicates the opacity value to use across the current filter primitive subregion defined through the {{SVGElement('feFlood')}} or {{SVGElement('feDropShadow')}} element.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Number"><number></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-font-family">{{SVGAttr('font-family')}}</dt> + <dd>It indicates which font family will be used to render the text of the element.<br> + <small><em>Value</em>: see css {{cssxref('font-family')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-font-size">{{SVGAttr('font-size')}}</dt> + <dd>It specifies the size of the font.<br> + <small><em>Value</em>: see css {{cssxref('font-size')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-font-size-adjust">{{SVGAttr('font-size-adjust')}}</dt> + <dd>It specifies that the font size should be chosen based on the height of lowercase letters rather than the height of capital letters.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Number"><number></a>|<code><strong>none</strong></code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-font-stretch">{{SVGAttr('font-stretch')}}</dt> + <dd>It selects a normal, condensed, or expanded face from a font.<br> + <small><em>Value</em>: see css {{cssxref('font-stretch')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-font-style">{{SVGAttr('font-style')}}</dt> + <dd>It specifies whether a font should be styled with a normal, italic, or oblique face from its {{SVGAttr('font-family')}}.<br> + <small><em>Value</em>: <strong><code>normal</code></strong>|<code>italic</code>|<code>oblique</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-font-variant">{{SVGAttr('font-variant')}}</dt> + <dd>It specifies whether a font should be used with some of their variation such as small caps or ligatures.<br> + <small><em>Value</em>: see css {{cssxref('font-variant')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-font-weight">{{SVGAttr('font-weight')}}</dt> + <dd>It specifies the weight (or boldness) of the font.<br> + <small><em>Value</em>: <strong><code>normal</code></strong>|<code>bold</code>|<code>lighter</code>|<code>bolder</code>|<code>100</code>|<code>200</code>|<code>300</code>|<code>400</code>|<code>500</code>|<code>600</code>|<code>700</code>|<code>800</code>|<code>900</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-glyph-orientation-horizontal">{{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}}</dt> + <dd>It controls glyph orientation when the inline-progression-direction is horizontal.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Angle"><angle></a>|<code>inherit</code>; <em>Animatable</em>: <strong>No</strong></small></dd> + <dt id="attr-glyph-orientation-vertical">{{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}}</dt> + <dd>It controls glyph orientation when the inline-progression-direction is vertical.<br> + <small><em>Value</em>: <strong><code>auto</code></strong>|<a href="/docs/Web/SVG/Content_type#Angle"><angle></a>|<code>inherit</code>; <em>Animatable</em>: <strong>No</strong></small></dd> + <dt id="attr-image-rendering">{{SVGAttr('image-rendering')}}</dt> + <dd>It provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.<br> + <small><em>Value</em>: <strong><code>auto</code></strong>|<code>optimizeQuality</code>|<code>optimizeSpeed</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-kerning">{{SVGAttr('kerning')}} {{deprecated_inline('svg2')}}</dt> + <dd>It indicates whether the browser should adjust inter-glyph spacing.<br> + <small><em>Value</em>: <strong><code>auto</code></strong>|<a href="/docs/Web/SVG/Content_type#Length"><length></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-letter-spacing">{{SVGAttr('letter-spacing')}}</dt> + <dd>It controls spacing between text characters.<br> + <small><em>Value</em>: <strong><code>normal</code></strong>|<a href="/docs/Web/SVG/Content_type#Length"><length></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-lighting-color">{{SVGAttr('lighting-color')}}</dt> + <dd>It defines the color of the light source for filter primitives elements {{SVGElement('feDiffuseLighting')}} and {{SVGElement('feSpecularLighting')}}.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Color"><color></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-marker-end">{{SVGAttr('marker-end')}}</dt> + <dd>It defines the arrowhead or polymarker that will be drawn at the final vertex of the given {{SVGElement('path')}} element or basic shape.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-marker-mid">{{SVGAttr('marker-mid')}}</dt> + <dd>It defines the arrowhead or polymarker that will be drawn at every vertex other than the first and last vertex of the given {{SVGElement('path')}} element or basic shape.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-marker-start">{{SVGAttr('marker-start')}}</dt> + <dd>It defines the arrowhead or polymarker that will be drawn at the first vertex of the given {{SVGElement('path')}} element or basic shape.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-mask">{{SVGAttr('mask')}}</dt> + <dd>It alters the visibility of an element by either masking or clipping the image at specific points.<br> + <small><em>Value</em>: see css {{cssxref('mask')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-opacity">{{SVGAttr('opacity')}}</dt> + <dd>It specifies the transparency of an object or a group of objects.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Opacity_value"><opacity-value></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-overflow">{{SVGAttr('overflow')}}</dt> + <dd>Specifies whether the content of a block-level element is clipped when it overflows the element's box.<br> + <small><em>Value</em>: <code><strong>visible</strong></code>|<code>hidden|scroll</code>|<code>auto</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-pointer-events">{{SVGAttr('pointer-events')}}</dt> + <dd>Defines whether or when an element may be the target of a mouse event.<br> + <small><em>Value</em>: <code>bounding-box</code>|<code><strong>visiblePainted</strong></code>|<code>visibleFil</code>|<code>visibleStroke</code>|<code>visible</code> |<code>painted</code>|<code>fill</code>|<code>stroke</code>|<code>all</code>|<code>none</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-shape-rendering">{{SVGAttr('shape-rendering')}}</dt> + <dd>Hints about what tradeoffs to make as the browser renders {{SVGElement('path')}} element or basic shapes.<br> + <small><em>Value</em>: <code><strong>auto</strong></code>|<code>optimizeSpeed</code>|<code>crispEdges</code>|<code>geometricPrecision</code> |<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-solid-color">{{SVGAttr('solid-color')}}</dt> + <dd>-<br> + <small><em>Value</em>:; <em>Animatable</em>: <strong>-</strong></small></dd> + <dt id="attr-solid-opacity">{{SVGAttr('solid-opacity')}}</dt> + <dd>-<br> + <small><em>Value</em>:; <em>Animatable</em>: <strong>-</strong></small></dd> + <dt id="attr-stop-color">{{SVGAttr('stop-color')}}</dt> + <dd>Indicates what color to use at that gradient stop.<br> + <small><em>Value</em>: <code>currentColor</code>|<a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a>|<a href="/en/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor"><icccolor></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stop-opacity">{{SVGAttr('stop-opacity')}}</dt> + <dd>Defines the opacity of a given gradient stop.<br> + <small><em>Value</em>: <a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value"><opacity-value></a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke">{{SVGAttr('stroke')}}</dt> + <dd>Defines the color used to paint the outline of the shape.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Paint"><paint></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke-dasharray">{{SVGAttr('stroke-dasharray')}}</dt> + <dd>Defines the pattern of dashes and gaps used to paint the outline of the shape.<br> + <small><em>Value</em>: <code>none</code>|<code><dasharray></code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke-dashoffset">{{SVGAttr('stroke-dashoffset')}}</dt> + <dd>Defines an offset on the rendering of the associated dash array.<br> + <small><em>Value</em>: <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a>|<a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke-linecap"><strong>{{SVGAttr('stroke-linecap')}}</strong></dt> + <dd>Defines the shape to be used at the end of open subpaths when they are stroked.<br> + <small><em>Value</em>: <code><strong>butt</strong></code>|<code>round</code>|<code>square</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke-linejoin"><strong>{{SVGAttr('stroke-linejoin')}}</strong></dt> + <dd>Defines the shape to be used at the corners of paths when they are stroked.<br> + <small><em>Value</em>: <code>arcs</code>|<code>bevel</code>|<code><strong>miter</strong></code>|<code>miter-clip</code>|<code>round</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke-miterlimit"><strong>{{SVGAttr('stroke-miterlimit')}}</strong></dt> + <dd>Defines a limit on the ratio of the miter length to the {{ SVGAttr("stroke-width") }} used to draw a miter join.<br> + <small><em>Value</em>: <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke-opacity"><strong>{{SVGAttr('stroke-opacity')}}</strong></dt> + <dd>Defines the opacity of the stroke of a shape.<br> + <small><em>Value</em>: <a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value"><opacity-value></a>|<a href="/docs/Web/SVG/Content_type#Paint"><percentage></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-stroke-width"><strong>{{SVGAttr('stroke-width')}}</strong></dt> + <dd>Defines the width of the stroke to be applied to the shape.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Length"><length></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-text-anchor"><strong>{{SVGAttr('text-anchor')}}</strong></dt> + <dd>Defines the vertical alignment a string of text.<br> + <small><em>Value</em>: <code>start</code>|<code>middle</code>|<code>end</code>|<code><strong>inherit</strong></code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-text-decoration"><strong>{{SVGAttr('text-decoration')}}</strong></dt> + <dd>Sets the appearance of decorative lines on text.<br> + <small><em>Value</em>: <code>none</code>|<code>underline</code>|<code>overline</code>|<code>line-through</code>|<code>blink</code>|<code><strong>inherit</strong></code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-text-rendering"><strong>{{SVGAttr('text-rendering')}}</strong></dt> + <dd>Hints about what tradeoffs to make as the browser renders text.<br> + <small><em>Value</em>: <code><strong>auto</strong></code>|<code>optimizeSpeed</code>|<code>optimizeLegibility</code>|<code>geometricPrecision</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-transform"><strong>{{SVGAttr('transform')}}</strong></dt> + <dd>Defines a list of transform definitions that are applied to an element and the element's children.<br> + <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Transform-list"><transform-list></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-unicode-bidi"><strong>{{SVGAttr('unicode-bidi')}}</strong></dt> + <dd>-<br> + <small><em>Value</em>:; <em>Animatable</em>: <strong>-</strong></small></dd> + <dt id="attr-vector-effect"><strong>{{SVGAttr('vector-effect')}}</strong></dt> + <dd>Specifies the vector effect to use when drawing an object.<br> + <small><em>Value</em>: <code>default</code>|<code>non-scaling-stroke</code>|<code>inherit</code>|<code><uri></code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-visibility"><strong>{{SVGAttr('visibility')}}</strong></dt> + <dd>Lets you control the visibility of graphical elements.<br> + <small><em>Value</em>: <strong><code>visible</code></strong>|<code>hidden</code>|<code>collapse</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-word-spacing"><strong>{{SVGAttr('word-spacing')}}</strong></dt> + <dd>Specifies spacing behavior between words.<br> + <small><em>Value</em>: <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>|<code><strong title="this is the default value">inherit</strong></code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-writing-mode"><strong>{{SVGAttr('writing-mode')}}</strong></dt> + <dd>Specifies whether the initial inline-progression-direction for a {{SVGElement('text')}} element shall be left-to-right, right-to-left, or top-to-bottom.<br> + <small><em>Value</em>: <strong><code>lr-tb</code></strong>|<code>rl-tb</code>|<code>tb-rl</code>|<code>lr</code>|<code>rl</code>|<code>tb</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.presentation")}}</p> diff --git a/files/zh-cn/web/svg/attribute/preservealpha/index.html b/files/zh-cn/web/svg/attribute/preservealpha/index.html new file mode 100644 index 0000000000..4502b99bbf --- /dev/null +++ b/files/zh-cn/web/svg/attribute/preservealpha/index.html @@ -0,0 +1,45 @@ +--- +title: preserveAlpha +slug: Web/SVG/Attribute/preserveAlpha +translation_of: Web/SVG/Attribute/preserveAlpha +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考</a></p> + +<p><code>preserveAlpha</code> 属性表示{{ SVGElement("feConvolveMatrix") }} 元素怎样处透明度。</p> + +<p>取值为 <code><span class="attr-value">false</span></code> 表示 feConvolveMatrix 元素将应用在包括透明度通道的所有的通道。这是默认的选项。</p> + +<p>取值为 <code><span class="attr-value">true</span></code> 表示 feConvolveMatrix 仅应用在颜色通道。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>None</td> + </tr> + <tr> + <th scope="row">值</th> + <td><code>true</code> | <code>false</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementPreserveAlphaAttribute" rel="external">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用 <code>preserveAlpha</code> 属性</p> + +<ul> + <li>{{ SVGElement("feConvolveMatrix") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/preserveaspectratio/index.html b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.html new file mode 100644 index 0000000000..545445a5dd --- /dev/null +++ b/files/zh-cn/web/svg/attribute/preserveaspectratio/index.html @@ -0,0 +1,114 @@ +--- +title: preserveAspectRatio +slug: Web/SVG/Attribute/preserveAspectRatio +tags: + - SVG + - SVG属性 + - 需要实例 +translation_of: Web/SVG/Attribute/preserveAspectRatio +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>有时候, 通常我们使用 {{ SVGAttr("viewBox") }} 属性时, 希望图形拉伸占据整个视口。 在其他情况下，为了保持图形的长宽比，必须使用统一的缩放比例.<br> + <br> + <code>preserveAspectRatio</code>属性表示是否强制进行统一缩放.<br> + <br> + 对于支持该属性的所有元素(如上所示)，除了 {{ SVGElement("image") }} 元素之外，preserveAspectRatio只适用于在同一元素上为 {{ SVGAttr("viewBox") }} 提供的值。对于这些元素，如果没有提供属性 {{ SVGAttr("viewBox") }} ，则忽略了preserveAspectRatio。<br> + <br> + 对于 {{ SVGElement("image") }} 元素, preserveAspectRatio 指示引用的图像应该如何与参考矩形进行匹配，以及是否应该相对于当前用户坐标系保留参考图像的长宽比</p> + +<h2 id="上下文用法">上下文用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><align> [<meetOrSlice>]</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute" title="http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><align></dt> + <dd><code><align></code> 属性值表示是否强制统一缩放，当SVG的viewbox属性与视图属性宽高比不一致时使用. <code><align></code> 属性的值一定是下列的值之一: + <ul> + <li><strong>none</strong><br> + 不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。<br> + (注意：如果 <code><align></code> 的值是 <code>none</code> ，则 <code><meetOrSlice></code> 属性的值将会被忽略。)</li> + <li><strong>xMinYMin</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。<br> + 将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。</li> + <li><strong>xMidYMin</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。<br> + 将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。</li> + <li><strong>xMaxYMin</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。<br> + 将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。</li> + <li><strong>xMinYMid</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。<br> + 将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。</li> + <li><strong>xMidYMid</strong> (默认值) - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。<br> + 将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。</li> + <li><strong>xMaxYMid</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。<br> + 将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。</li> + <li><strong>xMinYMax</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。<br> + 将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。</li> + <li><strong>xMidYMax</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。<br> + 将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。</li> + <li><strong>xMaxYMax</strong> - 强制统一缩放。<br> + 将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。<br> + 将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。</li> + </ul> + </dd> + <dt><meetOrSlice></dt> + <dd><code><meetOrSlice></code> 是可选的，如果提供的话， 与 <code><align></code> 间隔一个或多个的空格 ，参数所选值必须是以下值之一: + <ul> + <li><strong>meet</strong> (默认值) - 图形将缩放到: + <ul> + <li>宽高比将会被保留</li> + <li>整个SVG的viewbox在视图范围内是可见的</li> + <li>尽可能的放大SVG的viewbox，同时仍然满足其他的条件。</li> + </ul> + 在这种情况下，如果图形的宽高比和视图窗口不匹配，则某些视图将会超出viewbox范围（即SVG的viewbox视图将会比可视窗口小）。</li> + <li><strong>slice</strong> - 图形将缩放到: + <ul> + <li>宽高比将会被保留</li> + <li>整个视图窗口将覆盖viewbox</li> + <li>SVG的viewbox属性将会被尽可能的缩小，但是仍然符合其他标准。</li> + </ul> + 在这种情况下，如果SVG的viewbox宽高比与可视区域不匹配，则viewbox的某些区域将会延伸到视图窗口外部（即SVG的viewbox将会比可视窗口大）。</li> + </ul> + </dd> +</dl> + +<h2 id="实例">实例</h2> + +<h2 id="元素">元素</h2> + +<p>以下元素可使用 <code>preserveAspectRatio</code> 属性</p> + +<ul> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("view") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/primitiveunits/index.html b/files/zh-cn/web/svg/attribute/primitiveunits/index.html new file mode 100644 index 0000000000..ccdaf4605b --- /dev/null +++ b/files/zh-cn/web/svg/attribute/primitiveunits/index.html @@ -0,0 +1,50 @@ +--- +title: primitiveUnits +slug: Web/SVG/Attribute/primitiveUnits +translation_of: Web/SVG/Attribute/primitiveUnits +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><code>primitiveUnits属性为过滤器原语和定义过滤器原语子域中的各种各样的长度单位指定坐标系统</code>.</p> + +<p>如果primitiveUnits属性未指定,那么效果就如同指定值为userSpaceOnUse的效果是一样的.</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><strong><code>userSpaceOnUse</code></strong> | <code>objectBoundingBox</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElementPrimitiveUnitsAttribute" title="http://www.w3.org/TR/SVG11/filters.html#FilterElementPrimitiveUnitsAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>userSpaceOnUse</dt> + <dd>当{{ SVGElement("filter") }}元素使用该值的时候,过滤器中定义的任意长度的值都基于当前用户坐标系统(例如通过{{ SVGAttr("filter") }}属性引用该{{ SVGElement("filter") }}元素的元素所在的用户坐标系统).</dd> + <dt>objectBoundingBox</dt> + <dd>在filter中定义的任意长度值表示引用该filter的元素的包围盒的分数或百分比.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h2 id="Elements">Elements</h2> + +<p>下列元素可以使用primitiveUnits属性:</p> + +<ul> + <li>{{ SVGElement("filter") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/r/index.html b/files/zh-cn/web/svg/attribute/r/index.html new file mode 100644 index 0000000000..3572ba0a07 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/r/index.html @@ -0,0 +1,124 @@ +--- +title: r +slug: Web/SVG/Attribute/r +tags: + - SVG + - SVG属性 +translation_of: Web/SVG/Attribute/r +--- +<div>{{SVGRef}}</div> + +<p><strong><code>r</code></strong> 属性用来定义圆的半径。</p> + +<p>有两个元素在使用该属性：{{SVGElement("circle")}} 和 {{SVGElement("radialGradient")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> + <radialGradient r="0" id="myGradient000"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + <radialGradient r="50%" id="myGradient050"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + <radialGradient r="100%" id="myGradient100"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + + <circle cx="50" cy="50" r="0"/> + <circle cx="150" cy="50" r="25"/> + <circle cx="250" cy="50" r="50"/> + + <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" /> + <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" /> + <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" /> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="圆">圆</h2> + +<p>对于 {{SVGElement('circle')}}，<code>r</code> 用来定义圆的半径以及它的大小。取值小于或等于零，圆将不会被绘制出来。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注：</strong>起始于 SVG2，<code>r</code> 是一个几何属性，意味着该属性也可以用作圆的 CSS 属性。</p> + +<h2 id="径向渐变">径向渐变</h2> + +<p>对于 {{ SVGElement("radialGradient") }}，<code>r</code> 用来定义径向渐变终止圆的半径。</p> + +<p>渐变将以此绘制出来：<strong>100%</strong> 渐变停止点会被映射到终止圆的一周上。取值小于或等于零，将会使用最后一个渐变 {{ SVGElement("stop") }} 的颜色和不透明度，导致该区域被绘制为单色。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>50%</code></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="技术规范">技术规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">技术规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#R", "r")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition as a geometry property</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for SVG2 paint servers <code><radialGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><radialGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#CircleElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><circle></code></td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/radius/index.html b/files/zh-cn/web/svg/attribute/radius/index.html new file mode 100644 index 0000000000..59f6dcfc07 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/radius/index.html @@ -0,0 +1,49 @@ +--- +title: radius +slug: Web/SVG/Attribute/radius +tags: + - SVG + - SVG属性 + - 滤镜 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/radius +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>radius</code>属性代表了一个给定{{SVGElement("feMorphology")}}滤镜上的操作。如果提供了两个<a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Paint"><number></a>，则第一个数代表了x-radius，第二个数代表了y-radius。如果只提供了一个数字，则值同时用于x和y。值是在{{SVGElement("filter")}} 元素的属性{{SVGAttr("primitiveUnits")}} 确定的坐标系统内。</p> + +<p>如果没有指定该属性值，效果等同于指定了一个<strong>0</strong>值。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td><em>无</em></td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Number-optional-number" title="en/SVG/Content_type#Paint"><number-optional-number></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyRadiusAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feMorphologyRadiusAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>radius</code>属性：</p> + +<ul> + <li>{{ SVGElement("feMorphology") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/repeatcount/index.html b/files/zh-cn/web/svg/attribute/repeatcount/index.html new file mode 100644 index 0000000000..ac96b610cc --- /dev/null +++ b/files/zh-cn/web/svg/attribute/repeatcount/index.html @@ -0,0 +1,45 @@ +--- +title: repeatCount +slug: Web/SVG/Attribute/repeatCount +translation_of: Web/SVG/Attribute/repeatCount +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考</a></p> + +<p>这个属性表示动画将发生的次数。</p> + +<p>这个属性的值指定了重复的次数。它也可以包括用分数值表示。它的值必须大于0。</p> + +<h2 id="用法解释">用法解释</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>动画时间属性</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a> | "indefinite"</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#RepeatCountAttribute" title="http://www.w3.org/TR/SVG/animate.html#RepeatCountAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","Number") }}</p> + +<h2 id="Example">Example</h2> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>repeatCount</code> attribute</p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/result/index.html b/files/zh-cn/web/svg/attribute/result/index.html new file mode 100644 index 0000000000..1de841a80a --- /dev/null +++ b/files/zh-cn/web/svg/attribute/result/index.html @@ -0,0 +1,45 @@ +--- +title: result +slug: Web/SVG/Attribute/result +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/result +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>属性<code>result</code>定义了滤镜的分配名。如果提供了它，则经过滤镜处理的结果即图形可以再次滤镜处理，在后继滤镜（即另一个{{ SVGElement("filter") }}元素）上通过一个{{ SVGAttr("in") }}属性引用之前的结果。如果没有提供<code>result</code>值，而且如果下一个滤镜也没有提供{{ SVGAttr("in") }}属性值，则输出只可作为下一个滤镜的隐式输入。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><filter-primitive-reference></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveResultAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveResultAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>注意<code><filter-primitive-reference></code>不是一个XML ID，换句话说，<code><filter-primitive-reference></code>只在给定的{{ SVGElement("filter") }}元素内部有意义，因此只有局部范围。在同一个{{ SVGElement("filter") }}元素内部，同一个<code><filter-primitive-reference></code>出现多次也是合法的。如果引用了，<code><filter-primitive-reference></code>将使用在给定结果前面、离给定结果最近的滤镜。</p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>result</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">滤镜元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/rx/index.html b/files/zh-cn/web/svg/attribute/rx/index.html new file mode 100644 index 0000000000..4ae7b0203a --- /dev/null +++ b/files/zh-cn/web/svg/attribute/rx/index.html @@ -0,0 +1,118 @@ +--- +title: rx +slug: Web/SVG/Attribute/rx +tags: + - SVG + - SVG属性 +translation_of: Web/SVG/Attribute/rx +--- +<div>{{SVGRef}}</div> + +<p><strong><code>rx</code></strong> 属性用于定义水平轴向的圆角半径尺寸。</p> + +<p>{{SVGElement("ellipse")}} 和 {{SVGElement("rect")}} 两个基本图形使用了这个属性。</p> + +<div id="topExample"> +<div class="hidden"> </div> +</div> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> + <ellipse cx="50" cy="50" rx="0" ry="25" /> + <ellipse cx="150" cy="50" rx="25" ry="25" /> + <ellipse cx="250" cy="50" rx="50" ry="25" /> + + <rect x="20" y="120" width="60" height="60" rx="0" ry="15"/> + <rect x="120" y="120" width="60" height="60" rx="15" ry="15"/> + <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="椭圆">椭圆</h2> + +<p>对于 {{SVGElement('ellipse')}}，<code>rx</code> 属性定义了水平方向的半径尺寸。如果使用了负值或者零，那么椭圆就不会被绘制。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">取值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong> | <code>auto</code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>auto</code></td> + </tr> + <tr> + <th scope="row">是否支持动画</th> + <td>是</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注释:</strong> 从 SVG2 开始， <code>rx</code> 是一个几何属性，也就是说，这个属性也可以用作椭圆的CSS属性。</p> + +<h2 id="矩形">矩形</h2> + +<p>对于 {{SVGElement('rect')}}，<code>rx</code> 定义了水平方向的圆角尺寸。</p> + +<p><code>rx</code> 属性的实际效果取决于矩形的 {{SVGAttr("ry")}} 属性和宽度：</p> + +<ul> + <li>如果你为 <code>rx</code> 属性指定了正确的值，但是没有定义 {{SVGAttr("ry")}} 属性的值，那么浏览器会让 {{SVGAttr("ry")}} 取 <code>rx</code> 属性被指定的相等的值。（反之亦然）</li> + <li>如果 <code>rx</code> 和 {{SVGAttr("ry")}} 都没有被正确的赋值，那么浏览器会绘制一个带有直角尖角的矩形。</li> + <li><code>rx</code> 属性的有效值为矩形宽度的一半（即，如果为 <code>rx</code> 指定的值大于矩形宽度的一半，那么浏览器会视为 <code>rx</code> 的值为矩形宽度的一半）。</li> +</ul> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">取值</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong> | <code>auto</code></td> + </tr> + <tr> + <th scope="row">缺省值</th> + <td><code>auto</code></td> + </tr> + <tr> + <th scope="row">是否支持动画</th> + <td>是</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注释:</strong> 从 SVG2 开始，<code>rx</code> 是一个几何属性，也就是说，这个属性也可以用作矩形（rect）的 CSS 属性。</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#RX", "rx")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>被定义为几何属性</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementRXAttribute", "rx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><ellipse></code> 的初始定义</td> + </tr> + <tr> + <td> {{SpecName("SVG1.1", "shapes.html#RectElementRXAttribute", "rx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><rect></code> 的初始定义</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/scale/index.html b/files/zh-cn/web/svg/attribute/scale/index.html new file mode 100644 index 0000000000..325197861e --- /dev/null +++ b/files/zh-cn/web/svg/attribute/scale/index.html @@ -0,0 +1,51 @@ +--- +title: scale +slug: Web/SVG/Attribute/scale +tags: + - SVG + - SVG属性 + - 滤镜 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/scale +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>属性<code>scale</code>定义了用在{{SVGElement("feDisplacementMap")}}滤镜上的置换缩放因子。它的总值表达在{{SVGElement("filter")}}元素的属性{{SVGAttr("primitiveUnits")}}确定的坐标系统中。</p> + +<p>如果这个属性的值是<strong><span class="attr-value">0</span></strong><span class="attr-value">，</span>则它的操作对源图像没有影响。</p> + +<p>如果没有指定这个属性，则效果等同于它被指定了<strong>0</strong>值。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td><em>无</em></td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Paint"><number></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapScaleAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapScaleAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>scale</code>属性：</p> + +<ul> + <li>{{ SVGElement("feDisplacementMap") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/seed/index.html b/files/zh-cn/web/svg/attribute/seed/index.html new file mode 100644 index 0000000000..58b370829e --- /dev/null +++ b/files/zh-cn/web/svg/attribute/seed/index.html @@ -0,0 +1,49 @@ +--- +title: seed +slug: Web/SVG/Attribute/seed +tags: + - SVG + - SVG属性 + - 滤镜 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/seed +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>seed</code>属性代表了{{SVGElement("feTurbulence")}}元素生成的伪随机数的开始数字。</p> + +<p>如果没有指定这个属性，它等效于指定了一个<code>0</code>值。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en-US/docs/SVG/Content_type#Number" title="/en-US/docs/SVG/Content_type#Number"><number></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceSeedAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceSeedAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>seed</code>属性：</p> + +<ul> + <li>{{ SVGElement("feTurbulence") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/shape-rendering/index.html b/files/zh-cn/web/svg/attribute/shape-rendering/index.html new file mode 100644 index 0000000000..c99a0e3104 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/shape-rendering/index.html @@ -0,0 +1,83 @@ +--- +title: shape-rendering +slug: Web/SVG/Attribute/shape-rendering +tags: + - SVG + - SVG线条渲染 + - 需要完善 +translation_of: Web/SVG/Attribute/shape-rendering +--- +<p>« <a href="/zh-CN/docs/Web/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考主页</a></p> + +<p>指定SVG元素{{SVGElement("path")}}的渲染模式。</p> + +<h2 id="使用参考">使用参考</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类型</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong title="this is the default value">auto</strong> | optimizeSpeed | crispEdges | geometricPrecision | inherit</td> + </tr> + <tr> + <th scope="row">可运动</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">标准文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty" title="http://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>auto</dt> + <dd>让浏览器自动权衡渲染速度、平滑度、精确度。默认是倾向于精确度而非平滑度和速度。</dd> + <dt>optimizeSpeed</dt> + <dd>偏向渲染速度，浏览器会关闭反锯齿模式。（速度）</dd> + <dt>crispEdges</dt> + <dd>偏向更加清晰锐利的边缘的渲染。浏览器在渲染的时候会关闭反锯齿模式，且会让线条的位置和宽度和显示器边缘对齐。（锐度）</dd> + <dt>geometricPrecision</dt> + <dd>偏向渲染平滑的曲线。（平滑）</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" + version="1.1" width="100" height="100" + shape-rendering="optimizeSpeed"><!-- 这个示例在Firefox下看区别更明显 --></pre> + +<table class="standard-table"> + <tbody> + <tr> + <td> + <p>shape-rendering: geometricPrecision:</p> + + <p><img alt="shape-rendering:geometricPrecision" src="http://download.g63.ru/svg/shape-rendering-geometricPrecision.svg" style="height: 210px; width: 200px;"></p> + </td> + <td> + <p>shape-rendering: optimizeSpeed</p> + + <p><img alt="shape-rendering:optimizeSpeed" src="http://download.g63.ru/svg/shape-rendering-optimizeSpeed.svg" style="height: 210px; width: 200px;"></p> + </td> + </tr> + </tbody> +</table> + +<p>同样，你也可以在css样式中使用shape-rendering:</p> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" + version="1.1" width="100" height="100" + style="shape-rendering:optimizeSpeed;"></pre> + +<h2 id="关联元素">关联元素</h2> + +<p>下面的元素可以使用这个属性</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/stddeviation/index.html b/files/zh-cn/web/svg/attribute/stddeviation/index.html new file mode 100644 index 0000000000..4ab8e22164 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stddeviation/index.html @@ -0,0 +1,51 @@ +--- +title: stdDeviation +slug: Web/SVG/Attribute/stdDeviation +tags: + - Filters + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/stdDeviation +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考主页</a></p> + +<p><code>stdDeviation</code> 属性定义了模糊操作的标准差。如果列出两个 <a href="/en-US/docs/SVG/Content_type#Number" title="https://developer.mozilla.org/en-US/docs/SVG/Content_type#Number"><number></a>，第一个数字表示沿着 x 轴的标准差值，第二个值表示沿着 y 轴的标准差值。如果只出现一个数字，那个值就表示在 x 轴和 y 轴上有着相同的标准差。</p> + +<p>负值是不允许的。设为零即禁用了已有滤镜的原本效果（比如，结果是滤镜输入图像）。如果 <code>stdDeviation</code> 在 x 轴和 y 轴上只有一个为 0，那么模糊效果就只会应用于非 0 的那个方向。</p> + +<p>如果此属性没被定义，就与标准差值被定义为 0 的效果一样。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>None</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en-US/docs/SVG/Content_type#Number-optional-number" title="https://developer.mozilla.org/en-US/docs/SVG/Content_type#Number-optional-number"><number-optional-number></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurStdDeviationAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurStdDeviationAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en-US/docs/SVG/Content_type","Number-optional-number") }}</p> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>以下的元素可以使用 <code>stdDeviation</code> 属性</p> + +<ul> + <li>{{ SVGElement("feGaussianBlur") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/string/index.html b/files/zh-cn/web/svg/attribute/string/index.html new file mode 100644 index 0000000000..8b76be0859 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/string/index.html @@ -0,0 +1,63 @@ +--- +title: string +slug: Web/SVG/Attribute/string +translation_of: Web/SVG/Attribute/string +--- +<div>{{SVGRef}}{{deprecated_header("SVG 2")}}</div> + +<p><span class="seoSummary">The <strong><code>string</code></strong> attribute is a hint to the user agent, and specifies a list of formats that the font referenced by the parent {{SVGElement("font-face-uri")}} element supports.</span></p> + +<p>Only one element is using this attribute: {{SVGElement("font-face-format")}}</p> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#Anything"><anything></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><anything></code></dt> + <dd> + <p>This value specifies a list of formats that are supported by the font referenced by the parent {{SVGElement("font-face-uri")}} element.</p> + + <p>The available types are: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, and <code>"svg"</code>. See the {{cssxref("@font-face/src", "src")}} descriptor of the {{cssxref("@font-face")}} at-rule for more information.</p> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG1.1", "fonts.html#FontFaceFormatElementStringAttribute", "string")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.font-face-format.string")}}</p> diff --git a/files/zh-cn/web/svg/attribute/stroke-dasharray/index.html b/files/zh-cn/web/svg/attribute/stroke-dasharray/index.html new file mode 100644 index 0000000000..9ecc44d9dc --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke-dasharray/index.html @@ -0,0 +1,79 @@ +--- +title: stroke-dasharray +slug: Web/SVG/Attribute/stroke-dasharray +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/stroke-dasharray +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code><font face="Open Sans, Arial, sans-serif">属性</font>stroke-dasharray可</code>控制用来描边的点划线的图案范式。</p> + +<p>作为一个外观属性，它也可以直接用作一个CSS样式表内部的属性。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong title="this is the default value">none</strong> | <dasharray> | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><dasharray></dt> + <dd>它是一个<span><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><length></a>和</span><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，<strong>5,3,2</strong>等同于<strong>5,3,2,5,3,2</strong>。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><?xml version="1.0"?> +<svg width="200" height="200" viewPort="0 0 200 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> + + <line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" /> + <line stroke-dasharray="5, 10" x1="10" y1="30" x2="190" y2="30" /> + <line stroke-dasharray="10, 5" x1="10" y1="50" x2="190" y2="50" /> + <line stroke-dasharray="5, 1" x1="10" y1="70" x2="190" y2="70" /> + <line stroke-dasharray="1, 5" x1="10" y1="90" x2="190" y2="90" /> + <line stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110" /> + <line stroke-dasharray="15, 10, 5" x1="10" y1="130" x2="190" y2="130" /> + <line stroke-dasharray="15, 10, 5, 10" x1="10" y1="150" x2="190" y2="150" /> + <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" /> + <line stroke-dasharray="5, 5, 1, 5" x1="10" y1="190" x2="190" y2="190" /> + +<style><![CDATA[ +line{ + stroke: black; + stroke-width: 2; +} +]]></style> +</svg></pre> + +<p><strong>示例输出</strong></p> + +<p>{{ EmbedLiveSample('Example','220','220') }}</p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>stroke-dasharray属性：</code></p> + +<ul> + <li><a href="/en/SVG/Element#Shape_elements" title="en/SVG/Element#Shape_elements">形状元素</a> »</li> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">文本内容元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.html b/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.html new file mode 100644 index 0000000000..d836769c53 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke-dashoffset/index.html @@ -0,0 +1,55 @@ +--- +title: stroke-dashoffset +slug: Web/SVG/Attribute/stroke-dashoffset +tags: + - SVG + - SVG属性 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Attribute/stroke-dashoffset +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG</a>属性参考主页</p> + +<p><code>stroke-dashoffset</code> 属性指定了dash模式到路径开始的距离</p> + +<p>如果使用了一个 <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><百分比></a> 值， 那么这个值就代表了当前viewport的一个百分比。<br> + <br> + 值可以取为负值。</p> + +<h2 id="使用环境">使用环境</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>显示属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> | <a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a> | inherit</td> + </tr> + <tr> + <th scope="row">初始值</th> + <td>1</td> + </tr> + <tr> + <th scope="row">可动画</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty" title="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>以下元素可使用stroke-dashoffset属性</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">形状元素</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">文本内容元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/stroke-linecap/index.html b/files/zh-cn/web/svg/attribute/stroke-linecap/index.html new file mode 100644 index 0000000000..8233fd5eda --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke-linecap/index.html @@ -0,0 +1,72 @@ +--- +title: stroke-linecap +slug: Web/SVG/Attribute/stroke-linecap +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/stroke-linecap +--- +<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG 属性 参照主页</a></p> + +<p><code>stroke-linecap</code> 属性制定了，在开放子路径被设置描边的情况下，用于开放自路径两端的形状。</p> + +<p>作为一个展现属性，它也可以在一个CSS样式表内部，作为一个属性直接使用。</p> + +<h2 id="使用背景">使用背景</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">分类</th> + <td>展现属性</td> + </tr> + <tr> + <th scope="row">属性值</th> + <td>butt | round | square | inherit</td> + </tr> + <tr> + <th scope="row">可动画化</th> + <td>是</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><?xml version="1.0"?> +<svg width="120" height="120" + viewPort="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <line stroke-linecap="butt" + x1="30" y1="30" x2="30" y2="90" + stroke="black" stroke-width="20"/> + + <line stroke-linecap="round" + x1="60" y1="30" x2="60" y2="90" + stroke="black" stroke-width="20"/> + + <line stroke-linecap="square" + x1="90" y1="30" x2="90" y2="90" + stroke="black" stroke-width="20"/> + + <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90" + stroke="white" /> +</svg></pre> + +<p><strong>实时样例</strong></p> + +<p>{{ EmbedLiveSample('Example','120','120') }}</p> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用<code>stroke-linecap</code> 属性</p> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Element#Shape" title="en-US/docs/Web/SVG/Element#Shape">图形元素</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Element#TextContent" title="en-US/docs/Web/SVG/Element#TextContent">文本内容元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/stroke-linejoin/index.html b/files/zh-cn/web/svg/attribute/stroke-linejoin/index.html new file mode 100644 index 0000000000..209f1027a1 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke-linejoin/index.html @@ -0,0 +1,303 @@ +--- +title: stroke-linejoin +slug: Web/SVG/Attribute/stroke-linejoin +translation_of: Web/SVG/Attribute/stroke-linejoin +--- +<div>{{SVGRef}}</div> + +<p><strong><code>stroke-linejoin</code></strong> 属性指明路径的转角处使用的形状或者绘制的基础形状。</p> + +<div class="blockIndicator note"><strong>备注:</strong> 作为显示属性， <code>stroke-linejoin</code> 能被用做CSS属性。</div> + +<p>作为显示属性，该属性能被应用到任何元素，但只对这 9 种元素有效： {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, {{SVGElement('tspan')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> + <!-- + Upper left path: + Effect of the "miter" value + --> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="miter" /> + + <!-- + Center path: + Effect of the "round" value + --> + <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="round" /> + + <!-- + Upper right path: + Effect of the "bevel" value + --> + <path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="bevel" /> + + <!-- + Bottom left path: + Effect of the "miter-clip" value + with fallback to "miter" if not supported. + --> + <path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="miter-clip" /> + + <!-- + Bottom right path: + Effect of the "arcs" value + with fallback to "miter" if not supported. + --> + <path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="arcs" /> + + + <!-- + the following pink lines highlight the + position of the path for each stroke + --> + <g id="highlight"> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5.5" r="0.05" fill="pink" /> + </g> + <use xlink:href="#highlight" x="6" /> + <use xlink:href="#highlight" x="12" /> + <use xlink:href="#highlight" x="2" y="6" /> + <use xlink:href="#highlight" x="8" y="6" /> +</svg> +</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 400)}}</p> +</div> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">值</th> + <td><code>arcs</code> | <code>bevel</code> |<code>miter</code> | <code>miter-clip</code> | <code>round</code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>miter</code></td> + </tr> + <tr> + <th scope="row">可动画性</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="arcs">arcs</h3> + +<div class="blockIndicator note"><strong>说明:</strong> <code>arcs</code> 来自于 SVG2 但尚未被广泛支持，详情参见 <a href="#Browser_compatibility">浏览器兼容性</a></div> + +<p><code>arcs</code> 值指示将使用圆弧拐角来连接路径线段。 通过用与连接点的外边缘具有相同曲率的圆弧在连接点处延伸笔触的外边缘来形成弧形。</p> + +<h4 id="示例">示例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> + <!-- Effect of the "arcs" value --> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none" + stroke-linejoin="arcs" /> + + <!-- + the following pink lines highlight the + position of the path for each stroke + --> + <g id="p"> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> + </g> +</svg></pre> + +<p>{{EmbedLiveSample('arcs', '100%', 200)}}</p> + +<h3 id="bevel">bevel</h3> + +<p>The <code>bevel</code> 用斜角连接路径段。</p> + +<h4 id="示例_2">示例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> + <!-- Effect of the "bevel" value --> + <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" + stroke-linejoin="bevel" /> + + <!-- + the following pink lines highlight the + position of the path for each stroke + --> + <g id="p"> + <path d="M1,5 l2,-3 l2,3" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> + </g> +</svg></pre> + +<p>{{EmbedLiveSample('bevel', '100%', 200)}}</p> + +<h3 id="miter">miter</h3> + +<p>The <code>miter</code> 用尖角连接路径段。 通过在路径段的切线处延伸笔触的外边缘直到它们相交，来形成拐角。</p> + +<div class="blockIndicator note"><strong>说明:</strong> 如果超出了{{SVGAttr('stroke-miterlimit')}}，则会退回到<code> bevel 。</code></div><code> + +<h4 id="示例_3">示例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"> + <!-- Effect of the "miter" value --> + <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" + stroke-linejoin="miter" /> + + <!-- Effect of the "miter" value on a sharp angle + where de default miter limit is exceeded --> + <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none" + stroke-linejoin="miter" /> + + <!-- the following red dotted line show where + the miter value falls back to the bevel value --> + <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> + + <!-- the following pink lines highlight the position of the path for each stroke --> + <g> + <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> + + <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="7" cy="5" r="0.05" fill="pink" /> + <circle cx="7.75" cy="2" r="0.05" fill="pink" /> + <circle cx="8.5" cy="5" r="0.05" fill="pink" /> + </g> +</svg></pre> + +<p>{{EmbedLiveSample('miter', '100%', 200)}}</p> + +<h3 id="miter-clip">miter-clip</h3> + +<div class="blockIndicator note"><strong>说明:</strong> <code>miter-clip</code> 来自于 SVG2 但尚未被广泛支持，详情参见 <a href="#Browser_compatibility">浏览器兼容性</a></div> + +<p>The <code>miter-clip</code> 用尖角连接路径段。 通过在路径段的切线处延伸笔触的外边缘直到它们相交，来形成拐角。</p> + +<p>如果超过了{{SVGAttr('stroke-miterlimit')}}，则斜切将被裁剪为等于{{SVGAttr('stroke-miterlimit')}}值乘以路径段相交处的笔划宽度的一半的距离。在非常尖锐的连接或动画的情况下，这提供了比<code> mitt 更好的渲染效果。</code></p><code> + +<h4 id="示例_4">示例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"> + <!-- Effect of the "miter-clip" value --> + <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" + stroke-linejoin="miter-clip" /> + + <!-- Effect of the "miter-clip" value on a sharp angle + where de default miter limit is exceeded --> + <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none" + stroke-linejoin="miter-clip" /> + + <!-- the following red dotted line show where the clip should happen --> + <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> + + <!-- the following pink lines highlight the position of the path for each stroke --> + <g> + <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> + + <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="7" cy="5" r="0.05" fill="pink" /> + <circle cx="7.75" cy="2" r="0.05" fill="pink" /> + <circle cx="8.5" cy="5" r="0.05" fill="pink" /> + </g> +</svg></pre> + +<p>{{EmbedLiveSample('miter-clip', '100%', 200)}}</p> + +<h3 id="round">round</h3> + +<p><code>round</code> 使用圆角连接路径片段。</p> + +<h4 id="示例_5">示例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> + <!-- Effect of the "round" value --> + <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" + stroke-linejoin="round" /> + + <!-- + the following pink lines highlight the + position of the path for each stroke + --> + <g id="p"> + <path d="M1,5 l2,-3 l2,3" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> + </g> +</svg></pre> + +<p>{{EmbedLiveSample('round', '100%', 200)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for shapes and texts</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for shapes and texts</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.attributes.presentation.stroke-linejoin")}}</p></code></code> diff --git a/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.html b/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.html new file mode 100644 index 0000000000..b2231809f5 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke-miterlimit/index.html @@ -0,0 +1,62 @@ +--- +title: stroke-miterlimit +slug: Web/SVG/Attribute/stroke-miterlimit +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/stroke-miterlimit +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>如果两条线交汇在一起形成一个尖角，而且属性{{ SVGAttr("stroke-linejoin") }}指定了<code>miter</code>，斜接有可能扩展到远远超过出路径轮廓线的线宽。属性<code>stroke-miterlimit对斜接长度和</code>{{ SVGAttr("stroke-width") }}的比率<code>强加了一个极限。当极限到达时，交汇处由斜接变成倒角。</code></p> + +<p>斜接长度（斜接的外尖角和内夹角之间的距离）与{{ SVGAttr("stroke-width") }}的比率，直接跟两条线之间的角度（θ）有关，用如下方程表示：</p> + +<pre>miterLength / stroke-width = 1 / sin ( theta / 2 ) +</pre> + +<p>举个例子，一个极限为1.414斜接，θ小于90度的把斜接会转换成倒角，一个极限为4.0的斜接，θ小于29度的斜接会转换成倒角，一个极限为10.0的斜接，θ小于大约11.5度的斜接会转换成倒角。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><miterlimit> | inherit</td> + </tr> + <tr> + <th scope="row">初始值</th> + <td>4</td> + </tr> + <tr> + <th scope="row">可动性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty" title="http://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><miterlimit></dt> + <dd>对斜角长度与{{ SVGAttr("stroke-width") }}的比率的限制。<miterlimit>的值必须是一个大于或等于1的<a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a>。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>stroke-miterlimit</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">形状元素</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">文本内容元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/stroke-opacity/index.html b/files/zh-cn/web/svg/attribute/stroke-opacity/index.html new file mode 100644 index 0000000000..628ca53b52 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke-opacity/index.html @@ -0,0 +1,81 @@ +--- +title: stroke-opacity +slug: Web/SVG/Attribute/stroke-opacity +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/stroke-opacity +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>stroke-opacity</code>属性指定了当前对象的轮廓的不透明度。它的默认值是<strong>1</strong>。</p> + +<p>作为一个外观属性，它可以直接用作CSS样式表内部的属性。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><opacity-value> | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeOpacityProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeOpacityProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><opacity-value></dt> + <dd>在当前对象的轮廓上用该涂色操作的不透明度。任何超出0.0到1.0范围的值都会被压回这个范围（0.0表示完全透明，1.0表示完全不透明）。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><svg width="120px" height="120px" viewBox="0 0 120 120"> + <rect x="10" y="10" width="100" height="100"/> +</svg></pre> + +<h3 id="CSS">CSS</h3> + +<div> +<pre class="brush: css">rect{ + fill:#b4da55; + stroke:#000; + stroke-width:10px; + stroke-opacity:0.3; +}</pre> + +<h3 id="结果">结果</h3> + +<div>{{EmbedLiveSample("Example",150,150)}}</div> +</div> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>stroke-opacity</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">形状元素</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">文本内容元素</a> »</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGAttr("fill-opacity") }}</li> + <li>{{ SVGAttr("opacity") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/stroke-width/index.html b/files/zh-cn/web/svg/attribute/stroke-width/index.html new file mode 100644 index 0000000000..743f2a05a7 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke-width/index.html @@ -0,0 +1,48 @@ +--- +title: stroke-width +slug: Web/SVG/Attribute/stroke-width +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/stroke-width +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>stroke-width</code>属性指定了当前对象的轮廓的宽度。它的默认值是<strong>1</strong>。如果使用了一个<percentage>，这个值代表当前视口的百分比。如果使用了<strong>0</strong>值，则将不绘制轮廓。</p> + +<p>作为一个外观属性，它可以直接用作CSS样式表内部的属性。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><length></a> | <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>stroke-width</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">形状元素</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">文本内容元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/stroke/index.html b/files/zh-cn/web/svg/attribute/stroke/index.html new file mode 100644 index 0000000000..75b7ef25f4 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/stroke/index.html @@ -0,0 +1,66 @@ +--- +title: stroke +slug: Web/SVG/Attribute/stroke +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/stroke +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>stroke</code>属性定义了给定图形元素的外轮廓的颜色。它的默认值是<strong>none</strong>。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint"><paint></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>是</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p></p> + +<h2 id="SVG_Line" name="SVG_Line">SVG 描边的线</h2> + +<h3 id="示例1：用stroke属性画一条绿色的直线.">示例1：用stroke属性画一条绿色的直线.</h3> + +<pre class="brush: html"><svg height="50" width ="300"> + <path stroke = "green" d="M5 20 1215 0" /> +</svg></pre> + +<h3 id="sect1"> </h3> + +<h3 id="示例2：用Stroke属性画一个拥有蓝色边框的黑色的圆形">示例2：用Stroke属性画一个拥有蓝色边框的黑色的圆形</h3> + +<pre class="brush: html"><svg height="200" width="200"> + <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill ="black" /> +</svg></pre> + +<p> </p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>stroke</code>属性：</p> + +<ul> + <li><a href="https://developer.mozilla.org/en/SVG/Element#Shape" title="en/SVG/Element#Shape">形状元素</a> »</li> + <li><a href="https://developer.mozilla.org/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">文本内容元素</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/style/index.html b/files/zh-cn/web/svg/attribute/style/index.html new file mode 100644 index 0000000000..3bae57e589 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/style/index.html @@ -0,0 +1,77 @@ +--- +title: style +slug: Web/SVG/Attribute/style +tags: + - SVG + - SVG Attribute + - Style + - svg style +translation_of: Web/SVG/Attribute/style +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><strong><code>style </code></strong>属性指定了指定其元素的样式信息。它的功能与 HTML 中的<a href="/zh-CN/docs/Web/HTML/Global_attributes/style">style</a>属性相同。</p> + +<h2 id="使用环境">使用环境</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><style></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute" title="http://www.w3.org/TR/SVG/styling.html#StyleAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><style></dt> + <dd>样式数据的语法取决于样式表语言。默认情况下，如果未指定 {{ SVGAttr("contentStyleType") }}，样式表语言为CSS。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>以下示例展示了使用CSS作为样式表语言来使用style属性，为一个矩形框添加样式。</p> + +<pre class="brush: html"><svg version="1.1" viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"> + <rect height="300" width="600" x="200" y="100" + style="fill: red; stroke: blue; stroke-width: 3"/> +</svg> +</pre> + +<h2 id="元素">元素</h2> + +<p>以下元素可以使用style属性</p> + +<ul> + <li><a href="/en/SVG/Element#Container" title="en/SVG/Element#Container">Container elements</a> »</li> + <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> + <li><a href="/en/SVG/Element#Gradient" title="en/SVG/Element#Gradient">Gradient elements</a> »</li> + <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Graphics elements</a> »</li> + <li><a href="/en/SVG/Element#Structural" title="en/SVG/Element#Structural">Structural elements</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li> + <li>{{ SVGElement("clipPath") }}</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("stop") }}</li> + <li>{{ SVGElement("glyph") }}</li> +</ul> + +<h2 id="相关">相关</h2> + +<ul> + <li>{{ SVGElement("style") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/target/index.html b/files/zh-cn/web/svg/attribute/target/index.html new file mode 100644 index 0000000000..942cfaa910 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/target/index.html @@ -0,0 +1,110 @@ +--- +title: target +slug: Web/SVG/Attribute/target +translation_of: Web/SVG/Attribute/target +--- +<div>{{SVGRef}}</div> + +<p><code><strong>target</strong></code>当结束资源有多个可能的目标时，例如，当父文档嵌入在HTML或XHTML文档中或使用选项卡式浏览器查看时，应使用该属性。此属性指定激活链接时要在其中打开文档的浏览上下文的名称（例如，浏览器选项卡或（X）HTML iframe或object元素）：</p> + +<p>只有一个元素正在使用此属性：{{SVGElement("a")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +} + +text { + font: 20px Arial, Helvetica, sans-serif; + fill: blue; + text-decoration: underline; +} +</pre> +</div> + +<pre class="brush: html; highlight[2,5,8]"><svg viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> + <a href="https://developer.mozilla.org" target="_self"> + <text x="0" y="20">在iframe中打开链接</text> + </a> + <a href="https://developer.mozilla.org" target="_blank"> + <text x="0" y="60">在新标签页或窗口中打开链接</text> + </a> + <a href="https://developer.mozilla.org" target="_top"> + <text x="0" y="100">在此标签或窗口中打开链接</text> + </a> +</svg> +</pre> + +<p>{{EmbedLiveSample("topExample", "300", "120")}}</p> +</div> + +<h2 id="使用说明">使用说明</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">值</th> + <td><code>_self</code>| <code>_parent</code>| <code>_top</code>| <code>_blank</code>|<code><XML-Name></code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>_self</code></td> + </tr> + <tr> + <th scope="row">可动画的</th> + <td>是</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code>_replace</code> {{deprecated_inline}}</dt> + <dd> + <p>当前SVG图像被与当前SVG图像在同一帧中相同矩形区域中的链接内容替换。</p> + + <div class="blockIndicator note"> + <p><strong>注意：</strong>这个值是从来没有很好的执行，之间的区别<code><span class="attr-value">_replace</span></code>，并<code><span class="attr-value">_self</span></code>已通过在浏览上下文的HTML定义的变化变得多余。使用<code><span class="attr-value">_self</span></code>以取代目前的SVG文件。</p> + </div> + </dd> + <dt><code>_self</code></dt> + <dd>在与当前SVG图像相同的浏览上下文中，当前SVG图像被链接的内容替换。</dd> + <dt><code>_parent</code></dt> + <dd>SVG图像的直接父浏览上下文将被链接的内容替换（如果存在），并且可以从此文档中安全地访问它。</dd> + <dt><code>_top</code></dt> + <dd>完整活动窗口或选项卡的内容将由链接的内容替换（如果存在），并且可以从此文档中安全地访问</dd> + <dt><code>_blank</code></dt> + <dd>如果此文档可以安全地显示，则需要一个新的未命名窗口或标签来显示链接的内容。如果用户代理不支持多个窗口/选项卡，则结果与_top相同。</dd> + <dt><code><XML-Name></code></dt> + <dd>指定用于显示链接内容的浏览上下文的名称（选项卡，内联框架，对象等）。如果具有该名称的上下文已经存在，并且可以从此文档中安全地访问，则可以重新使用该上下文，替换现有内容。如果不存在，则创建它（与'_blank'相同，但现在有了一个名称）。该名称必须是有效的XML名称[XML11]，并且不能以下划线（U + 005F LOW LINE字符）开头，以满足来自HTML的有效浏览上下文名称的要求。</dd> +</dl> + +<h2 id="技术指标">技术指标</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规格</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "linking.html#AElementTargetAttribute", "target")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>删除<code>_replace</code>值。</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "linking.html#AElementTargetAttribute", "target")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。如果您想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求。</div> + +<p>{{Compat("svg.elements.a.target")}}</p> diff --git a/files/zh-cn/web/svg/attribute/text-decoration/index.html b/files/zh-cn/web/svg/attribute/text-decoration/index.html new file mode 100644 index 0000000000..2fbfb28b0c --- /dev/null +++ b/files/zh-cn/web/svg/attribute/text-decoration/index.html @@ -0,0 +1,45 @@ +--- +title: text-decoration +slug: Web/SVG/Attribute/text-decoration +translation_of: Web/SVG/Attribute/text-decoration +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><code>text-decoration</code> 属性的作用跟{{ cssxref("text-decoration","CSS Text Decoration") }} 特性差不多,当然除了它是一个CSS属性。浏览 {{ cssxref("text-decoration","CSS Text Decoration") }} 获取进一步的信息。</p> + +<h2 id="使用环境">使用环境</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">分类</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td>none | underline | overline | line-through | blink | <strong title="this is the default value">inherit</strong></td> + </tr> + <tr> + <th scope="row">是否可用于动画</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#TextDecorationProperty" title="http://www.w3.org/TR/SVG/text.html#TextDecorationProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="元素">元素</h2> + +<pre class="notranslate">后代元素可以继承 text-decoration 这个属性</pre> + +<ul> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li> +</ul> + +<h2 id="相关">相关</h2> + +<ul> + <li>{{ cssxref("text-decoration", "CSS Text Decoration") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/transform/index.html b/files/zh-cn/web/svg/attribute/transform/index.html new file mode 100644 index 0000000000..0c61ea9952 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/transform/index.html @@ -0,0 +1,262 @@ +--- +title: transform +slug: Web/SVG/Attribute/transform +translation_of: Web/SVG/Attribute/transform +--- +<div>{{SVGRef}}</div> + +<pre dir="ltr" id="tw-target-text"><strong>transform</strong> 属性定义了一系列应用于元素和元素子元素的变换规则集合</pre> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g fill="grey" + transform="rotate(-10 50 100) + translate(-36 45.5) + skewX(40) + scale(1 0.5)"> + <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> + </g> + + <use xlink:href="#heart" fill="none" stroke="red"/> +</svg> +</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<p class="note"><strong>提示:</strong> 从SVG2开始，transform是一种图像属性，这意味着它可以用作CSS属性。但是请注意，CSS属性和属性之间在语法上存在一些差异。有关在这种情况下使用的特定语法，请参见CSS属性{{cssxref('transform')}}的文档</p> + +<p>作为表示属性，任何元素都可以使用<strong><code>transform</code></strong> （在SVG 1.1中，仅这16个元素被允许使用：{{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}}, and {{SVGElement('use')}})。<br> + <br> + 另外，作为SVG 1.1的遗留物，{{SVGElement('linearGradient')}}和{{SVGElement('radialGradient')}}支持 <code>gradientTransform </code>属性，而{{SVGElement('pattern')}}支持 <code>patternTransform </code>属性，两者的行为完全相同于 <code>transform</code> 属性</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Transform-list"><transform-list></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Transform_functions">Transform functions</h2> + +<p><code>transform</code> 属性 <em><code><transform-list> </code></em>可以使用以下的所有 <code>transform </code>函数</p> + +<p class="warning"><strong>警告:</strong> 根据规范，您还应该能够使用CSS {{cssxref('transform-function', 'transform functions')}}，但是，这不能保证兼容性。</p> + +<h3 id="Matrix">Matrix</h3> + +<p><code>matrix(<a> <b> <c> <d> <e> <f>)</code> 函数以六个值的变换矩阵形式指定一个 <code>transform</code>。 matrix（a，b，c，d，e，f）等同于应用变换矩阵： \ begin {pmatrix} a＆c＆e \\ b＆d＆f \\ 0＆0＆1 \ end {pmatrix} 通过以下矩阵等式将坐标从先前的坐标系映射到新的坐标系：<br> + <math display="block"><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevCoordSys}} + c y_{\mathrm{prevCoordSys}} + e \\ b x_{\mathrm{prevCoordSys}} + d y_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix} </annotation></semantics></math></p> + +<h4 id="举例">举例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <rect x="10" y="10" width="30" height="20" fill="green" /> + + <!-- + In the following example we are applying the matrix: + [a c e] [3 -1 30] + [b d f] => [1 3 40] + [0 0 1] [0 0 1] + + which transform the rectangle as such: + + top left corner: oldX=10 oldY=10 + newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 10 + 30 = 50 + newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 10 + 40 = 80 + + top right corner: oldX=40 oldY=10 + newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 10 + 30 = 140 + newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 10 + 40 = 110 + + bottom left corner: oldX=10 oldY=30 + newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 30 + 30 = 30 + newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 30 + 40 = 140 + + bottom right corner: oldX=40 oldY=30 + newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120 + newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170 + --> + <rect x="10" y="10" width="30" height="20" fill="red" + transform="matrix(3 1 -1 3 30 40)" /> +</svg></pre> + +<p>{{EmbedLiveSample('Matrix', '100%', 200)}}</p> + +<h3 id="Translate">Translate</h3> + +<p> <code>translate(<x> [<y>])</code> 变换函数通过 <code>x</code> 向量和 <code>y</code> 向量移动元素 (i.e. <code>x<sub>new</sub> = x<sub>old</sub> + <x>, y<sub>new</sub> = y<sub>old</sub> + <y></code>). 如果 <code>y</code> 向量没有被提供，那么默认为 <code>0</code> </p> + +<h4 id="举例_2">举例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- No translation --> + <rect x="5" y="5" width="40" height="40" fill="green" /> + + <!-- Horizontal translation --> + <rect x="5" y="5" width="40" height="40" fill="blue" + transform="translate(50)" /> + + <!-- Vertical translation --> + <rect x="5" y="5" width="40" height="40" fill="red" + transform="translate(0 50)" /> + + <!-- Both horizontal and vertical translation --> + <rect x="5" y="5" width="40" height="40" fill="yellow" + transform="translate(50,50)" /> +</svg></pre> + +<p>{{EmbedLiveSample('Translate', '100%', 200)}}</p> + +<h3 id="Scale">Scale</h3> + +<p><code>scale(<x> [<y>])</code> 变换函数通过 <code>x</code> 和 <code>y</code>指定一个 <strong>等比例放大缩小</strong> 操作。如果 <code>y</code> 没有被提供，那么假定为等同于 <code>x</code></p> + +<h4 id="举例_3">举例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- uniform scale --> + <circle cx="0" cy="0" r="10" fill="red" + transform="scale(4)" /> + + <!-- vertical scale --> + <circle cx="0" cy="0" r="10" fill="yellow" + transform="scale(1,4)" /> + + <!-- horizontal scale --> + <circle cx="0" cy="0" r="10" fill="pink" + transform="scale(4,1)" /> + + <!-- No scale --> + <circle cx="0" cy="0" r="10" fill="black" /> +</svg></pre> + +<p>{{EmbedLiveSample('Scale', '100%', 200)}}</p> + +<h3 id="Rotate">Rotate</h3> + +<p><code>rotate(<a> [<x> <y>])</code> 变换方法通过一个给定角度对一个指定的点进行旋转变换。如果x和y没有提供，那么默认为当前元素坐标系原点。否则，就以<code>(x,y)</code>为原点进行旋转。</p> + +<h4 id="举例_4">举例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="10" height="10" /> + + <!-- rotation is done around the point 0,0 --> + <rect x="0" y="0" width="10" height="10" fill="red" + transform="rotate(100)" /> + + <!-- rotation is done around the point 10,10 --> + <rect x="0" y="0" width="10" height="10" fill="green" + transform="rotate(100,10,10)" /> +</svg></pre> + +<p>{{EmbedLiveSample('Rotate', '100%', 200)}}</p> + +<h3 id="SkewX">SkewX</h3> + +<p><code>skewX(<a>)</code> 变换函数指定了沿 <code>x</code> 轴倾斜 <code>a°</code> 的倾斜变换。</p> + +<h4 id="举例_5">举例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> + <rect x="-3" y="-3" width="6" height="6" /> + + <rect x="-3" y="-3" width="6" height="6" fill="red" + transform="skewX(30)" /> +</svg></pre> + +<p>{{EmbedLiveSample('SkewX', '100%', 200)}}</p> + +<h3 id="SkewY">SkewY</h3> + +<p><code>skewY(<a>)</code> 变换函数指定了沿 <code>y</code> 轴倾斜 <code>a°</code> 的倾斜变换。</p> + +<h4 id="举例_6">举例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> + <rect x="-3" y="-3" width="6" height="6" /> + + <rect x="-3" y="-3" width="6" height="6" fill="red" + transform="skewY(30)" /> +</svg></pre> + +<p>{{EmbedLiveSample('SkewY', '100%', 200)}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#svg-transform', 'transform')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transforms', '#svg-transform', 'transform')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG2", "coords.html#TransformProperty", "transform")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "coords.html#TransformAttribute", "transform")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/type/index.html b/files/zh-cn/web/svg/attribute/type/index.html new file mode 100644 index 0000000000..b36de9fb97 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/type/index.html @@ -0,0 +1,152 @@ +--- +title: type +slug: Web/SVG/Attribute/type +translation_of: Web/SVG/Attribute/type +--- +<div>{{SVGRef}}</div> + +<p>type属性是一个类属性，他在不同的使用语境下有不同的意思。</p> + +<ul> + <li>对于{{SVGElement("animateTransform")}}元素 , 它决定了那些随时间变化的值的转换的类型</li> + <li>对于 {{SVGElement("feColorMatrix")}} 元素, 它指明了矩阵运算的类型。关键词 <code>matrix</code> 表明一个全 5x4 矩阵的值会被提供. 其他关键字快捷方式代表允许不执行复杂矩阵运算下使用常用颜色。</li> + <li>对于{{SVGElement("feFuncR")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncB")}}, 和{{SVGElement("feFuncA")}} 元素, 它指明了组件传递函数的类型。</li> + <li>对于 {{SVGElement("feTurbulence")}} 元素, 它表示应以噪声函数还是湍流函数执行过滤。</li> + <li>对于 {{SVGElement("style")}} 和 {{SVGElement("script")}} 元素, 它定义了元素内容的类型。</li> +</ul> + +<h2 id="Usage_context">Usage context</h2> + +<h3 id="For_the_SVGElementanimateTransform_elements">For the {{SVGElement("animateTransform")}} elements</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><strong><code>translate</code></strong> | <code>scale</code> | <code>rotate</code> | <code>skewX</code> | <code>skewY</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElementTypeAttribute" title="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElementTypeAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h3 id="For_the_SVGElementfeColorMatrix_element">For the {{ SVGElement("feColorMatrix") }} element</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><strong><code>matrix</code></strong> | <code>saturate</code> | <code>hueRotate</code> | <code>luminanceToAlpha</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixTypeAttribute"><span class="external">SVG 1.1 (2nd Edition)</span></a></td> + </tr> + </tbody> +</table> + +<h3 id="For_the_SVGElementfeFuncR_SVGElementfeFuncG_SVGElementfeFuncB_and_SVGElementfeFuncA_elements">For the {{ SVGElement("feFuncR") }}, {{ SVGElement("feFuncG") }}, {{ SVGElement("feFuncB") }}, and {{ SVGElement("feFuncA") }} elements</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><code>identity</code> | <code>table</code> | <code>discrete</code> | <code>linear</code> | <code>gamma</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferTypeAttribute"><span class="external">SVG 1.1 (2nd Edition)</span></a></td> + </tr> + </tbody> +</table> + +<h3 id="For_the_SVGElementfeTurbulence_element">For the {{ SVGElement("feTurbulence") }} element</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><code>fractalNoise</code> | <strong><code>turbulence</code></strong></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceTypeAttribute"><span class="external">SVG 1.1 (2nd Edition)</span></a></td> + </tr> + </tbody> +</table> + +<h3 id="For_the_SVGElementstyle_and_SVGElementscript_elements">For the {{ SVGElement("style") }} and {{SVGElement("script")}} elements</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><content-type></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a href="http://www.w3.org/TR/SVG11/script.html#ScriptElementTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/script.html#ScriptElementTypeAttribute"><span class="external">SVG 1.1 (2nd Edition) : script</span></a><br> + <a href="http://www.w3.org/TR/SVG11/styling.html#StyleElementTypeAttribute" rel="external" title="http://www.w3.org/TR/SVG11/styling.html#StyleElementTypeAttribute">SVG 1.1 (2nd Edition) : style</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>values</code> attribute</p> + +<ul> + <li>{{SVGElement("animateTransform")}}</li> + <li>{{SVGElement("feColorMatrix")}}</li> + <li>{{SVGElement("feFuncA")}}</li> + <li>{{SVGElement("feFuncB")}}</li> + <li>{{SVGElement("feFuncG")}}</li> + <li>{{SVGElement("feFuncR")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li>{{SVGElement("script")}}</li> + <li>{{SVGElement("style")}}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/units-per-em/index.html b/files/zh-cn/web/svg/attribute/units-per-em/index.html new file mode 100644 index 0000000000..2ba20d42f8 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/units-per-em/index.html @@ -0,0 +1,63 @@ +--- +title: units-per-em +slug: Web/SVG/Attribute/units-per-em +translation_of: Web/SVG/Attribute/units-per-em +--- +<div>{{SVGRef}}{{deprecated_header("SVG 2")}}</div> + +<p><span class="seoSummary">The <strong><code>units-per-em</code></strong> attribute specifies the number of coordinate units on the "em square", an abstract square whose height is the intended distance between lines of type in the same type size.</span> This is the size of the design grid on which {{Glossary("glyph", "glyphs")}} are laid out.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> This value is almost always necessary as nearly every other attribute requires the definition of a design grid.</p> +</div> + +<p>Only one element is using this attribute: {{SVGElement("font-face")}}</p> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#Number"><number></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>1000</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><number></code></dt> + <dd>This value indicates the the number of coordinate units on the em square.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG1.1", "fonts.html#FontFaceElementUnitsPerEmAttribute", "units-per-em")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.font-face.units-per-em")}}</p> diff --git a/files/zh-cn/web/svg/attribute/values/index.html b/files/zh-cn/web/svg/attribute/values/index.html new file mode 100644 index 0000000000..fa9fbbf70a --- /dev/null +++ b/files/zh-cn/web/svg/attribute/values/index.html @@ -0,0 +1,107 @@ +--- +title: values +slug: Web/SVG/Attribute/values +translation_of: Web/SVG/Attribute/values +--- +<div>{{SVGRef}}</div> + +<p>values属性具有不同的含义，具体取决于使用的上下文，它可以定义在动画过程中使用的值序列，或者它是颜色矩阵的数字列表，根据颜色类型的不同，它们的解释也不同。 要执行的颜色更改。</p> + +<p>五个元素正在使用此属性: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, and {{SVGElement("feColorMatrix")}}</p> + +<h2 id="animate_animateColor_animateMotion_animateTransform">animate, animateColor, animateMotion, animateTransform</h2> + +<p>对于 {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, 和 {{SVGElement("animateTransform")}}, <code>values</code>是一个列表 定义动画过程中的值序列的值。 如果指定了此属性，则将忽略在元素上设置的任何 {{SVGAttr("from")}}, {{SVGAttr("to")}}, 和 {{SVGAttr("by")}} 属性值.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#List-of-Ts"><list-of-values></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><list-of-values></code></dt> + <dd>该值包含一个或多个值的分号分隔列表。 值的类型由 {{SVGAttr("href")}} 和 {{SVGAttr("attributeName")}} 属性定义.</dd> +</dl> + +<h2 id="feColorMatrix">feColorMatrix</h2> + +<p>对于 {{SVGElement("feColorMatrix")}} 元素，值是根据 {{SVGAttr("type")}} 属性值不同解释的数字列表。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>If <code>type="matrix"</code>, identity matrix,<br> + if <code>type="saturate"</code>, <code>1</code>, resulting in identity matrix,<br> + if <code>type="hueRotate"</code>, <code>0</code>, resulting in identity matrix</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><list-of-numbers></code></dt> + <dd> + <p>该值是一个数字列表，根据type属性的值来定义不同解释：</p> + + <ul> + <li>For <code>type="matrix"</code>, <code>values</code> 是20个矩阵值（a00 a01 a02 a03 a04 a10 a11 ... a34）的列表，以空格和/或逗号分隔。</li> + <li>For <code>type="saturate"</code>, <code>values</code> 是单个实数值（0到1）。</li> + <li>For <code>type="hueRotate"</code>, <code>values</code> 是一个单一的实数值（度）。.</li> + <li>For <code>type="luminanceToAlpha"</code>, <code>values</code> 不适用。</li> + </ul> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Filters 1.0", "#element-attrdef-fecolormatrix-values", "values for <feColorMatrix>")}}</td> + <td>{{Spec2("Filters 1.0")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("SVG Animations 2", "#ValuesAttribute", "values for <animate>, <animateColor>, <animateMotion>, and <animateTransform>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "filters.html#feColorMatrixValuesAttribute", "values for <feColorMatrix>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><feColorMatrix></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#ValuesAttribute", "values for <animate>, <animateColor>, <animateMotion>, and <animateTransform>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><animate></code>, <code><animateColor></code>, <code><animateMotion></code>, and <code><animateTransform></code></td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/vector-effect/index.html b/files/zh-cn/web/svg/attribute/vector-effect/index.html new file mode 100644 index 0000000000..e89977f57a --- /dev/null +++ b/files/zh-cn/web/svg/attribute/vector-effect/index.html @@ -0,0 +1,91 @@ +--- +title: vector-effect +slug: Web/SVG/Attribute/vector-effect +translation_of: Web/SVG/Attribute/vector-effect +--- +<div>{{SVGRef}}</div> + +<p><strong><code>vector-effect</code></strong> 属性指明绘制对象时要使用的矢量效果。在任何其他合成操作（如滤镜，蒙版和剪辑等）之前，都要应用矢量效果。</p> + +<p class="note"><strong>备注:</strong> 作为显示性属性， <code>vector-effect</code> 也可以直接在 CSS 样式表中作为属性使用。</p> + +<p>作为显示性属性，它能被应用到任何元素，但只对这10个元素有效果: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}} {{SVGElement("tspan")}}, and {{SVGElement("use")}}</p> + +<h2 id="用法说明">用法说明</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">值</th> + <td><code>none</code> | <code>non-scaling-stroke</code> | <code>non-scaling-size</code> | <code>non-rotation</code> | <code>fixed-position</code></td> + </tr> + <tr> + <th scope="row">默认值</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">可动画性</th> + <td>是</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code>none</code></dt> + <dd>该值指定不应用矢量效果，即，使用默认的渲染行为，即首先用指定的绘画填充形状的几何形状，然后使用指定的绘画描边轮廓。</dd> + <dt><code>non-scaling-stroke</code></dt> + <dd>该值修改了笔触的方式。通常，笔触涉及在当前用户坐标系中计算形状路径的笔触轮廓，并用笔触颜料（颜色或渐变）填充轮廓。该值的最终视觉效果是笔触宽度不依赖于元素的变换（包括非均匀缩放和剪切变换）和缩放级别。</dd> + <dt><code>non-scaling-size</code></dt> + <dd>该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，该用户坐标系的比例也不会更改。但是，它没有指定抑制旋转和偏斜。同样，它也不指定用户坐标系的原点。由于此值抑制了用户坐标系的缩放，因此它还具有<code>non-scaling-stroke</code>的特性。</dd> + <dt><code>non-rotation</code></dt> + <dd>该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间发生任何变换更改，该用户坐标系的旋转和倾斜仍被抑制。但是，它没有指定抑制缩放。同样，它也没有指定用户坐标系的原点。</dd> + <dt><code>fixed-position</code></dt> + <dd>该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，用户坐标系的位置都是固定的。但是，它没有指定抑制旋转，偏斜和缩放。当同时指定了该矢量效果和 {{SVGAttr("transform")}} 属性， {{SVGAttr("transform")}} 属性将因该矢量效果而被消耗。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Example_vector-effectnon-scaling-stroke">Example: vector-effect="non-scaling-stroke"</h3> + +<pre class="brush: html"><svg viewBox="0 0 500 240"> + <!-- normal --> + <path d="M10,20L40,100L39,200z" stroke="black" stroke-width="2px" fill="none"></path> + + <!-- scaled --> + <path transform="translate(100,0)scale(4,1)" d="M10,20L40,100L39,200z" stroke="black" + stroke-width="2px" fill="none"></path> + + <!-- fixed--> + <path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="M10,20L40,100L39,200z" + stroke="black" stroke-width="2px" fill="none"></path> +</svg> +</pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("Example_vector-effectnon-scaling-stroke", 550, 300)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "coords.html#VectorEffectProperty", "vector-effect")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("svg.attributes.vector-effect")}}</p> diff --git a/files/zh-cn/web/svg/attribute/version/index.html b/files/zh-cn/web/svg/attribute/version/index.html new file mode 100644 index 0000000000..6fb63d6aec --- /dev/null +++ b/files/zh-cn/web/svg/attribute/version/index.html @@ -0,0 +1,31 @@ +--- +title: version +slug: Web/SVG/Attribute/version +translation_of: Web/SVG/Attribute/version +--- +<p><strong><code>version</code></strong> 属性用于指明 SVG 文档遵循规范。 它只允许在根元素<a href="/en-US/docs/Web/SVG/Element/svg"><svg></a> 上使用。 它纯粹是一个说明，对渲染或处理没有任何影响。</p> + +<p>虽然它接受任何数字，但是只有<code>1.0</code> 和 <code>1.1</code>.这两个有效的选择。</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>None</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a></td> + </tr> + <tr> + <th scope="row">动画属性</th> + <td>No</td> + </tr> + <tr> + <th scope="row">标准文件</th> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#SVGElementVersionAttribute" rel="external" title="http://www.w3.org/TR/SVG11/struct.html#SVGElementVersionAttribute">SVG 1.1 (2nd Edition): version attribute</a></td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/svg/attribute/viewbox/index.html b/files/zh-cn/web/svg/attribute/viewbox/index.html new file mode 100644 index 0000000000..6edd649c84 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/viewbox/index.html @@ -0,0 +1,116 @@ +--- +title: viewBox +slug: Web/SVG/Attribute/viewBox +tags: + - SVG + - SVG Attribute + - viewBox +translation_of: Web/SVG/Attribute/viewBox +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考</a></p> + +<p>viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。</p> + +<p>viewBox属性的值是一个包含4个参数的列表 <code>min-x</code>, <code>min-y</code>, <code>width</code> and <code>height</code>， 以空格或者逗号分隔开， 在用户空间中指定一个矩形区域映射到给定的元素,查看属性{{ SVGAttr("preserveAspectRatio") }}。</p> + +<p>不允许宽度和高度为负值,0则禁用元素的呈现。</p> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- + with relative unit such as percentage, the visual size + of the square looks unchanged regardless of the viewBox + --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + with a large viewBox the circle looks small + as it is using user units for the r attribute: + 4 resolved against 100 as set in the viewBox + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg> + +<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> + <!-- + with relative unit such as percentage, the visual size + of the square looks unchanged regardless of the viewBox` + --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + with a small viewBox the circle looks large + as it is using user units for the r attribute: + 4 resolved against 10 as set in the viewBox + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg> + +<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> + <!-- + The point of coordinate 0,0 is now in the center of the viewport, + and 100% is still resolve to a width or height of 10 user units so + the rectangle looks shifted to the bottom/right corner of the viewport + --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + With the point of coordinate 0,0 in the center of the viewport the + value 50% is resolve to 5 which means the center of the circle is + in the bottom/right corner of the viewport. + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> + + + +<p>这个属性会受到 {{ SVGAttr("preserveAspectRatio") }} 的影响。</p> + +<div class="blockIndicator note"> +<p><strong>温馨提示:：</strong><code>width</code> 或者 <code>height</code> 的值，小于或等于0的情况下，这个元素将不会被渲染出来。</p> +</div> + +<p>有 {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, 和 {{ SVGElement("view") }} 等五个 svg 元素可以有这个属性。</p> + +<h2 id="Usage_context"><span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">Usage context</span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><em>See above</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute" title="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Elements">Elements</h2> + +<p>下面的元素可以使用viewBox属性</p> + +<ul> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("view") }}</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/SVG/Tutorial/Positions" title="https://developer.mozilla.org/en/SVG/Tutorial/Positions">SVG Getting Started: Positions</a></li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/visibility/index.html b/files/zh-cn/web/svg/attribute/visibility/index.html new file mode 100644 index 0000000000..9a55be1722 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/visibility/index.html @@ -0,0 +1,59 @@ +--- +title: visibility +slug: Web/SVG/Attribute/visibility +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/visibility +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p><code>visibility</code>属性让你能够控制一个图形元素的可见性。用了值<code>hidden</code>或者值<code>collapse</code>，当前的图形元素将不可见。</p> + +<div class="note"><strong>注意：</strong>如果 {{ SVGElement("tspan") }}元素、{{ SVGElement("tref") }}元素或{{ SVGElement("altGlyph") }}元素上的<code>visibility</code>属性设置为<code>hidden</code>，则文本变得不可见，但是依然占用文本布局计算的空间。</div> + +<p>根据属性{{ SVGAttr("pointer-events") }}的值，图形元素如果属性<code>visibility值设置为hidden，依然能够响应事件。</code></p> + +<p>作为一个外观属性，它可以直接用作CSS样式表内部的属性。请阅读{{ cssxref("visibility","CSS visibility") }}以了解更多信息。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>外观属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td><strong title="this is the default value">visible</strong> | hidden | collapse | inherit</td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#VisibilityProperty" title="http://www.w3.org/TR/SVG11/painting.html#VisibilityProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h2 id="元素">元素</h2> + +<p>下列元素楞以使用<code>visibility</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">图形元素</a> »</li> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">文本内容元素</a> »</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>属性{{ SVGAttr("display") }} </li> + <li>{{ cssxref("visibility","CSS visibility") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/width/index.html b/files/zh-cn/web/svg/attribute/width/index.html new file mode 100644 index 0000000000..93a4c1f58b --- /dev/null +++ b/files/zh-cn/web/svg/attribute/width/index.html @@ -0,0 +1,62 @@ +--- +title: width +slug: Web/SVG/Attribute/width +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/width +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性在用户坐标系统中标识了一个水平长度。该坐标的确切效果依赖于每个元素。大多数时候，它体现引用元素的矩形区域的宽度（请阅读每个元素的文档以了解例外情况）。</p> + +<p>除了<code><svg></code>元素之外，别的元素都必须指定该属性，<code><svg></code>的宽度默认是<strong>100%</strong>，而<code><filter></code>元素以及<code><mask></code>元素的默认宽度是<strong>120%</strong>。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute">SVG 1.1 (2nd Edition): mask element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/zh-CN/docs/Web/SVG/Content_type","长度") }}</p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>width</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">滤镜元素</a> »</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("use") }}</li> + <li>{{ SVGElement("mask") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/x/index.html b/files/zh-cn/web/svg/attribute/x/index.html new file mode 100644 index 0000000000..186dab9d02 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/x/index.html @@ -0,0 +1,77 @@ +--- +title: x +slug: Web/SVG/Attribute/x +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/x +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性在用户坐标系统中标识了一个x轴坐标。本坐标的确切效果依赖于每个元素。大多数时候，它体现了引用元素的矩形区域的左上角的x轴坐标（请阅读每个元素的文档以了解例外情况）。</p> + +<p>如果没有指定这个属性，效果相当于值被设置为0，除了{{ SVGElement("filter") }}元素以及{{ SVGElement("mask") }}元素；这两个元素的<code>x</code>默认值为<strong>-10%</strong>。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute" title="http://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute">SVG 1.1 (2nd Edition): cursor element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute" title="http://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute">SVG 1.1 (2nd Edition): fePointLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute" title="http://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute">SVG 1.1 (2nd Edition): feSpotLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute">SVG 1.1 (2nd Edition): filter element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#TextElementXAttribute">SVG 1.1 (2nd Edition): text element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementXAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute">SVG 1.1 (2nd Edition): mask element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute">SVG 1.1 (2nd Edition): tspan element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","coordinate") }}</p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>x</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">滤镜元素</a> »</li> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("fePointLight") }}</li> + <li>{{ SVGElement("feSpotLight") }}</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("text") }}</li> + <li>{{ SVGElement("use") }}</li> + <li>{{ SVGElement("mask") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("tspan") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/y/index.html b/files/zh-cn/web/svg/attribute/y/index.html new file mode 100644 index 0000000000..2ea6d9fe33 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/y/index.html @@ -0,0 +1,77 @@ +--- +title: 'y' +slug: Web/SVG/Attribute/y +tags: + - SVG + - SVG属性 + - 需要兼容性表 +translation_of: Web/SVG/Attribute/y +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p> + +<p>该属性在用户坐标系统中标识了一个y轴坐标。本坐标的确切效果依赖于每个元素。大多数时候，它体现了引用元素的矩形区域的左上角的y轴坐标（请阅读每个元素的文档以了解例外情况）。</p> + +<p>如果没有指定这个属性，效果相当于值被设置为<strong>0</strong>，除了<a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter" title="此页面仍未被本地化, 期待您的翻译!"><code><filter></code></a>元素以及<a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/mask" title="在 SVG 中，你可以定义任意其他图形对象 或者 <g> 元素作为一个透明的遮罩层和当前元素合成. mask 元素用于定义这样的遮罩层. 一个遮罩层引用mask元素属性."><code><mask></code></a>元素；这两个元素的<code><font face="Consolas, Liberation Mono, Courier, monospace">y</font></code>默认值为<strong>-10%</strong>。</p> + +<h2 id="用法">用法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">值</th> + <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">可变性</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">规范文档</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#AltGlyphElementYAttribute" title="http://www.w3.org/TR/SVG/text.html#AltGlyphElementYAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/interact.html#CursorElementYAttribute" title="http://www.w3.org/TR/SVG/interact.html#CursorElementYAttribute">SVG 1.1 (2nd Edition): cursor element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#fePointLightYAttribute" title="http://www.w3.org/TR/SVG/filters.html#fePointLightYAttribute">SVG 1.1 (2nd Edition): fePointLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#feSpotLightYAttribute" title="http://www.w3.org/TR/SVG/filters.html#feSpotLightYAttribute">SVG 1.1 (2nd Edition): feSpotLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterElementYAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterElementYAttribute">SVG 1.1 (2nd Edition): filter element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementYAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementYAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#GlyphRefElementYAttribute" title="http://www.w3.org/TR/SVG/text.html#GlyphRefElementYAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementYAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementYAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementYAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementYAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementYAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementYAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementYAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementYAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextElementYAttribute" title="http://www.w3.org/TR/SVG/text.html#TextElementYAttribute">SVG 1.1 (2nd Edition): text element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementYAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementYAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveYAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveYAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementYAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementYAttribute">SVG 1.1 (2nd Edition): mask element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TSpanElementYAttribute" title="http://www.w3.org/TR/SVG/text.html#TSpanElementYAttribute">SVG 1.1 (2nd Edition): tspan element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","coordinate") }}</p> + +<h2 id="元素">元素</h2> + +<p>下列元素可以使用<code>y</code>属性：</p> + +<ul> + <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">滤镜元素</a> »</li> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("fePointLight") }}</li> + <li>{{ SVGElement("feSpotLight") }}</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("text") }}</li> + <li>{{ SVGElement("use") }}</li> + <li>{{ SVGElement("mask") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("tspan") }}</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/文本锚点/index.html b/files/zh-cn/web/svg/attribute/文本锚点/index.html new file mode 100644 index 0000000000..7a71281230 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/文本锚点/index.html @@ -0,0 +1,95 @@ +--- +title: text-anchor +slug: Web/SVG/Attribute/文本锚点 +tags: + - 可缩放矢量图形 + - 可缩放矢量图形 属性 +translation_of: Web/SVG/Attribute/text-anchor +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>文本锚点属性被用来描述该文本与所给点的对齐方式 (开头、中间、末尾对齐) 。</p> + +<p>文本锚点属性被运用到每个 {{ SVGElement("text") }} 元素的独立文本块上。 每个文本块有一个初始的当前文本位置，一个来源于 {{ SVGElement("text") }} 元素的{{ SVGAttr("x") }}和{{ SVGAttr("y") }}属性在当前上下文的用户坐标系中所对应的点，任何 一个{{ SVGElement("tspan") }}、{{SVGElement("tref") }}、{{ SVGElement("altGlyph") }} 元素的 {{ SVGAttr("x") }} 或者 {{ SVGAttr("y") }} 属性值都明确指向了文本块里第一个被呈现的字符，或者是决定了{{ SVGElement("textPath") }}元素的当前文本位置的初始值。</p> + +<p>作为一个描述性的属性，它也可以直接用作css样式的性质（style属性的值）。</p> + +<h2 id="使用方法">使用方法</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">类别</th> + <td>呈现属性</td> + </tr> + <tr> + <th scope="row">值</th> + <td>start | middle | end | <strong title="this is the default value">inherit</strong></td> + </tr> + <tr> + <th scope="row">可动画化</th> + <td>是</td> + </tr> + <tr> + <th scope="row">标准文件</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty" title="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>start</dt> + <dd>所呈现的字符对齐方式为：文本字符串的开始位置即当前文本的初始位置.对于拉丁文在其通常文本排列方向，这就相当于左对齐. 对于脚本像希伯来语和阿拉伯语这类自右向左排列的文字来说，这相当于右对齐. 对于亚洲某些垂直走向的文本来说，这相当于向上对齐。</dd> + <dt>middle</dt> + <dd>所呈现的字符对齐方式为：文本字符串的中间位置即当前文本的初始位置. (对于按路径排列的文本，会从概念上首先将其文本排列在一条直线上，确定该串中点位置后，然再将该文本映射到路径上，并且将之前确定的中点放置在当前文本的位置上 )</dd> + <dt>end</dt> + <dd>所呈现的字符对齐方式为：文本字符串的末尾即当前文本的初始位置.对于拉丁语通常的文字走向来说，这就相当于右对齐. 对于像希伯来语和阿拉伯语这类将文字自右向左排列的脚本来说，这相当于左对齐.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><?xml version="1.0"?> +<svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <!-- Materialisation of anchors --> + <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" /> + + + <!-- Anchors in action --> + <text text-anchor="start" + x="60" y="40">A</text> + + <text text-anchor="middle" + x="60" y="75">A</text> + + <text text-anchor="end" + x="60" y="110">A</text> + + <!-- Materialisation of anchors --> + <circle cx="60" cy="40" r="3" fill="red" /> + <circle cx="60" cy="75" r="3" fill="red" /> + <circle cx="60" cy="110" r="3" fill="red" /> + +<style><![CDATA[ +text{ + font: bold 36px Verdana, Helvetica, Arial, sans-serif; +} +]]></style> +</svg></pre> + +<p><strong>Live sample</strong></p> + +<p>{{ EmbedLiveSample('Example','120','120') }}</p> + +<h2 id="元素">元素</h2> + +<p> </p> + +<p>以下元素可以运用文本锚点属性：</p> + +<p> </p> + +<ul> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#TextContent">Text content elements</a> »</li> +</ul> diff --git a/files/zh-cn/web/svg/attribute/样式/index.html b/files/zh-cn/web/svg/attribute/样式/index.html new file mode 100644 index 0000000000..6d9669c5c5 --- /dev/null +++ b/files/zh-cn/web/svg/attribute/样式/index.html @@ -0,0 +1,32 @@ +--- +title: SVG样式属性 +slug: Web/SVG/Attribute/样式 +translation_of: Web/SVG/Attribute/Styling +--- +<p>SVG样式属性是所有可以在任何SVG元素上指定以应用CSS样式效果的属性。</p> + +<div class="index"> +<ul> + <li><a href="#attr-class"><code>class</code></a></li> + <li><a href="#attr-style"><code>style</code></a></li> +</ul> +</div> + +<h2 id="属性">属性</h2> + +<dl> + <dt id="attr-class">{{SVGAttr('class')}}</dt> + <dd>给一个元素分配一个类名称或者设置类名。它跟 HTML中的{{htmlattrxref('class')}}属性具有同样的功能。<br> + <small><em>Value</em>: 任何可用的ID字符; <em>Animatable</em>: <strong>Yes</strong></small></dd> + <dt id="attr-style">{{SVGAttr('style')}}</dt> + <dd>它指定元素的样式信息。它跟HTML中 {{htmlattrxref('style')}}属性具有相同的功能。<br> + <small><em>Value</em>:任何可用的ID字符; <em>Animatable</em>: <strong>No</strong></small> + <p> </p> + </dd> +</dl> + +<h2 id="浏览器支持">浏览器支持</h2> + +<div class="hidden">此页面上的兼容性表有结构化数据产生。如果你想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 和发送给我们一个请求。</div> + +<p>{{Compat("svg.attributes.style")}}</p> diff --git a/files/zh-cn/web/svg/content_type/index.html b/files/zh-cn/web/svg/content_type/index.html new file mode 100644 index 0000000000..36383d7829 --- /dev/null +++ b/files/zh-cn/web/svg/content_type/index.html @@ -0,0 +1,373 @@ +--- +title: Content type +slug: Web/SVG/Content_type +tags: + - SVG + - 需要技术预览 +translation_of: Web/SVG/Content_type +--- +<h2 id="角度">角度</h2> + +<dl> + <dt><angle></dt> + <dd> + <p>可以用两种办法指定角度。如果用在样式表的属性的值中，<code><angle></code>可以用如下方法定义：</p> + + <pre>angle ::= number (~"deg" | ~"grad" | ~"rad")?</pre> + + <p>在这里deg标识了度数，grad标识了斜率，rad标识了弧度。</p> + + <p>对于定义在CSS2中的属性，必须提供一个角度单位标识符。对于在SVG特有的属性和它们对应的外观属性中的角度值，角度单位标识符是可选的。如果没有提供，角度值会被潜在分配一个度数单位。在所有元素的外观属性中，无论是在SVG1.1中定义的，还是在CSS2中定义的，如果指定了角度标识符，角度标识符必须是小写的。</p> + + <p>如果角度用在一个SVG属性中，<code><angle></code>可以用以下方式定义：</p> + + <pre>angle ::= number ("deg" | "grad" | "rad")?</pre> + + <p>在这个<angle>值中，单位标识符必须是小写的。</p> + + <p>在SVG DOM中，<angle>值使用{{domxref("SVGAngle")}}或{{domxref("SVGAnimatedAngle objects")}}表达。</p> + </dd> +</dl> + +<h2 id="任意值">任意值</h2> + +<dl> + <dt><anything></dt> + <dd> + <p>基本类型<anything>是一个零字符或多字符的序列。具体如下：</p> + + <pre>anything ::= Char*</pre> + + <p>在这里，<a href="http://www.w3.org/TR/2008/REC-xml-20081126/#NT-Char" title="http://www.w3.org/TR/2008/REC-xml-20081126/#NT-Char">Char</a> 表示一个字符，XML 1.0 第2.2节中定义了它。</p> + </dd> +</dl> + +<h2 id="时钟值">时钟值</h2> + +<dl> + <dt><clock-value></dt> + <dd> + <p>时钟值的句法与<a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/" title="http://www.w3.org/TR/2001/REC-smil-animation-20010904/">SMIL Animation</a>规范中写的句法相同。在这里重放一下时钟值的语法：</p> + + <pre>Clock-val ::= Full-clock-val | Partial-clock-val | Timecount-val +Full-clock-val ::= Hours ":" Minutes ":" Seconds ("." Fraction)? +Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)? +Timecount-val ::= Timecount ("." Fraction)? (Metric)? +Metric ::= "h" | "min" | "s" | "ms" +Hours ::= DIGIT+; any positive number +Minutes ::= 2DIGIT; range from 00 to 59 +Seconds ::= 2DIGIT; range from 00 to 59 +Fraction ::= DIGIT+ +Timecount ::= DIGIT+ +2DIGIT ::= DIGIT DIGIT +DIGIT ::= [0-9] +</pre> + + <p>对于<code>Timecount</code>值，默认的公制前缀是“s”（秒）。在时钟值中不能嵌入空白，而且前导和末尾的空白字符会被忽略掉。</p> + + <p>下面是合法的时钟值的示例：</p> + + <ul> + <li>完整时钟值：<br> + <code>02:30:03 </code> = 2小时30分钟又3秒<br> + <code>50:00:10.25</code> = 50小时10秒又250毫秒</li> + <li>部分时钟值：<br> + <code>02:33 </code> = 2分钟又33秒<br> + <code>00:10.5</code> = 10.5 秒 = 10秒又500毫秒</li> + <li>Timecount值：<br> + <code>3.2h </code> = 3.2小时 = 3小时12分钟<br> + <code>45min </code> = 45分钟<br> + <code>30s </code> = 30秒<br> + <code>5ms </code> = 5毫秒<br> + <code>12.467 </code> = 12秒又467毫秒</li> + </ul> + + <p>小数值是基数为10的浮点数，秒的界定。因此：</p> + + <p><code>00.5s = 500毫秒<br> + 00:00.005 = 5毫秒</code></p> + </dd> +</dl> + +<h2 id="颜色">颜色</h2> + +<dl> + <dt><color></dt> + <dd> + <p>基本类型<color>是一个CSS2兼容的规范，针对sRGB颜色空间的颜色。<color>应用在SVG的属性 {{SVGAttr("color")}} 上，也是属性{{SVGAttr("fill")}}、属性{{SVGAttr("stroke")}}、属性{{SVGAttr("stop-color")}}、属性 {{SVGAttr("flood-color")}}和属性{{SVGAttr("lighting-color")}}的定义的组成部分，<color>还提供了可选的基于ICC的颜色规范。</p> + + <p>SVG支持所有的定义在<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-color" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-color">CSS2句法和基本数据类型</a>中的<color>供选择的句法，而且还支持<a href="http://www.w3.org/TR/css3-color/" title="http://www.w3.org/TR/css3-color/">CSS Color Module Level 3</a>中的<color>句法（取决于编译器）。</p> + + <p>一个<color>可以是一个关键词，或者一个数字化的RGB规范。</p> + + <p>除了这些颜色关键词，用户可以利用用户环境中的对象指定对应于颜色的关键词。 这些关键词的规范定义可以在<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors">用户对颜色的引用</a>（CSS2规范第18.2节）中找到。</p> + + <p>一个16进制记号法的RGB值的格式是一个“#”后面紧跟着3个或者6个16进制字符。三数字RGB记号法（#rgb）可以转换成六数字RGB格式（#rrggbb），只需要复制数字，而不是添加0。举个例子，#fb0扩展为#ffbb00。这样确保白色（#ffffff）可以用缩写记法#fff指定，去掉任何对显示器的色深的依赖。一个函数记号法的RGB值的格式是一个RGB开头函数后面跟着一个逗号分隔的三数值数列（可以是三个数字或者三个百分数）后面跟着一个右括号“)”。一个RGB开头函数是一个大小写不敏感的字符串“rgb(”，举个例子，“RGB(”或者“rGb(”。为了兼容性，建议使用全小写形式“rgb(”。整型值255对应于100%，也对应于16进制计号法中的F或FF：<code>rgb(255,255,255)</code> = <code>rgb(100%,100%,100%)</code> = <code>#FFF。数字值周围允许存在空白字符。所有的RGB值都指定在sRGB颜色空间里。使用sRGB提供了一个清楚的、客观的、可测量的颜色定义，可以关联到国际标准。</code></p> + + <pre>color ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)? + | "rgb("integer, integer, integer")" + | "rgb("integer "%", integer "%", integer "%)" + | color-keyword +hexdigit ::= [0-9A-Fa-f] +</pre> + + <p>在这里，color-keyword要于匹配列于<a href="http://www.w3.org/TR/css3-color/" title="http://www.w3.org/TR/css3-color/">CSS Color Module Level 3</a>中的颜色关键词（大小写不敏感）中的一个，要么匹配列于<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors">对颜色的用户参考</a>中的一个。</p> + + <p>SVG DOM对<color>的定义，CSS中也做了同样的定义。SVG对颜色的扩展，包括指定基于ICC的颜色的能力，可以使用DOM接口{{domxref("SVGColor")}}来表现。</p> + </dd> +</dl> + +<h2 id="坐标">坐标</h2> + +<dl> + <dt><coordinate></dt> + <dd> + <p>一个<coordinate>是一个用户坐标系统中的长度，是从用户坐标系统的原点沿着相关轴走出给定的距离（X轴针对X坐标，Y轴针对Y坐标）。它的句法与<a href="/en-US/docs/SVG/Content_type#length" title="https://developer.mozilla.org/en/SVG/Content_type#length"><length></a>相同。</p> + + <p>在SVG DOM内部，一个 <coordinate> 代表了一个{{domxref("SVGLength")}} 或者一个{{domxref("SVGAnimatedLength")}}.</p> + </dd> +</dl> + +<h2 id="频率">频率</h2> + +<dl class="definitions"> + <dt><frequency></dt> + <dd> + <p>频率值用在可听到的属性上。就如CSS2中所定义的，一个频率值是一个<a href="/en-US/docs/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a>后面跟着一个频率单位标识符。频率单位标识符可以是：</p> + + <ul> + <li><code>Hz：赫兹</code></li> + <li><code>kHz</code>：千赫</li> + </ul> + + <p>频率值不能是负数。</p> + </dd> +</dl> + +<h2 id="FuncIRI">FuncIRI</h2> + +<dl> + <dt><FuncIRI></dt> + <dd>用于引用的功能记号法，该引用的句法与{{cssxref("uri", "CSS URI")}}相同。</dd> +</dl> + +<h2 id="ICC颜色">ICC颜色</h2> + +<dl> + <dt><icccolor></dt> + <dd> + <p><icccolor> 一份ICC颜色规范。在SVG 1.1，一份ICC颜色规范，顾名思义，是一个参考了一个{{SVGElement("color-profile")}} 元素，以及一个或更多颜色成分值。语法如下所示：</p> + + <pre>icccolor ::= "icc-color(" name (, number)+ ")" +</pre> + + <p><icccolor>对应的SVG DOM接口是{{domxref("SVGICCColor")}}。</p> + </dd> +</dl> + +<h2 id="整型数">整型数</h2> + +<dl> + <dt><integer></dt> + <dd> + <p>用一个可选的正负符号（“+”或“-”）后面跟着一个或多个0到9的数字可以指定一个<integer>：</p> + + <pre>integer ::= [+-]? [0-9]+</pre> + + <p>如果正负符号不出现，则这个数字是非负的。</p> + + <p>除非是另有声明为特殊的属性，<integer>的范围是-2147483648到2147483647之间。</p> + + <p>在SVG DOM内部，一个<integer>代表了一个数字或者一个{{domxref("SVGAnimatedInteger")}}。</p> + </dd> +</dl> + +<h2 id="IRI">IRI</h2> + +<dl> + <dt><IRI></dt> + <dd> + <p>一个国际化资源标识符。</p> + + <p>在因特网上，资源是用<em>IRI</em>（一个国际化资源标识符）标识的。举个例子，一个SVG文档调用了位于http://example.com上的someDrawing.svg，可以使用下面的<em>IRI</em>：</p> + + <pre>http://example.com/someDrawing.svg +</pre> + + <p>一个<em>IRI</em>中包含一个<em>IRI</em>片段标识符，就可以定位一个XML文档内部的特定的元素。一个包含有<em>IRI</em>片段标识符的<em>IRI</em>，由一个可选的基础<em>IRI</em>后面跟着一个“#”号，再跟着一个<em>IRI</em>片段标识符组成。举个例子，下面的IRI可以用来指定文件someDrawing.svg中的ID为“Lamppost”的元素：</p> + + <pre>http://example.com/someDrawing.svg#Lamppost +</pre> + + <p><em>IRI</em>s用在{{SVGAttr("xlink:href")}}属性中。有些属性既允许<em>IRI</em>作为内容，也允许文本字符串。为了消除歧意，避免一个文本字符串被当作IRI，可以使用功能记号法<FuncIRI>。这只是简单用功能记号法分隔一个IRI。注意：出于历史原因，为了与CSS规范兼容，分隔符是“url(”和“)”。该<em>FuncIRI</em>格式用在外观属性中。</p> + + <p>SVG广泛地使用了<em>IRI</em>引用，引用对象既可以是绝对引用也可以是引对引用。举个例子，要用线性渐变填充一个矩形，你可以先定义一个{{SVGElement("linearGradient")}}元素，然后给它一个ID，如下：</p> + + <pre><linearGradient xml:id="MyGradient">...</linearGradient> +</pre> + + <p>然后你再引用这个线性渐变，作为矩形的属性{{SVGAttr("fill")}}的值，如下：</p> + + <pre><rect fill="url(#MyGradient)"/> +</pre> + + <p>SVG支持两种类型的<em>IRI</em> 引用：</p> + + <ul> + <li>本地<em>IRI</em>引用，在这里IRI引用不能包含一个<code><absoluteIRI></code>或<code><relativeIRI></code>，因此只能包含一个片段标识符（例如： <code>#<elementID></code> 或者<code>#xpointer(id<elementID>)）。</code></li> + <li>非本地<em>IRI</em>引用，在这里<em>IRI</em>引用必须包含一个<code><absoluteIRI></code>或<code><relativeIRI>。</code></li> + </ul> + + <p>欲了解完整的SVG中的IRI引用的规范请阅读<a href="http://www.w3.org/TR/SVG/linking.html#IRIReference" title="http://www.w3.org/TR/SVG/linking.html#IRIReference">SVG 1.1 (2nd Edition): IRI references</a>。</p> + </dd> +</dl> + +<h2 id="长度">长度</h2> + +<dl> + <dt><length></dt> + <dd> + <p>一个长度是一个可度量的距离，给定一个数字以及一个单位。长度可以用两种方法指定。如果在样式表中使用它，可以如下定义<length>：</p> + + <pre>length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?</pre> + + <p>请阅读<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#length-units" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#length-units">CSS2规范</a> 以了解单位标识符的意义。</p> + + <p>在CSS2中定义的长度属性，必须提供单位标识符。而SVG专用属性的长度值以及它们对应的外观属性，长度单位标识符是可选的。如果没有提供单位标识符，长度值代表当前用户坐标系统中的一段距离。对于外观属性，无论是定义在SVG1.1还是定义在CSS2中，长度单位标识符必须是小写的。</p> + + <p>如果是在SVG属性中使用长度，<length>需定义如下：</p> + + <pre>length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?</pre> + + <p>在这样的<length>值中，单位标识符必须是小写的。</p> + + <p>注意，非属性<length>定义同样允许百分比单位标识符。这意味着一个百分比长度值依赖于被指定百分比长度值的属性。分两种情况：</p> + + <ul> + <li>百分比长度值表达了一个视口宽度或高度的百分比；</li> + <li>百分比长度值表达了一个给定对象上的边界盒的宽度或高度的百分比。</li> + </ul> + + <p>在SVG DOM中，<length>值可以用{domxref("SVGLength")}}对象或{{domxref("SVGAnimatedLength")}}对象来表达。</p> + </dd> +</dl> + +<h2 id="T值数列"><var>T</var>值数列</h2> + +<dl> + <dt><list-of-<var>T</var>s></dt> + <dd> + <p>（在这里<var>T</var> 某些类型。）由一系列分开的值构成的数列。除非另有说明，SVG的XML属性内的数列既可以是逗号分隔的，也可以是空格分隔的。用逗号作分隔符，逗号前面或后面可有带空格。</p> + + <p>数列中的空白被定义为一个或多个下列连续字符：“空格” （U+0020）、“制表符” （U+0009）、 “换行符” （U+000A）、 “回车符” （U+000D）以及“换页符”(U+000C)。</p> + + <p>下面是一个EBNF语法的模板，用来描述<list-of-<var>T</var>s>句法：</p> + + <pre>list-of-<var>T</var>s ::= <var>T </var>| <var>T</var>, list-of-<var>T</var>s</pre> + + <p>在SVG DOM内部，<list-of-<em>T</em>s>类型的值可以用一个限特定类型<em>T</em>的接口来表达。举个例子，SVG DOM中的<list-of-lengths>使用一个{{domxref("SVGLengthList")}}对象或者{{domxref("SVGAnimatedLengthList")}}对象来表达。</p> + </dd> +</dl> + +<h2 id="命名">命名</h2> + +<dl> + <dt><name></dt> + <dd> + <p>一个命名，是一个字符串，是不符合句法意义的少量的字符。</p> + + <pre>name ::= [^,()#x20#x9#xD#xA] /* 除了",", "(", ")" 或 wsp 之外的任何字符 */</pre> + </dd> +</dl> + +<h2 id="数字">数字</h2> + +<dl> + <dt><number></dt> + <dd> + <p>真实数字可以用两种方法指定。如果用在样式表中，一个<number>可以如下定义：</p> + + <pre>number ::= integer | [+-]? [0-9]* "." [0-9]+</pre> + + <p>该句法与CSS（CSS2第4.3.1章节）中的定义一样。</p> + + <p>如果用在一个SVG属性中，一个<number>可以用别的方法定义，允许一个数字后面跟着大数指数，以指定得更精确：</p> + + <pre>number ::= integer ([Ee] integer)?| [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?</pre> + + <p>在SVG DOM内部，一个<number>可以用浮点数、{{domxref("SVGNumber")}}对象或者{{domxref("SVGAnimatedNumber")}}对象来表达。</p> + </dd> +</dl> + +<h2 id="带可取舍的后缀数字的数字">带可取舍的后缀数字的数字</h2> + +<dl> + <dt><number-optional-number></dt> + <dd> + <p>一对<number>，其中第二个<number>是可视情况取舍的。</p> + + <pre>number-optional-number ::= number | number, number</pre> + + <p>在SVG DOM中，一个<number-optional-number>可以用一对{{domxref("SVGAnimatedInteger")}}对象或者一对{{domxref("SVGAnimatedNumber")}}对象来表达。</p> + </dd> +</dl> + +<h2 id="不透明度值">不透明度值</h2> + +<dl> + <dt><opacity-value></dt> + <dd>颜色不透明度或者当前对象填充的内容的不透明度，它是一个<a href="/en-US/docs/SVG/Content_type#Number" title="SVG/Content_type#Number"><number></a>。任何超出0.0到1.0范围的值将被压制回这个范围。0.0表示完全透明，1.0表示完全不透明。</dd> +</dl> + +<h2 id="涂色">涂色</h2> + +<dl> + <dt><paint></dt> + <dd> + <p>属性{{SVGAttr("fill")}}和属性{{SVGAttr("stroke")}}的值，是涂色类型的规范，用在要对一个给定元素填充或描边的时候。SVG规范的<a href="http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint" title="http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint">Specifying paint</a>章节中描述了<paint>可用的选项以及句法。</p> + + <p>在SVG DOM内部，<paint>值用{{domxref("SVGPaint")}}对象表达。</p> + </dd> +</dl> + +<h2 id="百分数">百分数</h2> + +<dl> + <dt><percentage></dt> + <dd> + <p>一个数字后面跟着一个百分号“%”就可以指定一个百分数。</p> + + <pre>percentage ::= number "%"</pre> + + <p>注意<number>的意义取决于百分数是在一个样式表中指定的，还是在一个SVG属性非外观属性中指定的。</p> + + <p>百分数值总是关联到另一个值。举个例子，每种允许百分比的属性同时定义了引用了给百分比数参考的距离测量。</p> + + <p>在SVG DOM内部，<percentage>用{{domxref("SVGNumber")}}对象或{{domxref("SVGAnimatedNumber")}}对象表达。</p> + </dd> +</dl> + +<h2 id="时间">时间</h2> + +<dl> + <dt><time></dt> + <dd> + <p>一个时间值是一个<number>后面紧跟着时间单位标识符。时间单位标识符可以是：</p> + + <ul> + <li><span class="attr-value">ms：毫秒</span></li> + <li><span class="attr-value">s：秒</span></li> + </ul> + </dd> +</dl> + +<h2 id="平移数列">平移数列</h2> + +<dl> + <dt><transform-list></dt> + <dd> + <p>一个<transform-list>是用来指定一个坐标系统转换数列。属性{{SVGAttr("transform")}}的定义中给出了<transform-list>的可用值的详细描述。</p> + + <p>在SVG DOM内部，一个<transform-list>值是用了一个{{domxref("SVGTransformList")}}对象或者{{domxref("SVGAnimatedTransformList")}}对象来表达的。</p> + </dd> +</dl> 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> diff --git a/files/zh-cn/web/svg/faq/index.html b/files/zh-cn/web/svg/faq/index.html new file mode 100644 index 0000000000..59ca239079 --- /dev/null +++ b/files/zh-cn/web/svg/faq/index.html @@ -0,0 +1,100 @@ +--- +title: 与SVG、Mozilla有关的常见问题 +slug: Web/SVG/FAQ +tags: + - SVG + - SVG FAQ + - 需要更新 +translation_of: Archive/Mozilla/SVG_FAQ +--- +<div class="note"><strong>注意：</strong>这个页面可能有点过时了。</div> + +<h3 id="What_is_the_status_of_the_SVG_implementation.3F" name="What_is_the_status_of_the_SVG_implementation.3F">SVG的编译器正处于哪种状态？</h3> + +<p>我们目前维护了两个文档用来帮助回答这个问题：<a href="/en/SVG_in_Firefox" title="en/SVG_in_Firefox">status page for SVG in Firefox 1.5+</a> 和 <a href="/en/Mozilla_SVG_Status" title="en/Mozilla_SVG_Status">a status page for SVG in the development trunk</a>.</p> + +<h3 id="Why_does_Mozilla_show_source_code.2Fgibberish_instead_of_SVG.3F" name="Why_does_Mozilla_show_source_code.2Fgibberish_instead_of_SVG.3F">为什么Mozilla会显示源代码或乱码，而不是显示SVG图像？</h3> + +<p>这有两种可能的原因：SVG文件中有一个小错误，或者服务器配置不对。</p> + +<p>如果源码的顶部有灰色区域，灰色区域里有文字“This XML file does not appear to have any style information associated with it（该XML文件找不到任何与它关联的样式信息）”，则问题是与SVG关。作为一个合未能的根SVG文件中的<svg>标签，必须至少跟随两个“命名空间绑定”。</p> + +<pre><svg xmlns="http://www.w3.org/2000/svg" +xmlns:xlink="http://www.w3.org/1999/xlink"> +</pre> + +<p>实际上第二个绑定并非总是必要的，但是除非你了解命名空间，我们<strong>强烈</strong>建议你包含它。欲了解更多信息，请看这个<a href="http://jwatt.org/svg/authoring/#server-configuration">链接</a>。</p> + +<p>If source code is displayed without a gray area at the top, or if you just see gibberish, then the problem is server misconfiguration. When servers send user agents an SVG file they must tell the user agent that the file has the MIME type "image/svg+xml", and if the SVG file is stored gzipped they must tell the browser that too. Mozilla is strict about this, and no, it's not a bug. Failing to respect the MIME types servers send is incorrect and has been a source of security holes in other browsers. Mozilla will not be changing this behaviour. For more information on server configuration for SVG see <a class="external" href="http://jwatt.org/svg/authoring/#server-configuration">this link</a>.</p> + +<h3 id="Why_does_Mozilla_show_an_.22XML_Parsing_Error.22_message_instead_of_SVG.3F" name="Why_does_Mozilla_show_an_.22XML_Parsing_Error.22_message_instead_of_SVG.3F">为什么Mozilla显示一个“XML解析错误”消息，而不是显示SVG？</h3> + +<p>This is an XML debugging message to help XML authors correct errors in their XML documents. Mozilla will show this message when there's an XML well formedness error in the file it tried to load. (It doesn't mean there's an error in Mozilla.) There are many different XML errors, but the most common one in SVG files is "XML Parsing Error: prefix not bound to a namespace". This is (almost certainly) because the 'xmlns:xlink' attribute has been used in the file without including the following two namespace bindings on the root <code><svg></code> tag.</p> + +<pre class="code"><svg xmlns="http://www.w3.org/2000/svg" +xmlns:xlink="http://www.w3.org/1999/xlink"> +</pre> + +<p>确保你的所有的SVG文件都绑定了它。欲了解更多信息请阅读这个<a href="http://jwatt.org/svg/authoring/#namespace-binding">链接</a>。</p> + +<h3 id="Why_am_I_asked_to_choose_a_program_to_open_SVG_files.3F" name="Why_am_I_asked_to_choose_a_program_to_open_SVG_files.3F">为什么我们被要求选择一个程序以打开SVG文件？</h3> + +<p>When you try to load SVG files from some websites you may get a dialogue asking you "What should Firefox do with this file?". This is either because your browser doesn't support SVG (you must have Mozilla Firefox 1.5 or newer), or because the webpage/server isn't correctly telling Mozilla that the file contains SVG. For example, webpages that embed SVG using the <code><object></code> or <code><embed></code> tags must have a 'type' attribute assigned with the correct SVG MIME type of "image/svg+xml". If the MIME type specified is wrong (for example image/svg-xml) Mozilla won't recognise it. If that isn't the problem, then it may be that the server hosting the website is misconfigured. For information on configuring servers for SVG see <a class="external" href="http://jwatt.org/svg/authoring/#server-configuration">this link</a>.</p> + +<h3 id="Why_am_I_asked_to_install_a_plug-in_to_view_SVG_files.3F" name="Why_am_I_asked_to_install_a_plug-in_to_view_SVG_files.3F">为什么我被要求安装一个插件以查看SVG文件？</h3> + +<p>This is probably because there is an <code><embed></code> or <code><object></code> tag in the HTML page and its 'type' attribute is set to the wrong MIME type. The SVG MIME type is <code>image/svg+xml</code> (not <code>image/svg-xml</code> or anything else for that matter). Correct this mistake or ask the document maintainer to correct it.</p> + +<h3 id="How_should_I_report_bugs_in_Mozilla_SVG.3F" name="How_should_I_report_bugs_in_Mozilla_SVG.3F">我需要如何在Mozilla SVG中报告bug？</h3> + +<p>If you discover any problems with our SVG implementation that you think we should know about then we'd like to hear from you. To help us make the best use of our time, please first search in the <a class="link-https" href="https://bugzilla.mozilla.org/query.cgi?product=Core&component=SVG">SVG component of our bug database</a> to check that the issue hasn't already been reported. If you can't find a matching bug please <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component=SVG">file a new SVG bug report</a>, preferably attaching a (very small!) SVG file that demonstrates the bug. If you have any problems with the bug database feel free to <a href="#Original_Document_Information">contact contact us</a>.</p> + +<h3 id="Can_I_use_a_plugin_for_SVG_instead_of_Mozilla.27s_native_support.3F" name="Can_I_use_a_plugin_for_SVG_instead_of_Mozilla.27s_native_support.3F">我可以使用一个SVG的插件代替Mozilla的原生支持吗？</h3> + +<p>Individuals can choose to use a plugin to view SVG in Mozilla on their own computers, but there is no way for SVG content authors to make Mozilla use a plugin when people view the SVG files on their website. The native SVG support must be turned off before Mozilla will look to see if there's an SVG plugin installed. This is done by toggling a hidden user configuration preference (pref). To access the pref type <code>about:config</code> into the URL bar, then type <code>svg.enabled</code> into the Filter field. When you double click on the pref you will see its value change to and from true/false, turning the native support on/off.</p> + +<h3 id="How_does_Mozilla.27s_SVG_implementation_compare_to_Adobe.27s.3F" name="How_does_Mozilla.27s_SVG_implementation_compare_to_Adobe.27s.3F">Mozilla的SVG编译器与Adobe的编译器相比如何？</h3> + +<p>Mozilla's native implementation is less complete than Adobe SVG Viewer's in general. There are major features such as filters and SMIL based animation that have still to be implemented in Mozilla. However, Mozilla's implementation already supports some things that Adobe's lacks, particularly parts of the XML and SVG DOMs. For example we support SVG exceptions and SVGTransform objects.</p> + +<h3 id="How_do_you_install_Adobe.27s_SVG_Viewer_in_Mozilla.3F" name="How_do_you_install_Adobe.27s_SVG_Viewer_in_Mozilla.3F">你该如何在Mozilla中安装Adobe的SVG浏览器？</h3> + +<p>The SVG project is about Mozilla's native implementation of SVG, not Adobe/Corel/whoever's plug-in. However, we might as well answer this question to save you searching for this information elsewhere. See <a class="external" href="http://plugindoc.mozdev.org/windows1.html#AdobeSVG">these install instructions</a> on mozdev.org. It's also useful to know that you can check whether Mozilla has recognised your plug-ins by typing 'about:plugins' into your address bar (linking to that doesn't work for security reasons).</p> + +<h3 id="Does_Mozilla_work_with_Corel.27s_SVG_plug-in.3F" name="Does_Mozilla_work_with_Corel.27s_SVG_plug-in.3F">Mozilla可以与Corel的SVG插件共事吗？</h3> + +<p>There are reports that it does, but that it's slower than the Adobe plug-in. See <a class="external" href="http://plugindoc.mozdev.org/windows1.html#CorelSVG">this document</a> for information on how to install it.</p> + +<h3 id="Can_you_have_both_native_SVG_support_and_an_SVG_plug-in_installed.3F" name="Can_you_have_both_native_SVG_support_and_an_SVG_plug-in_installed.3F">原生SVG支持以及SVG插件安装可以共存的吗？</h3> + +<p>Yes. If the plug-in works with the equivalent non-SVG version of Mozilla, then it should also work in the SVG enabled version. To be able to use it, you must make sure the <a class="external" href="http://weblogs.mozillazine.org/tor/archives/2005/02/important_svg_b.html">svg.enabled</a> pref is set to false. This will disable the native SVG support.</p> + +<h3 id="Does_the_.3Cembed.3E_tag_support_SVG_documents.3F" name="Does_the_.3Cembed.3E_tag_support_SVG_documents.3F"><code><embed></code> 标签支持SVG文档吗？</h3> + +<p>Yes. As of 2004-11-11, builds with native SVG support will use the native support to render SVG documents that are embeded by reference into an HTML document using the <code><embed></code> tag. Note that this capability was added to support legacy content. The <code><object></code> tag should be used in preference to the <code><embed></code> tag in new content whenever possible.</p> + +<p>The first milestone builds that will have this support will be SVG enabled builds of Firefox 1.5.</p> + +<h3 id="What_can_I_do_to_help_the_SVG_project.3F" name="What_can_I_do_to_help_the_SVG_project.3F">我可以为SVG项目做什么？</h3> + +<p>Okay so maybe this isn't such a frequently asked question, but if it was, just think how much further on with our SVG implementation we could be! We're always looking for help from anyone willing to lend a hand. If you're a C++ programmer interested in working on the SVG implementation, please <a href="#Original_Document_Information">contact us</a> and we'll be happy to help you get involved. Alternatively, if you're an SVG user you can help by testing the SVG enabled nightlies and filing bugs with <a class="external" href="http://wiki.mozilla.org/MozillaQualityAssurance:Triage#How_to_Really.2C_Really_Help_Developers_on_Bugs_--_Minimal_Testcases">minimal testcases</a> whenever you encounter a problem. If you can't do either of these things you should still feel free to ask us friendly questions and give us constructive feedback.</p> + +<h3 id="Who.27s_currently_working_on_what.3F" name="Who.27s_currently_working_on_what.3F">当前在做什么工作？</h3> + +<p>Other than reviewing patches and fixing the occassional bug, <a class="link-mailto" href="mailto:alex@croczilla.com">Alex</a> is currently taking a break from active SVG development to concentrate on 'real work' and cool stuff like <a class="external" href="http://croczilla.com/xtf/">XTF</a> and <a class="external" href="http://croczilla.com/jssh/">JSSh</a>. <a class="link-mailto" href="mailto:tor@acm.org">Tim</a> is working on implementing <code><filter></code> and working on items that need to be done before turning on SVG by default. After recently implementing gradients, <a class="link-mailto" href="mailto:scootermorris@comcast.net">Scooter</a> is working on fixing some issues that remain outstanding and fixing <code><switch></code>. <a class="link-mailto" href="mailto:jonathan.watt@strath.ac.uk">Jonathan</a> is working on various bugs, especially those that need to be fixed before SVG can be enabled in the official builds. <a class="link-mailto" href="mailto:daa@rm.incc.net">David</a> continues to create SVG enabled nightlies and answer build related questions as he has done for some time. Finally, occasional fixes are provided by other Mozilla hackers.</p> + +<h3 id="How_can_I_get_in_contact_with_you.3F" name="How_can_I_get_in_contact_with_you.3F">怎样和你联系？</h3> + +<p>The best way to get in contact with us is to join the <a class="link-irc" href="irc://irc.mozilla.org/svg">#svg channel</a> on mozilla.org's IRC server. This is where most of us hang out to discuss issues relating to the SVG implementation. If you don't have an IRC client then install <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/16">ChatZilla</a> into Mozilla/Mozilla Firefox (note it may already be built in). Clicking on the link above should then take you straight there. If you'd prefer to contact us by email you can send an email to our newsgroup <a class="link-news" href="news://news.mozilla.org/mozilla.dev.tech.svg">mozilla.dev.tech.svg</a> which is <a class="external" href="http://groups.google.com/group/mozilla.dev.tech.svg/topics">archived here</a>. Alternatively you can email any of us directly of course (see the preceeding question for our email addresses).</p> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): <a class="link-mailto" href="mailto:jwatt@jwatt.org">Jonathan Watt</a></li> + <li>Last Updated Date: November 6, 2006</li> + <li>Copyright Information: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li> +</ul> +</div> + +<p>{{ languages( { "ja": "ja/Mozilla_SVG_Project_FAQ" } ) }}</p> diff --git a/files/zh-cn/web/svg/index.html b/files/zh-cn/web/svg/index.html new file mode 100644 index 0000000000..e4e6ba60ac --- /dev/null +++ b/files/zh-cn/web/svg/index.html @@ -0,0 +1,109 @@ +--- +title: SVG +slug: Web/SVG +tags: + - 2D图形 + - SVG + - Web + - 参考 + - 响应式网页设计 + - 矢量图形 +translation_of: Web/SVG +--- +<p>{{SVGRef}}</p> + +<div class="callout-box"><strong><a href="/zh-CN/docs/Web/SVG/Tutorial">准备开始吧！</a></strong><br> +这篇教程会帮助你开始使用 SVG。</div> + +<p><span class="seoSummary"><strong>可缩放矢量图形</strong>（<strong>Scalable Vector Graphics，SVG</strong>），是一种用于描述二维的<a class="external" href="https://zh.wikipedia.org/wiki/%E7%9F%A2%E9%87%8F%E5%9B%BE%E5%BD%A2">矢量图形</a>，基于 <a href="/zh-CN/docs/XML_%E4%BB%8B%E7%BB%8D">XML</a> 的标记语言。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和<a href="/zh-CN/docs/Learn/CSS">CSS</a>，<a href="/zh-CN/docs/MDN/Doc_status/API/DOM">DOM</a>，<a href="/zh-CN/docs/Web/JavaScript">JavaScript</a>和<a href="/zh-CN/docs/Web/SVG/SVG_animation_with_SMIL">SMIL</a>等其他网络标准无缝衔接。</span>本质上，SVG 相对于图像，就好比 <a href="/zh-CN/docs/Web/HTML">HTML</a> 相对于文本。</p> + +<p>SVG 图像及其相关行为被定义于 <a href="/zh-CN/docs/XML_%E4%BB%8B%E7%BB%8D">XML</a> 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。</p> + +<p>和传统的点阵图像模式，像{{Glossary("JPEG")}}和{{Glossary("PNG")}}不同，SVG格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容。</p> + +<p>SVG 是由<a href="https://www.w3.org/">万维网联盟（W3C）</a>自 1999 年开始开发的开放标准。</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="文档">文档</h2> + +<dl> + <dt><a href="/zh-CN/docs/Web/SVG/Element" title="SVG/Element">SVG 元素参考</a></dt> + <dd>了解所有 SVG 元素的细节。</dd> + <dt><a href="/zh-CN/docs/Web/SVG/Attribute" title="SVG/Attribute">SVG 属性参考</a></dt> + <dd>了解所有 SVG 属性的细节.</dd> + <dt><a href="/zh-CN/docs/Gecko_DOM_Reference#SVG_interfaces" title="Gecko_DOM_Reference#SVG_interfaces">SVG DOM 接口参考</a></dt> + <dd>了解有关 SVG DOM API 的全部细节。</dd> + <dt><a href="/zh-CN/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">在 HTML 内容中应用 SVG 效果</a></dt> + <dd>SVG与 {{Glossary("HTML")}}、{{Glossary("CSS")}} 和 {{Glossary("JavaScript")}}一起工作，使用 SVG <a href="/zh-CN/docs/SVG_In_HTML_Introduction">增强常规 HTML 页面和web 应用</a>。</dd> + <dt>SVG 与 Mozilla</dt> + <dd>SVG 在 Mozilla 产品中的实现情况. + <ul> + <li><a href="/zh-CN/docs/Web/SVG/Firefox对SVG_1.1的支持" title="SVG_in_Firefox">Firefox 中 SVG 实现情况</a></li> + <li><a href="/zh-CN/docs/Web/SVG/Tutorial" title="SVG_in_Firefox">SVG 教程</a></li> + <li><a href="/zh-CN/docs/SVG_In_HTML_Introduction" title="SVG_In_HTML_Introduction">在 HTML 中使用 SVG</a></li> + </ul> + </dd> +</dl> + +<p><span class="alllinks"><a href="/zh-CN/docs/tag/SVG" title="tag/SVG">查看全部...</a></span></p> + +<h2 class="Community" id="社区">社区</h2> + +<ul> + <li>浏览 Mozilla 论坛… {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> +</ul> + +<h2 class="Tools" id="工具">工具</h2> + +<ul> + <li><a href="https://github.com/w3c/svgwg/wiki/Testing">SVG 测试套件</a></li> + <li><a href="https://validator.w3.org/#validate_by_input">SVG 语法校验工具</a></li> + <li><a href="/zh-CN/docs/tag/SVG:Tools" title="tag/SVG:Tools">更多工具…</a></li> + <li>其他资源：<a href="/zh-CN/docs/XML_%E4%BB%8B%E7%BB%8D" title="XML">XML</a>、<a href="/zh-CN/docs/CSS" title="CSS">CSS</a>、<a href="/zh-CN/docs/Web/API/Document_Object_Model" title="DOM">DOM</a>、<a href="/zh-CN/docs/HTML/Canvas" title="HTML/Canvas">Canvas</a></li> +</ul> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="实例">实例</h2> + +<ul> + <li>Google <a href="http://maps.google.com">地图</a> (route overlay) & <a href="http://docs.google.com">文档</a> (电子表格图表)</li> + <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG 气泡菜单</a></li> + <li><a href="http://jwatt.org/svg/authoring/">SVG 创作指导方针</a></li> + <li><a href="/zh-CN/docs/Mozilla_SVG_Project" title="Mozilla_SVG_Project">Mozilla SVG 项目</a>概览</li> + <li>SVG 与 Mozilla 之间的<a href="/zh-CN/docs/Web/SVG/FAQ" title="SVG/FAQ">常见问题</a></li> + <li>SVG Open 2009 上 <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml" title="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG 和 Mozilla</a> 主题的幻灯片和范例</li> + <li><a href="https://developer.mozilla.org/en-US/docs/SVG/SVG_as_an_Image">SVG as an image</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/SVG/SVG_animation_with_SMIL">SVG animation with SMIL</a></li> + <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG 艺术画廊</a></li> + <li><a href="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg">Lion</a>、<a href="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg">Butterfly</a> & <a href="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg">Tiger</a></li> + <li>更多实例（<a href="http://croczilla.com/bits_and_pieces/svg/samples" title="http://croczilla.com/bits_and_pieces/svg/samples">SVG Samples croczilla.com</a>、<a href="http://www.carto.net/papers/svg/samples/">carto.net</a>）</li> +</ul> + +<h3 id="动画与交互">动画与交互</h3> + +<p> 正如 HTML 一样，SVG 也有可被 JavaScript 访问的文档对象模型（DOM）和事件。这允许开发者创建丰富的动画和可交互的图像。</p> + +<ul> + <li>一些真正赏心悦目的 SVG <a href="http://svg-wow.org/" title="http://svg-wow.org/">svg-wow.org</a></li> + <li>一个能为浏览器添加 {{Glossary("SMIL")}} 子集支持的 Firefox 扩展（<a href="http://schepers.cc/grafox/">Grafox</a>）</li> + <li>交互式<a href="http://people.mozilla.com/~vladimir/demos/photos.svg">图片</a>操作</li> + <li>当 <a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> 使用 SVG 的 <code>foreignObject</code></li> + <li>动画<a href="http://lab.vodafone.com/vienna/">艺术</a></li> +</ul> + +<h3 id="地图、图表、游戏以及3D体验">地图、图表、游戏以及3D体验</h3> + +<p> 少许的 SVG 即可极大地丰富网页内容，下面是一些大量使用 SVG 的范例。</p> + +<ul> + <li><a href="http://www.codedread.com/yastframe.php">Tetris</a></li> + <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li> + <li><a href="http://www.carto.net/papers/svg/us_population/index.html">US population map</a></li> + <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> & <a href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a></li> + <li><a href="http://jvectormap.com/">jVectorMap</a>（交互式数据可视化地图）</li> + <li><a href="http://jointjs.com">JointJS</a>（JavaScript 图表库）</li> +</ul> +</div> +</div> diff --git a/files/zh-cn/web/svg/linking/index.html b/files/zh-cn/web/svg/linking/index.html new file mode 100644 index 0000000000..ca96218a39 --- /dev/null +++ b/files/zh-cn/web/svg/linking/index.html @@ -0,0 +1,48 @@ +--- +title: Linking +slug: Web/SVG/Linking +translation_of: Web/SVG/Linking +--- +<div>SVG标签内的"a"元素上的“target”属性在Mozilla Firefox 1.5中不起作用。使用标记将SVG文档嵌入父HTML文档时：</div> + +<p>page1.html:</p> + +<pre class="brush: html;"><html> + <body> + <p>This is a SVG button:</p> + <object width="100" height="50" type="image/svg+xml" data="button.svg"/> + </body> +</html> +</pre> + +<p>button.svg:</p> + +<pre class="brush: xml"><?xml version="1.1" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <a xlink:href="page2.html" target="_top"> + <g> + <!-- button graphical elements here --> + </g> + </a> +</svg> +</pre> + +<p>规范规定，当单击按钮图形时，浏览器应导航到HTML document page2.HTML。但是，target不能与Mozilla在Firefox 1.5中实现的SVG<a>元素协同工作。（问题将在Firefox2.0中解决。）</p> + +<p>无论如何，Moz SVG中的结果行为是page2.html将被加载到SVG按钮所在的帧中（即，您现在将page2.html嵌入到page1.html中的100x50像素帧中）。</p> + +<p>要解决这个问题，需要一点难看的JavaScript编程：</p> + +<p>button.svg:</p> + +<pre class="brush: xml;"><?xml version="1.1" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <g onclick="top.document.href='page2.html'" cursor="pointer"> + <!-- button graphical elements here --> + </g> +</svg> +</pre> + +<h2 id="例子">例子</h2> + +<p>有关此解决方案在工作中的示例，请参见www.codedeard.com。</p> diff --git a/files/zh-cn/web/svg/namespaces_crash_course/index.html b/files/zh-cn/web/svg/namespaces_crash_course/index.html new file mode 100644 index 0000000000..848880e11b --- /dev/null +++ b/files/zh-cn/web/svg/namespaces_crash_course/index.html @@ -0,0 +1,190 @@ +--- +title: Namespaces Crash Course +slug: Web/SVG/Namespaces_Crash_Course +translation_of: Web/SVG/Namespaces_Crash_Course +--- +<p>作为 <a href="/en-US/docs/Glossary/XML" title="en-US/docs/Glossary/XML">XML</a> 的一个方言，<a href="/en-US/docs/Web/SVG" title="en-US/docs/Web/SVG">SVG</a> 需要在一个命名空间内（is namespaced）。理解命名空间的概念，以及在你打算编辑SVG内容时，命名空间如何使用，是很重要的。SVG查看器的版本早于Firefox 1.5的发布的，都几乎没有注意命名空间的问题， but they are essential to multi-XML dialect supporting user agents such as <a href="/en-US/docs/Mozilla/Gecko" title="en-US/docs/Mozilla/Gecko">Gecko</a>-based browsers which must be very strict. 现在，花一点时间来理解命名空间，这会让你以后避免各种麻烦。</p> + +<h3 id="背景">背景</h3> + +<p>W3C的长期目标是使不同类型的XML基本内容可以混合在同一个XML文件中。例如, SVG 和 <a href="/en-US/docs/Web/MathML" title="en-US/docs/Web/MathML">MathML</a> 可以直接并入基于XHTML的科学文档中。 能够混合这样的内容类型有很多优点，但也需要解决一个非常实际的问题。</p> + +<p>合理来说, 每个XML语言定义其规范中描述的标记标签名称的含义。 在单个XML文档中混合来自不同XML方言的内容的问题是，由一个方言定义的标签可能与另一个方言定义的标签具有相同的名称。例如，XHTML和SVG都有一个<title>标签。专业使用者如何区分两者？其实当XML内容是它所知道的，而不仅仅是一个没有意义的包含任意标签名的XML文件时，专业使用者如何告诉它？</p> + +<p>与大众想法相反, 这个问题的答案不是“可以从DOCTYPE声明中得知”。DTDs的设计不考虑混合内容，而过去尝试创建混合内容的DTDs现在被认为是失败的。XML和一些XML方言 (包括SVG), 不要求<code>DOCTYPE</code> 声明，SVG 1.2 更不会有。DOCTYPE声明（通常）与单个内容类型文件中的内容匹配的事实只是巧合的。DTDs仅用于验证，而不是内容的识别。使用其DOCTYPE声明欺骗和标识XML内容的使用者会造成危害（User agents that cheat and identify XML content using its DOCTYPE declaration cause harm）。</p> + +<p>问题的真正答案是，XML内容通过给明确的标签显示“命名空间声明”来告诉使用者哪个方言标签名称属于哪个。</p> + +<h3 id="Declaring_namespaces" name="Declaring_namespaces">声明命名空间</h3> + +<p>所以这些命名空间声明是什么样的呢，并且在什么地方用他们，如下的例子所示：</p> + +<pre><svg xmlns="http://www.w3.org/2000/svg"> + <!-- more tags here --> +</svg> + +</pre> + +<p>命名空间声明是通过xmlns attribute提供的。xmlns属性意味着这个<svg>标签和它的子节点都属于<span class="nowiki">'http://www.w3.org/2000/svg'</span> 这个SVG命名空间。注意，这个命名空间声明只需要在根节点上声明一次。这个声明定义了默认的命名空间，所以用户代理知道所有的<svg>标签的子标签也属于相同的命名空间。用户代理如果能识别这个命名空间就决定他们如何处理这个标记。</p> + +<p>请注意，命名空间仅仅只是一些字符串，所以SVG上那些看起来像URI的命名空间并不重要。因为URIs的唯一性从而被广泛使用，它的本意并不是要“链接”到某个地址。（实际上URIs被如此频繁地使用是“命名空间 URI"普遍使用而不是”命名空间的名字“被使用。）</p> + +<h4 id="Redeclaring_the_default_namespace" name="Redeclaring_the_default_namespace">重新定义默认命名空间</h4> + +<p>如果根节点的所有子节点也被定义为默认命名空间，那么你如何混合使用另一种命名空间呢？很简单，你仅仅只需重新定义默认命名空间即可。这里是一个简单的例子。</p> + +<pre><html xmlns="http://www.w3.org/1999/xhtml"> + <body> + <!-- 在这里放置一些 XHTML 标签 --> + <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"> + <!-- 在这里放置一些 SVG 标签 --> + </svg> + <!-- 在这里放置一些 XHTML 标签 --> + </body> +</html></pre> + +<p>在这个例子中根节点<code><html></code> 的 <code>xmlns</code> 属性定义了XHTML为默认命名空间。结果就是它和它所有的子节标签，除了 <code><svg></code> 标签，都被用户代理解释为属于XHTML命名空间。 <code><svg></code> 标签拥有它自己的<code>xmlns</code>属性，通过重新定义默认的命名空间，告诉用户代理 <code><svg></code> 标签以及他所包含的标签（除非他们也重新定义了默认名称空间）属于SVG.</p> + +<p>看到没，命名空间其实没有那么难以理解。</p> + +<h4 id="Declaring_namespace_prefixes" name="Declaring_namespace_prefixes">Declaring namespace prefixes</h4> + +<p>XML dialects not only define their own tags, but also their own attributes. By default, attributes don't have a namespace at all, and are only known to be unique because they appear on an element that itself has a unique name. However, sometimes it is necessary to define attributes so that they can be reused on many different elements and still be considered to be the same attribute, independently of the element with which they are used. A very good example of this is the <code>href</code> attribute defined by the XLink specification. This attribute is commonly used by other XML dialects as a means to link to external resources. But how do you tell the user agent which dialect the attribute belongs to, in this case XLink? Consider the following example.</p> + +<pre><svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script xlink:href="cool-script.js" type="text/ecmascript"/> +</svg> +</pre> + +<p>This example has the rather unusual looking attribute <code>xmlns:xlink</code>. As you may guess from the first 'xmlns' part, this is another namespace declaration. However, instead of setting the default namespace, this namespace declaration sets the namespace for something called a "namespace prefix". In this case, we have chosen to use the prefix <code>xlink</code> (the second part) since the prefix will be used to tell the user agent about attributes that belong to XLink.</p> + +<p>As their name suggests, namespace prefixes are used to prefix attribute names and tag names. This is done by putting the namespace prefix and a colon before the attribute name as shown on the <code><script></code> tag in the example above. This tells the user agent that that particular attribute belongs to the namespace assigned to the namespace prefix (XLink), and is an attribute that can be used with the same meaning on other tags.</p> + +<p>Note that it is an XML error to use a prefix that hasn't been bound to a namespace name. The binding created by the <code>xmlns:xlink</code> attribute in the example above is absolutely essential if the <code>xlink:href</code> attribute isn't to cause an error. This XLink attribute is also frequently used in SVG on the <code><a></code>, <code><use></code> and <code><image></code> tags among others, so it's a good idea to always include the XLink declaration in your documents.</p> + +<p>As an aside, it's useful to know that namespace prefixes can also be used for tag names. This tells the user agent that that particular tag (but not its children this time!) belongs to the namespace assigned to the prefix. Knowing this will save you some confusion if you come across markup like that in the following example:</p> + +<pre><html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> + <body> + <h1>SVG embedded inline in XHTML</h1> + <svg:svg width="300px" height="200px"> + <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/> + </svg:svg> + </body> +</html> +</pre> + +<p>Note that because a namespace prefix is used for the <code><svg:svg></code> tag and its child <code><svg:circle></code>, it wasn't necessary to redeclare the default namespace. In general though it is better to redeclare the default namespace rather than prefix lots of tags in this way.</p> + +<h3 id="Scripting_in_namespaced_XML" name="Scripting_in_namespaced_XML">Scripting in namespaced XML</h3> + +<p>Namespaces affect not only markup, but also scripting. If you write scripts for namespaced XML such as SVG, read on.</p> + +<p>The <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">DOM Level 1</a> recommendation was created before the <a class="external" href="http://www.w3.org/TR/REC-xml-names/">original Namespaces in XML</a> recommendation was released; therefore, DOM1 isn't namespace aware. This causes problems for namespaced XML such as SVG. To resolve these problems, <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM Level 2 Core</a> added namespace aware equivalents of all the applicable DOM Level 1 methods. When scripting SVG, <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">it is important to use the namespace aware methods</a>. The table below lists the DOM1 methods that shouldn't be used in SVG, along with their equivalent DOM2 counterparts that should be used instead.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>DOM1 (don't use)</th> + <th>DOM2 (use these instead!)</th> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createAttribute">createAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrAttrNS">createAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createElement">createElement</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrElNS">createElementNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttributeNode">getAttributeNode</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">getAttributeNodeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">getAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">getAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getElementsByTagName">getElementsByTagName</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">getElementsByTagNameNS</a> (also <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">added to Element</a>)</td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getNamedItem">getNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getNamedItemNS">getNamedItemNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#">hasAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">hasAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">removeAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">removeAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeNamedItem">removeNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-removeNamedItemNS">removeNamedItemNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">setAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">setAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">setAttributeNode</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">setAttributeNodeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setNamedItem">setNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-setNamedItemNS">setNamedItemNS</a></td> + </tr> + </tbody> +</table> + +<p>The first argument for all the DOM2 namespace aware methods must be the namespace name (also known as the namespace URI) of the element or attribute in question. For SVG <strong>elements</strong> this is <span class="nowiki">'http://www.w3.org/2000/svg'</span>. However, note carefully: the <a class="external" href="http://www.w3.org/TR/xml-names11/#defaulting">Namespaces in XML 1.1</a> recommendation states that the namespace name for attributes without a prefix does not have a value. In other words, although the attributes belong to the namespace of the tag, you do not use the tag's namespace name. Instead, <strong>you must use null as the namespace name for unqualified (prefixless) attributes</strong>. So, to create an SVG <code>rect</code> <em>element</em> using <code>document.createElementNS()</code>, you must write:</p> + +<pre>document.createElementNS('http://www.w3.org/2000/svg', 'rect'); +</pre> + +<p>But to retrieve the value of the <code>x</code> <em>attribute</em> on an SVG <code>rect</code> element, you must write:</p> + +<pre class="eval">rect.getAttributeNS(<strong>null</strong>, 'x'); +</pre> + +<p>Note that this isn't the case for attributes <em>with</em> a namespace prefix (attributes that don't belong to the same XML dialect as the tag). Attributes such as the <code>xlink:href</code> attribute require the namespace name that was assigned to that prefix (<span class="nowiki">http://www.w3.org/1999/xlink</span> for XLink). Hence to get the value of the <code>xlink:href</code> attribute of an <code><a></code> element in SVG you would write:</p> + +<pre>elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href'); +</pre> + +<p>For setting attributes that have a namespace, it is recommended (but not required) that you also include their prefix in the second argument so that the DOM can later be more easily converted back to XML (if for instance you want to send it back to the server). For example:</p> + +<pre>elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg'); +</pre> + +<p>As a final example, here's a demonstration of how you should dynamically create an <code><image></code> element using script:</p> + +<pre>var SVG_NS = 'http://www.w3.org/2000/svg'; +var XLink_NS = 'http://www.w3.org/1999/xlink'; +var image = document.createElementNS(SVG_NS, 'image'); +image.setAttributeNS(null, 'width', '100'); +image.setAttributeNS(null, 'height', '100'); +image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png'); +</pre> + +<h3 id="Conclusion" name="Conclusion">Conclusion</h3> + +<p>Make sure you always declare the namespaces you use in your XML files. If you don't, user agents such as Firefox won't recognize your content and will simply show the XML markup or inform the user that there's an error in the XML. It's a good idea to use a template that includes all the commonly used namespace declarations when creating new SVG files. If you don't already have one, make one up starting with the following code:</p> + +<pre><svg version="1.1" + baseProfile="full" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:ev="http://www.w3.org/2001/xml-events"> +</svg> +</pre> + +<p>Even if you don't use all those namespaces in a particular document, there's no harm in including the namespace declarations. It may save you from some annoying errors if you end up adding content from one of the unused namespaces at a later date.</p> + +<h3 id="A_full_example" name="A_full_example">A full example</h3> + +<p>For a full example see <a href="/en-US/docs/Web/SVG/Namespaces_Crash_Course/Example">SVG: Namespaces Crash Course: Example</a>.</p> diff --git a/files/zh-cn/web/svg/svg_1.1_support_in_firefox/index.html b/files/zh-cn/web/svg/svg_1.1_support_in_firefox/index.html new file mode 100644 index 0000000000..974ac82527 --- /dev/null +++ b/files/zh-cn/web/svg/svg_1.1_support_in_firefox/index.html @@ -0,0 +1,775 @@ +--- +title: Firefox对SVG 1.1的支持 +slug: Web/SVG/SVG_1.1_Support_in_Firefox +translation_of: Web/SVG/SVG_1.1_Support_in_Firefox +--- +<p>你可以在 <a href="http://www.w3.org/Graphics/SVG/Test/20061213/">W3C SVG test suite</a>找到一些基础的SVG语法和用法的例子</p> + +<div class="note"> +<p><strong>注意:</strong> As of {{Gecko("2.0")}}, Gecko now supports SVG animation using SMIL. See <a href="/en-US/docs/SVG/SVG_animation_with_SMIL" title="SVG/SVG animation with SMIL">SVG animation with SMIL</a> for a brief overview. Full documentation for SVG is forthcoming. Someday.</p> +</div> + +<h2 id="元素实现状态">元素实现状态</h2> + +<p><a href="http://www.w3.org/TR/SVG11/">SVG 1.1</a> 元素概览以及当前的支持状态</p> + +<table class="standard-table" style="border-collapse: separate;"> + <tbody> + <tr> + <th>元素</th> + <th>Notes</th> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Structure Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td> + <td> + <ul> + <li>已实现</li> + <li><code>currentScale</code> and <code>currentTranslate</code> DOM attributes are implemented, but there is no pan and zoom user interface.</li> + <li>SVGSVGElement + <ul> + <li>Unimplemented attributes: contentScriptType, contentStyleType, viewport, currentView</li> + <li>Unimplemented bindings: getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll</li> + <li>Recently implemented bindings: + <ul> + <li>getElementById {{gecko_minversion_inline("11")}}, useCurrentView {{gecko_minversion_inline("15")}}</li> + </ul> + </li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td> + <td> + <ul> + <li>已实现</li> + <li>Only stored in the DOM, no user interface.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td> + <td> + <ul> + <li>已实现</li> + <li>The <code>title</code> is displayed as a tooltip when the mouse hovers over the SVG object.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td> + <td> + <ul> + <li>已实现</li> + <li>Only stored in the DOM, no user interface.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td> + <td> + <ul> + <li>已实现</li> + <li>Doesn't completely follow <svg:use> cascading rules ({{Bug(265894)}}).</li> + <li>Doesn't deliver events to a SVGElementInstance tree ({{Bug(265895)}}).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Image Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Style Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td> + <td> + <ul> + <li>已实现</li> + <li>SVGPathElement Interface + <ul> + <li>Unimplemented attributes: normalizedPathSegList, animatedNormalizedPathSegList</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/text.html#text-mod">Text Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td> + <td> + <ul> + <li>已实现</li> + <li>Various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical)</li> + <li>Recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration {{gecko_minversion_inline("25")}}</li> + <li>SVGTextElement + <ul> + <li>Recently imlemented bindings: selectSubString {{gecko_minversion_inline("25")}}</li> + <li>Recently implemented attributes: textLength, lengthAdjust {{gecko_minversion_inline("25")}}</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td> + <td> + <ul> + <li>已实现</li> + <li>Various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical)</li> + <li>Recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration {{gecko_minversion_inline("25")}}</li> + <li>SVGTSpanElement + <ul> + <li>Recently implemented bindings: selectSubString{{gecko_minversion_inline("25")}}</li> + <li>Recently implemented attributes: textLength, lengthAdjust {{gecko_minversion_inline("25")}}</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td style="background-color: rgb(204, 204, 204);"><a href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td> + <td style="background-color: rgb(204, 204, 204);"> + <ul> + <li>This feature, present in early draft of the spec, has been removed from it and is therefor not implemented ({{Bug(273171)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td> + <td> + <ul> + <li>已实现</li> + <li>Recently implemented bindings: selectSubString{{gecko_minversion_inline("25")}}</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: yellow;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td> + <td> + <ul> + <li>Implemented as tspans, no font features as of Gecko 2.0 ({{Bug(456286)}}, {{Bug(571808)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td> + <td> + <ul> + <li>未实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td> + <td> + <ul> + <li>未实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td> + <td> + <ul> + <li>未实现</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Marker Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Color Profile Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td> + <td> + <ul> + <li>Not implemented ({{Bug(427713)}}).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Gradient Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Pattern Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Clip Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Mask Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Filter Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td> + <td> + <ul> + <li>已实现</li> + <li>Of the pseudo-inputs, <code>SourceGraphic</code>, <code>SourceAlpha</code>, <code>FillPaint</code> {{gecko_minversion_inline("17")}} and <code>StrokePaint</code> {{gecko_minversion_inline("17")}} are implemented.</li> + <li>Use of an unimplemented pseudo-input or filter element will cause the filter to be ignored and the referring graphic to be drawn without any filter.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td> + <td> + <ul> + <li>已实现</li> + <li>Document fragments ({{bug(455986)}}) aren't supported in <svg:feImage>.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Cursor Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td> + <td> + <ul> + <li>Not implemented ({{Bug(177193)}}).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Hyperlinking Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td> + <td> + <ul> + <li>Only <code>xlink:href</code>, <code>xlink:show</code>, <code>xlink:target</code> and <code>xlink:title</code> attributes implemented.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/linking.html#view-mod">View Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td> + <td> + <ul> + <li>Implemented in Gecko 15.0 ({{Bug(512525)}}). {{gecko_minversion_inline("15.0")}}.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Scripting Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Animation Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td> + <td> + <ul> + <li>Not implemented ({{Bug(436296)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Font Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontElement" title="http://www.w3.org/TR/SVG11/fonts.html#FontElement">font</a></td> + <td> + <ul> + <li>Not implemented ({{Bug(119490)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td> + <td> + <ul> + <li>未实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td> + <td> + <ul> + <li>未实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td> + <td> + <ul> + <li>未实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td> + <td> + <ul> + <li>未实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td> + <td> + <ul> + <li>未实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td> + <td> + <ul> + <li>未实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td> + <td> + <ul> + <li>未实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td> + <td> + <ul> + <li>未实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td> + <td> + <ul> + <li>未实现</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td> + <td> + <ul> + <li>未实现</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Extensibility Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td> + <td> + <ul> + <li>已实现</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/zh-cn/web/svg/svg_animation_with_smil/index.html b/files/zh-cn/web/svg/svg_animation_with_smil/index.html new file mode 100644 index 0000000000..2f65b95392 --- /dev/null +++ b/files/zh-cn/web/svg/svg_animation_with_smil/index.html @@ -0,0 +1,141 @@ +--- +title: 使用 SMIL 的 SVG 动画 +slug: Web/SVG/SVG_animation_with_SMIL +tags: + - Firefox 4 + - Gecko 2.0 + - 动画 +translation_of: Web/SVG/SVG_animation_with_SMIL +--- +<div class="note"><strong>注意：</strong>真正的SVG文档未来有望面世。在当下，示例将引导你入门，你可以查看<a href="/en/SVG/SVG_animation_with_SMIL#See_also" title="en/SVG/SVG animation with SMIL#See also">specification and other documents</a> 以了解语法详情。</div> + +<p>Chrome 45弃用了SMIL，以利于CSS动画以及Web动画。</p> + +<p>Firefox 4 利用<a class="external" href="http://www.w3.org/TR/REC-smil" title="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL)引入了对动画SVG的支持。SMIL允许你：</p> + +<ul> + <li>变动一个元素的数字属性（x、y……）</li> + <li>变动变形属性（translation或rotation）</li> + <li>变动颜色属性</li> + <li>物件方向与运动路径方向同步</li> +</ul> + +<p>只要在一个SVG元素内添加一个SVG元素比如说<span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }}，就能实现让元素动起来。下面是四个不同方法的示例：</span></p> + +<p>自从Chrome 45，SMIL动画被弃用了，以利于CSS动画和Web动画。</p> + +<h2 id="一个元素的动画属性">一个元素的动画属性</h2> + +<p><span class="author-g-shbl2alwmr0wm7ko">下面的示例变动了一个圆的cx属性。为了做到这，我们在{{ SVGElement("circle") }} 元素里面添加了一个{{ SVGElement("animate") }}元素。对{{ SVGElement("animate") }} 元素来说，重要的属性有：</span></p> + +<dl> + <dt><strong>attributeName</strong></dt> + <dd>变动的属性的属性名。</dd> + <dt>from</dt> + <dd>变动的初始值。</dd> + <dt>to</dt> + <dd>变动的终值</dd> + <dt>dur</dt> + <dd>动画的持续时间（举个例子，写“5s”代表5秒表）</dd> +</dl> + +<p>如果你想在同一个元素里变动更多的属性，只要添加更多的{{ SVGElement("animate") }}元素。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Attribute Animation with SMIL</title> + </head> + <body> + <svg width="300px" height="100px"> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> + <animate attributeName="cx" from="0" to="100" dur="5s" repeatCount="indefinite" /> + </circle> + </svg> + </body> +</html></pre> + +<h2 id="让变形属性变化起来">让变形属性变化起来</h2> + +<p><span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animateTransform") }} </span>元素用于变动<span class="author-g-shbl2alwmr0wm7ko"><strong>transform</strong></span>属性。这个新元素是必要的，否则我们就不能让一个简单的、仅仅是一个数字的属性比如说<strong>x</strong>动起来。旋转属性看起来是这样的：<code>rotation(theta, x, y)</code>，这里<code>theta</code>是以角度数计量的角度，<code>x</code>和<code>y</code>都是绝对位置。在下面的示例中，将变动旋转的中心以及角度。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>SVG SMIL Animate with transform</title> + </head> + <body> + <svg width="300px" height="100px"> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1" transform="rotation"> + + <animateTransform + attributeName="transform" + begin="0s" + dur="20s" + type="rotate" + <!-- Rotate from 0 to 360 degrees, and move from 60 to 100 in the x direction. --> + from="0 60 60" + to="360 100 60" + <!-- Keep doing this until the drawing no longer exists. --> + repeatCount="indefinite" + /> + </rect> + </svg> + </body> +</html> +</pre> + +<h2 id="沿着路径动画">沿着路径动画</h2> + +<p><span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animateMotion") }}元素使一个元素的位置动起来，并顺着路径同步旋转。定义这个路径是与在{{ SVGElement("path") }}元素中定义路径的方法相同。你可以设置这个属性以定义对象是否与跟着路径的正切值旋转。</span></p> + +<h3 id="示例1：线性运动">示例1：线性运动</h3> + +<p>在这个示例中，一个蓝色的圆球在左右边界之间弹动，一次又一次，永不停息。这个动画是用{{ SVGElement("animateMotion") }}元素操纵的。在这个例子中，我们建立了一个由<strong>M</strong>oveTo命令和<strong>H</strong>orizontal-line命令、<strong>Z</strong>命令构成的路径，<strong>M</strong>oveTo命令命令指定动画路径的起始点，而<strong>H</strong>orizontal-line命令把圆移到右边300像素处，<strong>Z</strong>命令闭合路径，建立一个回到起始点的回路。把<strong>repeatCount</strong>属性的值设置为<code>indefinite</code>，我们指明了反复循环的动画，只要SVG图像还存在就会一直循环下去。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>SVG SMIL Animate with Path</title> + </head> + <body> + <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> + <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" /> + </circle> + </svg> + </body> +</html></pre> + +<p><a href="https://developer.mozilla.org/samples/svg/svganimdemo1.html">View live sample</a></p> + +<h3 id="示例2：曲线运动">示例2：曲线运动</h3> + +<p>略有改变的示例，其运动路径是一条曲线，沿着路径的方向运动。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>SVG SMIL Animate with Path</title> + </head> + <body> + <svg width="300px" height="100px"> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1"> + <animateMotion path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z" + dur="3s" repeatCount="indefinite" rotate="auto"> + </rect> + </svg> + </body> +</html></pre> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en/SVG" title="en/SVG">SVG</a></li> + <li><a class="external" href="http://www.w3.org/TR/SVG/animate.html" title="http://www.w3.org/TR/SVG/animate.html">SVG动画参考</a></li> + <li><a class="external" href="http://www.w3.org/TR/REC-smil" title="http://www.w3.org/TR/REC-smil">SMIL动画参考</a></li> +</ul> diff --git a/files/zh-cn/web/svg/svg_as_an_image/index.html b/files/zh-cn/web/svg/svg_as_an_image/index.html new file mode 100644 index 0000000000..80fbdbc59b --- /dev/null +++ b/files/zh-cn/web/svg/svg_as_an_image/index.html @@ -0,0 +1,158 @@ +--- +title: SVG 作为图片 +slug: Web/SVG/SVG_as_an_Image +tags: + - SVG + - 图像 + - 需要内容 +translation_of: Web/SVG/SVG_as_an_Image +--- +<p>SVG图像可以作为一种图片格式用在很多环境中。很多浏览器支持在下列环境中应用SVG图像：</p> + +<ul> + <li>HTML的{{HTMLElement("img")}} 元素或 {{HTMLElement("svg")}} 元素</li> + <li>CSS的{{cssxref("background-image")}}属性</li> +</ul> + +<h2 id="Gecko专有的环境">Gecko专有的环境</h2> + +<p>另外，Gecko 2.0 {{geckoRelease("2.0")}}引入了在以下环境中支持使用SVG：</p> + +<ul> + <li>CSS的{{cssxref("list-style-image")}}属性</li> + <li>SVG的{{SVGElement("image")}}元素</li> + <li>SVG的{{SVGElement("feImage")}}元素</li> + <li>Canvas的<a href="/zh-CN/docs/HTML/Canvas/Tutorial/Using_images#drawImage"><code>drawImage</code></a>函数</li> +</ul> + +<h3 id="局限">局限</h3> + +<p>如果SVG作为一个图像，出于安全目的，Gecko在SVG环境上作了一些限制：</p> + +<ul> + <li>禁用了<a href="/zh-CN/docs/JavaScript">JavaScript</a>。</li> + <li>外部源（比如说：图像、样式表）不能载入，然而行内源可以使用（利用<a href="/zh-CN/docs/DOM/BlobBuilder">BlobBuilder</a>对象URL或者data: URI属性）。</li> + <li>链接的{{cssxref(":visited")}}伪类不能呈现。</li> + <li>禁用了平台原生的小部件样式（基于操作系统主题）</li> +</ul> + +<p>注意上面的限制是对图像环境专有的；它们不能应用到直接看到的SVG上，也不能应用到嵌入在HTML的{{HTMLElement("iframe")}}元素、{{HTMLElement("object")}}元素和{{HTMLElement("embed")}}元素中的SVG上。</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("HTML5 W3C", "embedded-content-0.html#the-img-element", "SVG within <img> element")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>定义了{{HTMLElement("img")}}元素内部的SVG用法。</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Backgrounds", "#the-background-image", "SVG within 'background-image' CSS property")}}</td> + <td>{{Spec2("CSS3 Backgrounds")}}</td> + <td>定义了{{cssxref("background-image")}}属性中的SVG的用法。</td> + </tr> + <tr> + <td>{{SpecName("SVG and HTML")}}</td> + <td>{{Spec2("SVG and HTML")}}</td> + <td>定义了HTML和XHTML内部的SVG的行内用法。</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</th> + </tr> + <tr> + <td>in HTML {{HTMLElement("img")}}</td> + <td>4.0</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>9</td> + <td>9.0</td> + <td>4</td> + </tr> + <tr> + <td>in CSS background</td> + <td>4.0</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>9</td> + <td>9.5</td> + <td>5</td> + </tr> + <tr> + <td>in other contexts</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("2")}}</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>in HTML {{HTMLElement("img")}}</td> + <td>3.0</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.0</td> + <td>4.0</td> + </tr> + <tr> + <td>in CSS background</td> + <td>3.0</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.0</td> + <td>3.2<sup>[1]</sup></td> + </tr> + <tr> + <td>in other contexts</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Safari移动浏览器只有在CSS background中实现了对SVG的部分支持</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/SVG_In_HTML_Introduction">SVG in HTML introduction</a></li> +</ul> diff --git a/files/zh-cn/web/svg/tutorial/basic_shapes/index.html b/files/zh-cn/web/svg/tutorial/basic_shapes/index.html new file mode 100644 index 0000000000..08beec5314 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/basic_shapes/index.html @@ -0,0 +1,146 @@ +--- +title: 基本形状 +slug: Web/SVG/Tutorial/Basic_Shapes +tags: + - SVG + - 'SVG:教程' +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +<p> {{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p> + +<p>这里介绍的几个基本的形状用于大多数的SVG绘图。通过这些形状的命名可以知道其用途。给它们一些属性可以确定它们的位置和大小，但一个元素参考可能包含对元素属性的更准确和完整的描述，这里先不做介绍。然而，由于有些元素可以用在大多数SVG文档中，所以很有必要在这里介绍这部分元素。</p> + +<h2 id="Basic_shapes" name="Basic_shapes">基本形状</h2> + +<p>要想插入一个形状，你可以在文档中创建一个元素。不同的元素对应着不同的形状，并且使用不同的属性来定义图形的大小和位置。有一些形状因为可以由其他的形状创建而略显冗余， 但是它们用起来方便，可让我们的SVG文档简洁易懂。右边的图片展示了所有的基本形状。生成它们的代码如下：</p> + +<p> <img alt="" src="https://developer.mozilla.org/@api/deki/files/359/=Shapes.png"></p> + +<pre><?xml version="1.0" standalone="no"?> +<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> + <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> + + <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> + <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> + + <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/> + <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" + stroke="orange" fill="transparent" stroke-width="5"/> + + <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" + stroke="green" fill="transparent" stroke-width="5"/> + + <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> +</svg></pre> + +<div class="note"> +<p><strong>注意：</strong><code>stroke</code>、<code>stroke-width</code> <code>和fill</code> 等属性在后面的章节中解释。</p> +</div> + +<h3 id="Rectangles" name="Rectangles">矩形</h3> + +<p>就像你能联想到的，<code>rect</code>元素会在屏幕上绘制一个矩形 。其实只要6个基本属性就可以控制它在屏幕上的位置和形状。 上面的图例中最先展示了2个矩形，虽然这有点冗余了。右边的那个图形设置了rx和ry属性用来控制圆角。如果没有设置圆角，则默认为0。</p> + +<pre><rect x="10" y="10" width="30" height="30"/> +<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/></pre> + +<dl> + <dt>x</dt> + <dd>矩形左上角的x位置</dd> + <dt>y</dt> + <dd>矩形左上角的y位置</dd> + <dt>width</dt> + <dd>矩形的宽度</dd> + <dt>height</dt> + <dd>矩形的高度</dd> + <dt>rx</dt> + <dd>圆角的x方位的半径</dd> + <dt>ry</dt> + <dd>圆角的y方位的半径</dd> +</dl> + +<h3 id="Circle" name="Circle">圆形 </h3> + +<p>正如你猜到的，<code>circle</code>元素会在屏幕上绘制一个圆形。它只有3个属性用来设置圆形。</p> + +<pre><circle cx="25" cy="75" r="20"/></pre> + +<dl> + <dt>r</dt> + <dd>圆的半径</dd> + <dt>cx</dt> + <dd>圆心的x位置</dd> + <dt>cy</dt> + <dd>圆心的y位置</dd> +</dl> + +<h3 id="Ellipse" name="Ellipse">椭圆</h3> + +<p><a href="/en-US/Web/SVG/Element/ellipse" title="en-US/Web/SVG/Element/ellipse">Ellipse</a> 是<code>circle</code>元素更通用的形式，你可以分别缩放圆的x半径和y半径（通常数学家称之为长轴半径和短轴半径）。</p> + +<pre><ellipse cx="75" cy="75" rx="20" ry="5"/></pre> + +<dl> + <dt>rx</dt> + <dd>椭圆的x半径</dd> + <dt>ry</dt> + <dd>椭圆的y半径</dd> + <dt>cx</dt> + <dd>椭圆中心的x位置</dd> + <dt>cy</dt> + <dd>椭圆中心的y位置</dd> +</dl> + +<h3 id="线条">线条</h3> + +<p><a href="/en-US/Web/SVG/Element/line" title="en-US/Web/SVG/Element/line">Line</a> 绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。</p> + +<pre><line x1="10" x2="50" y1="110" y2="150"/></pre> + +<dl> + <dt>x1</dt> + <dd>起点的x位置</dd> + <dt>y1</dt> + <dd>起点的y位置</dd> + <dt>x2</dt> + <dd>终点的x位置</dd> + <dt>y2</dt> + <dd>终点的y位置</dd> +</dl> + +<h3 id="Polyline" name="Polyline">折线</h3> + +<p><a href="/en-US/Web/SVG/Element/polyline" title="en-US/Web/SVG/Element/polyline">Polyline</a>是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个points属性中：</p> + +<pre><polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/></pre> + +<dl> + <dt>points</dt> + <dd>点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。</dd> +</dl> + +<h3 id="Polygon" name="Polygon">多边形</h3> + +<p><code><a href="https://developer.mozilla.org/en/SVG/Element/polygon" title="en/SVG/Element/polygon">polygon</a></code>和折线很像，它们都是由连接一组点集的直线构成。不同的是，<code>polygon</code>的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。</p> + +<pre><polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/></pre> + +<dl> + <dt>points</dt> + <dd>点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。</dd> +</dl> + +<h3 id="Path" name="Path">路径</h3> + +<p><code>path</code>可能是SVG中最常见的形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。因为path很强大也很复杂，所以会在<a href="https://developer.mozilla.org/en/SVG/Tutorial/Paths" title="en/SVG/Tutorial/Paths">下一章</a>进行详细介绍。这里只介绍一个定义路径形状的属性。</p> + +<pre><path d="M 20 230 Q 40 205, 50 230 T 90230"/></pre> + +<dl> + <dt>d</dt> + <dd>一个点集数列以及其它关于如何绘制路径的信息。请阅读<a href="https://developer.mozilla.org/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Paths</a> 章节以了解更多信息。</dd> +</dl> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/basic_transformations/index.html b/files/zh-cn/web/svg/tutorial/basic_transformations/index.html new file mode 100644 index 0000000000..843cf3f646 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/basic_transformations/index.html @@ -0,0 +1,80 @@ +--- +title: 基础变形 +slug: Web/SVG/Tutorial/Basic_Transformations +translation_of: Web/SVG/Tutorial/Basic_Transformations +--- +<div>{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}</div> + +<p>现在我们准备好开始扭曲我们美丽的图像了。但是首先，让我们正式地介绍{{SVGElement("g")}}元素。利用这个助手，你可以把属性赋给一整个元素集合。实际上，这是它唯一的目的。一个示例：</p> + +<pre class="brush: xml"><g fill="red"> + <rect x="0" y="0" width="10" height="10" /> + <rect x="20" y="0" width="10" height="10" /> +</g> +</pre> + +<p>输出两个红色矩形。</p> + +<p>所有接下来的变形都会用一个元素的<code>transform</code>属性总结。变形可以连缀，只要把它们连接起来就行，用空格隔开。</p> + +<h2 id="平移">平移</h2> + +<p>你能把元素移动一段距离，甚至你可以根据相应的属性定位它。<code>translate()</code>变形方法专门效力于这个目的。</p> + +<pre class="brush: xml"><rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> +</pre> + +<p>该示例将呈现一个矩形，移到点(30,40)，而不是出现在点(0,0)。</p> + +<p>如果没有指定第二个值，它默认被赋值<em>0</em>。</p> + +<h2 id="旋转">旋转</h2> + +<p>旋转一个元素是相当常见的任务。使用<code>rotate()变形就可以了：</code></p> + +<pre class="brush: xml"><rect x="20" y="20" width="20" height="20" transform="rotate(45)" /> +</pre> + +<p>该示例显示了一个方形，旋转了45度。<code>rotate()</code>的值是用角度数指定的。</p> + +<h2 id="斜切">斜切</h2> + +<p>利用一个矩形制作一个斜菱形。可用<code>skewX()</code>变形和<code>skewY()</code>变形。每个需要一角度以确定元素斜切到多远。</p> + +<h2 id="缩放">缩放</h2> + +<p><code>scale()变形</code>改变了元素的尺寸。它需要两个数字，作为比率计算如何缩放。0.5表示收缩到50%。<em>如果第二个数字被忽略了，它默认等于第一个值。</em></p> + +<h2 id="用matrix()实现复杂变形">用<code>matrix()实现复杂变形</code></h2> + +<p>所有上面的变形可以表达为一个2x3的变形矩阵。组合一些变形，可以直接用<code>matrix(a, b, c, d, e, f)变形</code>设置结果矩阵，利用下面的矩阵，它把来自上一个坐标系统的坐标映射到新的坐标系统：</p> + +<p><math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow><annotation encoding="TeX">\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right. </annotation></semantics></math></p> + +<p>请看<a href="/en-US/docs/Web/SVG/Attribute/transform#General_Transformation">关于SVG变形文档的具体实例</a>。关于该属性的详细信息可以在<a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">SVG推荐标准</a>上找到。</p> + +<h2 id="坐标系统上的效果">坐标系统上的效果</h2> + +<p>如果使用了变形，你会在元素内部建立了一个新的坐标系统，应用了这些变形，你为该元素和它的子元素指定的单位可能不是1:1像素映射。但是依然会根据这个变形进行歪曲、斜切、转换、缩放操作。</p> + +<pre class="brush: xml"><g transform="scale(2)"> + <rect width="50" height="50" /> +</g> +</pre> + +<p>上面示例中的结果矩形将是100x100px，如果你使用了比如说userSpaceOnUse等属性，将出现更吸引人的效果。</p> + +<h2 id="SVG嵌在SVG内部">SVG嵌在SVG内部</h2> + +<p>比之HTML，SVG允许你无缝嵌入别的svg元素。因此你可以利用内部<code>svg</code>元素的属性<code>viewBox</code>、属性<code>width</code>和属性<code>height</code>简单创建一个新的坐标系统。</p> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <svg width="100" height="100" viewBox="0 0 50 50"> + <rect width="50" height="50" /> + </svg> +</svg> +</pre> + +<p>以上示例基本上跟它上面的示例有同样的效果，也就是矩形将是指定的两倍大。</p> + +<div>{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}</div> diff --git a/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html b/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html new file mode 100644 index 0000000000..c796d2a4d0 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/clipping_and_masking/index.html @@ -0,0 +1,142 @@ +--- +title: 剪切和遮罩 +slug: Web/SVG/Tutorial/Clipping_and_masking +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Clipping_and_masking +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}</p> + +<p>擦除已经创建的元素的部分内容，最初看起来有点矛盾。但是如果你打算在SVG中创建一个半圆形，你将很快发现下面的属性的作用了。</p> + +<p><strong>Clipping</strong>用来移除在别处定义的元素的部分内容。在这里，任何半透明效果都是不行的。它只能要么显示要么不显示。</p> + +<p><strong>Masking</strong>允许使用透明度和灰度值遮罩计算得的软边缘。</p> + +<h3 id="创建剪切">创建剪切</h3> + +<p>我们在一个圆形的基础上创建上面提到的半圆形：</p> + +<pre class="brush: html"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <clipPath id="cut-off-bottom"> + <rect x="0" y="0" width="200" height="100" /> + </clipPath> + </defs> + + <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> +</svg> +</pre> + +<p>在(100,100)创建一个圆形，半径是100。属性<code>clip-path</code>引用了一个带单个rect元素的<code>{{ SVGElement("clipPath") }}</code>元素。它内部的这个矩形将把画布的上半部分涂黑。注意，<code>clipPath</code>元素经常放在一个<code>defs</code>元素内。</p> + +<p>然而，该rect不会被绘制。它的象素数据将用来确定：圆形的哪些像素需要最终呈现出来。因为矩形只覆盖了圆形的上半部分，所以下半部分将消失了：</p> + +<div class="hidden"> +<h2 id="Creating_clips">Creating_clips</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <clipPath id="cut-off-bottom"> + <rect x="0" y="0" width="200" height="100" /> + </clipPath> + </defs> + + <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> +</svg> +</pre> + + +</div> + +<p>{{ EmbedLiveSample('Creating_clips','240','240','/files/3224/clipdemo.png') }}</p> + +<p>现在我们已经有了一个半圆形，不用处理弧形路径元素。对于这个剪切，<code>clipPath</code>内部的每个路径都会被检查到、与它的描边属性一起被估值、变形。然后目标的位于clipPath内容的结果的透明度区域的每一块都不会呈现。颜色、不透明度都没有这种效果，因为它们不能让一部分彻底消失。</p> + +<h3 id="遮罩">遮罩</h3> + +<p>遮罩的效果最令人印象深刻的是表现为一个渐变。如果你想要让一个元素淡出，你可以利用遮罩效果实现这一点。</p> + +<pre class="brush: html"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <linearGradient id="Gradient"> + <stop offset="0" stop-color="white" stop-opacity="0" /> + <stop offset="1" stop-color="white" stop-opacity="1" /> + </linearGradient> + <mask id="Mask"> + <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" /> + </mask> + </defs> + + <rect x="0" y="0" width="200" height="200" fill="green" /> + <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" /> +</svg> +</pre> + +<p>你看到有一个绿色填充的矩形在底层，一个红色填充的矩形在上层。后者有一个<code>mask</code>属性指向一个<code>mask</code>元素。<code>mask</code>元素的内容是一个单一的<code>rect</code>元素，它填充了一个透明到白色的渐变。作为红色矩形继承<code>mark</code>内容的<code>alpha</code>值（透明度）的结果，我们看到一个从绿色到红色渐变的输出：</p> + +<div class="hidden"> +<h2 id="Masking">Masking</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <linearGradient id="Gradient"> + <stop offset="0" stop-color="black" /> + <stop offset="1" stop-color="white" /> + </linearGradient> + <mask id="Mask"> + <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" /> + </mask> + </defs> + + <rect x="0" y="0" width="200" height="200" fill="green" /> + <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" /> +</svg> +</pre> + + +</div> + +<p>{{ EmbedLiveSample('Masking','240','240','/files/3234/maskdemo.png') }}</p> + +<h3 id="用opacity定义透明度">用<code>opacity定义透明度</code></h3> + +<p>有一个简单方法可以用来为整个元素设置透明度。它就是<code>opacity</code>属性：</p> + +<pre class="brush: xml"><rect x="0" y="0" width="100" height="100" opacity=".5" /> +</pre> + +<p>上面的矩形将绘制为半透明。填充和描边还有两个属性是<code>fill-opacity</code>和<code>stroke-opacity</code>，分别用来控制填充和描边的不透明度。需要注意的是描边将绘制在填充的上面。因此，如果你在一个元素上设置了描边透明度，但它同时设有填充，则描边的一半应用填充色，另一半将应用背景色。</p> + +<pre class="brush: html"><svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > + <rect x="0" y="0" width="200" height="200" fill="blue" /> + <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" /> +</svg> +</pre> + +<div class="hidden"> +<h2 id="Transparency_with_opacity">Transparency_with_opacity</h2> + +<h3 id="HTML_3">HTML</h3> + +<pre class="brush: html"><svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="0" y="0" width="200" height="200" fill="blue" /> + <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" /> +</svg> +</pre> +</div> + +<p>{{ EmbedLiveSample('Transparency_with_opacity','240','240','/files/3231/opacitydemo.png') }}</p> + +<p>你看到这个示例，红色的圆形在蓝色的背景上，黄色描边设置为50%不透明度，导到双色描边的效果。</p> + +<h2 id="利用广为人知的CSS技术">利用广为人知的CSS技术</h2> + +<p>Web开发工具箱中有一个很有用的工具是<code>display:none</code>。它虽然几无悬念，但是依然可以在SVG上使用该CSS属性，连同CSS2定义的<code>visibility</code>和<code>clip</code>属性。为了恢复以前设置的<code>display:none</code>，知道这一点很重要：所有的SVG元素的初始<code>display</code>值都是<code>inline</code>。</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html new file mode 100644 index 0000000000..65eeaebad8 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html @@ -0,0 +1,140 @@ +--- +title: 填充和边框 +slug: Web/SVG/Tutorial/Fills_and_Strokes +tags: + - Beginner + - NeedsLiveSample + - SVG + - Tutorial +translation_of: Web/SVG/Tutorial/Fills_and_Strokes +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p> + +<p>可以使用几种方法来着色（包括指定对象的属性）使用内联CSS样式、内嵌CSS样式，或者使用外部CSS样式文件。大多数的web网站的SVG使用的是内联样式CSS，对于这些方法都有优缺点。</p> + +<h2 id="Fill_and_Stroke_Attributes" name="Fill_and_Stroke_Attributes">Fill 和 Stroke 属性</h2> + +<h3 id="Painting" name="Painting">上色</h3> + +<p>现在你难免面露难色，但是大多数基本的涂色可以通过在元素上设置两个属性来搞定：<code>fill</code>属性和<code>stroke</code>属性。<code>fill</code>属性设置对象内部的颜色，<code>stroke</code>属性设置绘制对象的线条的颜色。你可以使用在HTML中的CSS颜色命名方案定义它们的颜色，比如说颜色名（像<em>red</em>这种）、rgb值（像rgb(255,0,0)这种）、十六进制值、rgba值，等等。</p> + +<pre class="brush:xml;"> <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" + fill-opacity="0.5" stroke-opacity="0.8"/> +</pre> + +<p>此外，在SVG中你可以分别定义填充色和边框色的不透明度，属性<code>fill-opacity</code>控制填充色的不透明度，属性<code>stroke-opacity</code>控制描边的不透明度。</p> + +<div class="note style-wrap">注意，FireFox 3+支持rgba值，并且能够提供同样的效果，但是为了在其他浏览器中保持兼容，最好将它和填充/描边的不透明度分开使用。如果同时指定了rgba值和填充/描边不透明度，它们将都被调用。</div> + +<h3 id="Stroke" name="Stroke">描边</h3> + +<p>除了颜色属性，还有其他一些属性用来控制绘制描边的方式。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/355/=SVG_Stroke_Linecap_Example.png"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> + <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> + <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> +</svg></pre> + +<p><code>stroke-width</code>属性定义了描边的宽度。注意，描边是以路径为中心线绘制的，在上面的例子里，路径是粉红色的，描边是黑色的。如你所见，路径的每一侧都有均匀分布的描边。</p> + +<p>第二个影响描边的属性是<code>stroke-linecap</code>属性，如上所示。它控制边框终点的形状。</p> + +<p><code>stroke-linecap</code>属性的值有三种可能值：</p> + +<ul> + <li><code>butt</code>用直边结束线段，它是常规做法，线段边界90度垂直于描边的方向、贯穿它的终点。</li> + <li><code>square</code>的效果差不多，但是会稍微超出<code>实际路径</code>的范围，超出的大小由<code>stroke-width</code>控制。</li> + <li><code>round</code>表示边框的终点是圆角，圆角的半径也是由<code>stroke-width</code>控制的。</li> +</ul> + +<p>还有一个<code>stroke-linejoin</code>属性，用来控制两条描边线段之间，用什么方式连接。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/356/=SVG_Stroke_Linejoin_Example.png"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" + stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> + + <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" + stroke-linecap="round" fill="none" stroke-linejoin="round"/> + + <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" + stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> +</svg></pre> + +<p>每条折线都是由两个线段连接起来的，连接处的样式由<code>stroke-linejoin</code>属性控制，它有三个可用的值，<code>miter</code>是默认值，表示用方形画笔在连接处形成尖角，<code>round</code>表示用圆角连接，实现平滑效果。最后还有一个值<code>bevel</code>，连接处会形成一个斜接。</p> + +<p>最后，你可以通过指定<code>stroke-dasharray</code>属性，将虚线类型应用在描边上。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/354/=SVG_Stroke_Dasharray_Example.png"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" + stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> + <path d="M 10 75 L 190 75" stroke="red" + stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> +</svg></pre> + +<p><code>stroke-dasharray</code>属性的参数，是一组用逗号分割的数字组成的数列。注意，和<code>path</code>不一样，这里的数字<strong>必须</strong>用逗号分割（空格会被忽略）。每一组数字，第一个用来表示填色区域的长度，第二个用来表示非填色区域的长度。所以在上面的例子里，第二个路径会先做5个像素单位的填色，紧接着是5个空白单位，然后又是5个单位的填色。如果你想要更复杂的虚线模式，你可以定义更多的数字。第一个例子指定了3个数字，这种情况下，数字会循环两次，形成一个偶数的虚线模式（奇数个循环两次变偶数个）。所以该路径首先渲染5个填色单位，10个空白单位，5个填色单位，然后回头以这3个数字做一次循环，但是这次是创建5个空白单位，10个填色单位，5个空白单位。通过这两次循环得到偶数模式，并将这个偶数模式不断重复。</p> + +<p>另外还有一些关于填充和边框的属性，包括<code>fill-rule</code>，用于定义如何给图形重叠的区域上色；<code>stroke-miterlimit</code>，定义什么情况下绘制或不绘制边框连接的<code>miter</code>效果；还有<code>stroke-dashoffset</code>，定义虚线开始的位置。</p> + +<h2 id="Using_CSS" name="Using_CSS">使用CSS</h2> + +<p>除了定义对象的属性外，你也可以通过CSS来样式化<code>填充</code>和<code>描边</code>。语法和在html里使用CSS一样，只不过你要把<code>background-color</code>、<code>border</code>改成<code>fill</code>和<code>stroke</code>。注意，不是所有的属性都能用CSS来设置。上色和填充的部分一般是可以用CSS来设置的，比如<code>fill</code>，<code>stroke</code>，<code>stroke-dasharray</code>等，但是不包括下面会提到的渐变和图案等功能。另外，<code>width</code>、<code>height</code>，以及路径的命令等等，都不能用css设置。判断它们能不能用CSS设置还是比较容易的。</p> + +<div class="note style-wrap"><a class="external external-icon" href="http://www.w3.org/TR/SVG/propidx.html" title="http://www.w3.org/TR/SVG/propidx.html">SVG规范</a>将属性区分成properties和其他attributes，前者是可以用CSS设置的，后者不能。</div> + +<p>CSS可以利用style属性插入到元素的行间：</p> + +<pre class="brush:xml;"> <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> +</pre> + +<p>或者利用<style>设置一段样式段落。就像在html里这样的<style>一般放在<code><head></code>里，在svg里<style>则放在<a href="https://developer.mozilla.org/en/SVG/Element/defs" title="en/SVG/Element/defs"><code><defs></code></a>标签里。<code><defs></code>表示定义，这里面可以定义一些不会在SVG图形中出现、但是可以被其他元素使用的元素。</p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <style type="text/css"><![CDATA[ + #MyRect { + stroke: black; + fill: red; + } + ]]></style> + </defs> + <rect x="10" height="180" y="10" width="180" id="MyRect"/> +</svg></pre> + +<p>如上把样式放到一块你可以更轻松地调整一大组元素的样式，同样你也可以使用<strong>hover</strong>这样的伪类来创建翻转之类的效果:</p> + +<pre class="brush:css;"> #MyRect:hover { + stroke: black; + fill: blue; + } +</pre> + +<p>你最好读一下CSS教程以便掌握它，一些可以在html里使用的css，在svg里可能无法正常工作，比如<code>before</code>和<code>after</code>伪类。所以这里需要一点经验。</p> + +<p>你也可以定义一个外部的样式表，但是要符合<a class="external external-icon" href="http://www.w3.org/TR/xml-stylesheet/" title="http://www.w3.org/TR/xml-stylesheet/">normal XML-stylesheet syntax</a>的CSS规则:</p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<?xml-stylesheet type="text/css" href="style.css"?> + +<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect height="10" width="10" id="MyRect"/> +</svg></pre> + +<p>style.css看起来就像这样：</p> + +<pre class="brush:css;">#MyRect { + fill: red; + stroke: black; +}</pre> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/filter_effects/index.html b/files/zh-cn/web/svg/tutorial/filter_effects/index.html new file mode 100644 index 0000000000..0329562b11 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/filter_effects/index.html @@ -0,0 +1,198 @@ +--- +title: 滤镜效果 +slug: Web/SVG/Tutorial/Filter_effects +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Filter_effects +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}</p> + +<p>在某些情况下，一些基本的 SVG 图形并不能提供某种想要达到的效果。比如常见的阴影效果，就不能合理地与渐变类元素（<code><linearGradient></code>, <code><radialGradient></code>）一起被创建。滤镜（Filter）就是 SVG 中用于创建复杂效果的一种机制。</p> + +<p>下面是一个为 SVG 内容添加模糊效果的基本示例。尽管基本的模糊效果可以使用渐变类元素创建，但是使用模糊滤镜可以做更多的事情。</p> + +<h2 id="示例">示例</h2> + +<p>滤镜通过 {{SVGElement('filter')}} 元素进行定义，并且置于 <code><defs></code> 区块中。在 <code>filter</code> 标签中提供一系列<em>图元</em>（<em>primitives</em>），以及在前一个基本变换操作上建立的另一个操作（比如添加模糊后又添加明亮效果）。如果要应用所创建的滤镜效果，只需要为 SVG 图形元素设置 {{SVGAttr('filter')}} 属性即可。</p> + +<pre class="brush: html"><svg width="250" viewBox="0 0 200 85" + xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <!-- Filter declaration --> + <filter id="MyFilter" filterUnits="userSpaceOnUse" + x="0" y="0" + width="200" height="120"> + + <!-- offsetBlur --> + <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> + <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> + + <!-- litPaint --> + <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" + specularExponent="20" lighting-color="#bbbbbb" + result="specOut"> + <fePointLight x="-5000" y="-10000" z="20000"/> + </feSpecularLighting> + <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> + <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" + k1="0" k2="1" k3="1" k4="0" result="litPaint"/> + + <!-- merge offsetBlur + litPaint --> + <feMerge> + <feMergeNode in="offsetBlur"/> + <feMergeNode in="litPaint"/> + </feMerge> + </filter> + </defs> + + <!-- Graphic elements --> + <g filter="url(#MyFilter)"> + <path fill="none" stroke="#D90000" stroke-width="10" + d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" /> + <path fill="#D90000" + d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" /> + <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" > + <text x="52" y="52">SVG</text> + </g> + </g> +</svg> +</pre> + +<div class="hidden"> +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><svg width="250" viewBox="0 0 200 85" + xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <!-- Filter declaration --> + <filter id="MyFilter" filterUnits="userSpaceOnUse" + x="0" y="0" + width="200" height="120"> + + <!-- offsetBlur --> + <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> + <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> + + <!-- litPaint --> + <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" + specularExponent="20" lighting-color="#bbbbbb" + result="specOut"> + <fePointLight x="-5000" y="-10000" z="20000"/> + </feSpecularLighting> + <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> + <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" + k1="0" k2="1" k3="1" k4="0" result="litPaint"/> + + <!-- merge offsetBlur + litPaint --> + <feMerge> + <feMergeNode in="offsetBlur"/> + <feMergeNode in="litPaint"/> + </feMerge> + </filter> + </defs> + + <!-- Graphic elements --> + <g filter="url(#MyFilter)"> + <path fill="none" stroke="#D90000" stroke-width="10" + d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" /> + <path fill="#D90000" + d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" /> + <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" > + <text x="52" y="52">SVG</text> + </g> + </g> +</svg> +</pre> + + +</div> + +<p>{{ EmbedLiveSample('Example', '100%', 120) }}</p> + +<h3 id="步骤_1">步骤 1</h3> + +<pre class="brush: html"><feGaussianBlur in="SourceAlpha" + stdDeviation="4" + result="blur"/></pre> + +<p>设置 {{SVGElement('feGaussianBlur')}} 中的 <code>in</code> 属性为 <code>"SourceAlpha"</code> 值，即原图像的 alpha 通道，并设置了模糊度为 4 以及把 <code>result</code> 保存在了一个名为 "blur" 的临时缓冲区中。</p> + +<h3 id="步骤_2">步骤 2</h3> + +<pre class="brush: html"><feOffset in="blur" + dx="4" dy="4" + result="offsetBlur"/></pre> + +<p>{{SVGElement('feOffset')}} 设置 <code>in</code> 的值为 "blur"，即我们前面保存 <code>result</code> 的那个临时缓冲区。然后设置相对坐标，向右偏移 4，向下偏移 4。最后把结果 <code>result</code> 保存到名为 "offsetBlur" 的缓冲区中。步骤1、2其实是创建图形阴影的两个图元。</p> + +<h3 id="步骤_3">步骤 3</h3> + +<pre class="brush: html"><feSpecularLighting in="offsetBlur" + surfaceScale="5" specularConstant=".75" + specularExponent="20" lighting-color="#bbbbbb" + result="specOut"> + <fePointLight x="-5000" y="-10000" z="20000"/> +</feSpecularLighting></pre> + +<p>{{SVGelement('feSpecularLighting')}} 设置输入源 <code>in</code> 为 "offsetBlur"，将会生成一个光照效果，并将结果 <code>result</code> 保存在 "specOut" 中。</p> + +<h3 id="步骤_4">步骤 4</h3> + +<pre class="brush: html"><feComposite in="specOut" in2="SourceAlpha" + operator="in" + result="specOut"/></pre> + +<p>第一个 {{SVGElement('feComposite')}} 元素设置输入源为 "specOut"，第二个输入源（<code>in2</code>）为 "SourceAlpha"，将 "specOut" 的结果效果遮盖掉，以致于最后的结果不会大于 "SourceAlpha"（源图像），最后覆盖输出结果 <code>result</code> 为 "specOut"。</p> + +<h3 id="步骤_5">步骤 5</h3> + +<pre><feComposite in="SourceGraphic" in2="specOut" + operator="arithmetic" + k1="0" k2="1" k3="1" k4="0" + result="litPaint"/></pre> + +<p>第二个 {{SVGElement('feComposite')}} 设置 <code>in</code> 为 "SourceGraphic" 和 "specOut"，即在 "SourceGraphic" 之上添加 "specOut" 的效果，复合模式为 "arithmetic"，然后保存结果为 "litPaint"。</p> + +<h3 id="步骤_6">步骤 6</h3> + +<pre><feMerge> + <feMergeNode in="offsetBlur"/> + <feMergeNode in="litPaint"/> +</feMerge></pre> + +<p>最后，{{SVGElement('feMerge')}} 元素合并了阴影效果 "offsetBlur" 和源图像的光照效果 "litPaint"。</p> + +<div style="display: flex; text-align: center;"> +<div><img alt="Source graphic" src="https://mdn.mozillademos.org/files/16310/filters01-0.png" style="height: 70px; width: 115px;"> +<p>源图像</p> +</div> + +<div><img alt="Primitive 1" src="https://mdn.mozillademos.org/files/16311/filters01-1.png" style="height: 70px; width: 115px;"> +<p>图元 1</p> +</div> + +<div><img alt="Primitive 2" src="https://mdn.mozillademos.org/files/16312/filters01-2.png" style="height: 70px; width: 115px;"> +<p>图元 2</p> +</div> + +<div><img alt="Primitive 3" src="https://mdn.mozillademos.org/files/16313/filters01-3.png" style="height: 70px; width: 115px;"> +<p>图元 3</p> +</div> + +<div><img alt="Primitive 4" src="https://mdn.mozillademos.org/files/16314/filters01-4.png" style="height: 70px; width: 115px;"> +<p>图元 4</p> +</div> + +<div><img alt="Primitive 5" src="https://mdn.mozillademos.org/files/16315/filters01-5.png" style="height: 70px; width: 115px;"> +<p>图元 5</p> +</div> + +<div><img alt="Primitive 6" src="https://mdn.mozillademos.org/files/16316/filters01-6.png" style="height: 70px; width: 115px;"> +<p>图元 6</p> +</div> +</div> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/getting_started/index.html b/files/zh-cn/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..343a468a5b --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,96 @@ +--- +title: 入门 +slug: Web/SVG/Tutorial/Getting_Started +tags: + - SVG + - SVG教程 + - 起步 +translation_of: Web/SVG/Tutorial/Getting_Started +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p> + +<h3 id="A_Simple_Example" name="A_Simple_Example">一个简单的示例</h3> + +<p>让我们直接从一个简单的例子开始，看一下下面代码：</p> + +<pre class="brush: xml"><svg version="1.1" + baseProfile="full" + width="300" height="200" + xmlns="http://www.w3.org/2000/svg"> + + <rect width="100%" height="100%" fill="red" /> + + <circle cx="150" cy="100" r="80" fill="green" /> + + <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> + +</svg> +</pre> + +<p>复制并粘贴代码到文件demo1.svg。然后用Firefox打开该文件。 它将会呈现为下面的截图。(Firefox用户点击<a href="https://mdn.mozillademos.org/files/3075/svgdemo1.xml">这里</a>)</p> + +<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p> + +<p>绘制流程包括以下几步：</p> + +<ol> + <li>从<code>svg</code>根元素开始： + + <ul> + <li>应舍弃来自 (X)HTML的doctype声明，因为基于SVG的DTD验证导致的问题比它能解决的问题更多。</li> + <li>SVG 2之前，version属性和baseProfile属性用来供其他类型的验证识别SVG的版本。SVG 2不推荐使用version和baseProfile这两个属性。</li> + <li>作为XML的一种方言，SVG必须正确的绑定命名空间 （在xmlns属性中绑定）。 请阅读<a href="https://developer.mozilla.org/en/docs/Web/SVG/Namespaces_Crash_Course">命名空间速成</a> 页面获取更多信息。</li> + </ul> + </li> + <li>绘制一个完全覆盖图像区域的矩形 <code><a href="/en/SVG/Element/rect" title="en/SVG/Element/rect"><rect/></a>，</code>把背景颜色设为红色。</li> + <li><code><font face="Open Sans, sans-serif">一个半径80px的绿色圆圈</font><a href="/en/SVG/Element/circle" title="en/SVG/Element/circle"><circle/></a></code>绘制在红色矩形的正中央 （向右偏移150px，向下偏移100px）。</li> + <li>绘制文字“SVG”。文字被填充为白色， 通过设置居中的锚点把文字定位到期望的位置：在这种情况下，中心点应该对应于绿色圆圈的中点。还可以精细调整字体大小和垂直位置，确保最后的样式是美观的。</li> +</ol> + +<h3 id="SVG文件的基本属性">SVG文件的基本属性</h3> + +<ul> + <li>最值得注意的一点是元素的渲染顺序。SVG文件全局有效的规则是“后来居上”，越后面的元素越可见。</li> + <li>web上的svg文件可以直接在浏览器上展示，或者通过以下几种方法嵌入到HTML文件中： + <ul> + <li>如果HTML是XHTML并且声明类型为<code>application/xhtml+xml，</code>可以直接把SVG嵌入到XML源码中。</li> + <li>如果HTML是HTML5并且浏览器支持HTML5，同样可以直接嵌入SVG。然而为了符合HTML5标准，可能需要做一些语法调整。</li> + <li>可以通过 <code>object</code> 元素引用SVG文件： + <pre> <object data="image.svg" type="image/svg+xml" /></pre> + </li> + <li>类似的也可以使用 <code>iframe</code> 元素引用SVG文件： + <pre> <iframe src="image.svg"></iframe></pre> + </li> + <li>理论上同样可以使用 <code>img</code> 元素，但是在低于4.0版本的Firefox 中不起作用。</li> + <li>最后SVG可以通过JavaScript动态创建并注入到HTML DOM中。 这样具有一个优点，可以对浏览器使用替代技术，在不能解析SVG的情况下，可以替换创建的内容。</li> + </ul> + 阅读<a href="/en/SVG_In_HTML_Introduction" title="en/svg in html introduction">this dedicated article</a> 以深入了解该话题。</li> + <li>SVG如何处理大小和单位将在<a href="https://developer.mozilla.org/zh-cn/docs/Web/SVG/Tutorial/Positions">下一页</a>详解。</li> +</ul> + +<h3 id="SVG_File_Types" name="SVG_File_Types">SVG 文件类型</h3> + +<p>SVG文件有两种形式。普通SVG文件是包含SVG标记的简单文本文件。推荐使用“.svg”（全部小写）作为此类文件的扩展名。</p> + +<p>由于在某些应用（比如地图应用等）中使用时，SVG文件可能会很大，SVG标准同样允许gzip压缩的SVG文件。推荐使用“.svgz”（全部小写）作为此类文件扩展名 。不幸的是，如果服务器是微软的IIS服务器，使gzip压缩的SVG文件在所有的可用SVG的用户代理上可靠地起作用是相当困难的，而且Firefox不能在本地机器上加载gzip压缩的SVG文件。 除非知道处理发布内容的web服务器可以正确的处理gzip，否则要避免使用gzip压缩的SVG。</p> + +<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers">关于web服务器的小提示</h3> + +<p>如果你已经知道了如何创建基本SVG文件，下一步就是把它们上传到web服务器，但是在这阶段有一些陷阱。对于普通SVG文件，服务器应该会发送下面的HTTP头：</p> + +<pre>Content-Type: image/svg+xml +Vary: Accept-Encoding</pre> + +<p>对于gzip压缩的SVG文件，服务器应该会发送下面的HTTP头：</p> + +<pre>Content-Type: image/svg+xml +Content-Encoding: gzip +Vary: Accept-Encoding</pre> + +<p>可以利用<a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Headers">Network Monitor panel</a>或者<a class="external" href="http://web-sniffer.net/" style="line-height: 1.5;">web-sniffer.net</a>之类的网站来检查服务器是否给SVG文件发送正确的HTTP头，向<a href="http://web-sniffer.net/">web-sniffer.net</a>提交你的一个SVG文件的链接，然后查看HTTP 响应头。如果发现服务器没有发送上述的响应头部值，那么你应该联系你的服务器供应商。<span style="line-height: 1.5;">如果不能说服他们为SVG修正服务器配置，可能还有一些我们可以自行解决的办法。 请阅读SVG维基的</span><a class="external" href="http://svg-whiz.com/wiki/index.php?title=Server_Configuration" style="line-height: 1.5;">server configuration page</a>以找到一些简单的解决方案。</p> + +<p>服务器配置错误是SVG加载失败的常见原因，所以一定要确保你的服务器配置正确。如果不能把服务器配置成给SVG文件发送正确的响应头，这时Firefox很有可能把该文件的标记显示成文本或乱码，甚至会要求查看者选择打开文件的应用程序。</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p> + +<p>{{ languages( { "fr": "fr/SVG/Tutoriel/Premiers_pas", "ja": "ja/SVG/Tutorial/Getting_Started" } ) }}</p> diff --git a/files/zh-cn/web/svg/tutorial/gradients/index.html b/files/zh-cn/web/svg/tutorial/gradients/index.html new file mode 100644 index 0000000000..b67d799905 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/gradients/index.html @@ -0,0 +1,177 @@ +--- +title: 渐变 +slug: Web/SVG/Tutorial/Gradients +translation_of: Web/SVG/Tutorial/Gradients +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}</p> + +<p>并非只能简单填充颜色和描边，更令人兴奋的是，你还可以创建和并在填充和描边上应用渐变色。</p> + +<p>有两种类型的渐变：线性渐变和径向渐变。你<strong>必须</strong>给渐变内容指定一个id属性，否则文档内的其他元素就不能引用它。为了让渐变能被重复使用，渐变内容需要定义在<defs>标签内部，而不是定义在形状上面。</p> + +<h2 id="SVGLinearGradient" name="SVGLinearGradient">线性渐变</h2> + +<p>线性渐变沿着直线改变颜色，要插入一个线性渐变，你需要在SVG文件的<code>defs元素</code>内部，创建一个{{SVGElement('linearGradient')}} 节点。</p> + +<h3 id="基础示例">基础示例</h3> + +<pre class="brush: html"><svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="Gradient1"> + <stop class="stop1" offset="0%"/> + <stop class="stop2" offset="50%"/> + <stop class="stop3" offset="100%"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="0%" stop-color="red"/> + <stop offset="50%" stop-color="black" stop-opacity="0"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + <style type="text/css"><![CDATA[ + #rect1 { fill: url(#Gradient1); } + .stop1 { stop-color: red; } + .stop2 { stop-color: black; stop-opacity: 0; } + .stop3 { stop-color: blue; } + ]]></style> + </defs> + + <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> + +</svg></pre> + +<p>{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}</p> + +<p>以上是一个应用了线性渐变的<code><rect></code>元素的示例。线性渐变内部有几个{{SVGElement('stop')}} 结点，这些结点通过指定位置的offset（偏移）属性和stop-color（颜色中值）属性来说明在渐变的特定位置上应该是什么颜色；可以直接指定这两个属性值，也可以通过CSS来指定他们的值，该例子中混合使用了这两种方法。例如：该示例中指明了渐变开始颜色为红色，到中间位置时变成半透明的黑色，最后变成蓝色。虽然你可以根据需求按照自己的喜好插入很多中间颜色，但是偏移量应该始终从0%开始（或者0也可以，百分号可以扔掉），到100%（或1）结束。如果<code>stop</code>设置的位置有重合，将使用XML树中较晚设置的值。而且，类似于填充和描边，你也可以指定属性<code>stop-opacity</code>来设置某个位置的半透明度（同样，对于FF3你也可以设置rgba值）。</p> + +<pre class="eval"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/> +</pre> + +<p>使用渐变时，我们需要在一个对象的属性<code>fill</code>或属性<code>stroke</code>中引用它，这跟你在CSS中使用<code>url</code>引用元素的方法一样。在本例中，url只是一个渐变的引用，我们已经给这个渐变一个ID——“Gradient”。要想附加它，将属性<code>fill</code>设置为<code>url(#Gradient)</code>即可。现在对象就变成多色的了，也可以用同样的方式处理<code>stroke</code>。</p> + +<p><code><linearGradient>元素还需要一些其他的属性值，它们指定了渐变的大小和出现范围。渐变的方向可以通过两个点来控制，它们分别是属性x1、x2、y1和y2，这些属性定义了渐变路线走向。渐变色默认是水平方向的，但是通过修改这些属性，就可以旋转该方向。下例中的Gradient2创建了一个垂直渐变。</code></p> + +<pre class="eval"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> +</pre> + +<div class="note"><strong>注意:</strong> 你也可以在渐变上使用<code>xlink:href属性。如果</code>使用了该属性时，一个渐变的属性和颜色中值（stop）可以被另一个渐变包含引用。在下例中，你就不需要再Grandient2中重新创建全部的颜色中值（stop）。 + +<pre class="eval"> <linearGradient id="Gradient1"> + <stop id="stop1" offset="0%"/> + <stop id="stop2" offset="50%"/> + <stop id="stop3" offset="100%"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1" + xmlns:xlink="<a class="external" href="http://www.w3.org/1999/xlink" rel="freelink">http://www.w3.org/1999/xlink</a>" xlink:href="#Gradient1"/> +</pre> +尽管通常你可能在文档的顶部就定义了Gradient1，但我在结点上直接包含了xlink的命名空间，关于这点的更多信息我们会在<a href="/en-US/Web/SVG/Tutorial/Other_content_in_SVG" title="en-US/Web/SVG/Tutorial/Other content in SVG">讨论图片</a>的时候详解。</div> + +<h2 id="Radial_Gradient" name="Radial_Gradient">径向渐变</h2> + +<p>径向渐变与线性渐变相似，只是它是从一个点开始发散绘制渐变。创建径向渐变需要在文档的<code>defs</code>中添加一个{{SVGElement('radialGradient')}}元素</p> + +<h3 id="示例">示例</h3> + +<pre class="brush: html"><?xml version="1.0" standalone="no"?> +<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="RadialGradient1"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/> + +</svg></pre> + +<p>{{ EmbedLiveSample('Radial_Gradient','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}</p> + +<p>中值（stops）的使用方法与之前一致，但是现在这个对象的颜色是中间是红色的，且向着边缘的方向渐渐的变成蓝色。跟线性渐变一样，<code><radialGradient></code> 节点可以有多个属性来描述其位置和方向，但是它更加复杂。径向渐变也是通过两个点来定义其边缘位置，两点中的第一个点定义了渐变结束所围绕的圆环，它需要一个中心点，由cx和cy属性及半径r来定义，通过设置这些点我们可以移动渐变范围并改变它的大小，如上例的第二个<rect>所展示的。</p> + +<p>第二个点被称为焦点，由fx和fy属性定义。第一个点描述了渐变边缘位置，焦点则描述了渐变的中心，如下例。</p> + +<h3 id="中心和焦点">中心和焦点</h3> + +<pre class="brush: html"><?xml version="1.0" standalone="no"?> + +<svg width="120" height="120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="Gradient" + cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" + fill="url(#Gradient)" stroke="black" stroke-width="2"/> + + <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> + <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> + <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> + <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> + <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> + +</svg></pre> + +<p>{{ EmbedLiveSample('Center_and_focal_point','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}</p> + +<p>因为如果焦点如之前描述的那样被移到圆圈的外面，渐变将不能正确呈现，所以该点会被假定在圆圈范围内。如果没有给出焦点，将认为该点与中心点的位置一致。</p> + +<p>线性渐变和径向渐变都需要一些额外的属性用于描述渐变过程，这里我希望额外提及一个<code>spreadMethod</code>属性，该属性控制了当渐变到达终点的行为，但是此时该对象尚未被填充颜色。这个属性可以有三个值：pad、reflect或repeat。Pad就是目前我们见到的效果，即当渐变到达终点时，最终的偏移颜色被用于填充对象剩下的空间。reflect会让渐变一直持续下去，不过它的效果是与渐变本身是相反的，以100%偏移位置的颜色开始，逐渐偏移到0%位置的颜色，然后再回到100%偏移位置的颜色。repeat也会让渐变继续，但是它不会像reflect那样反向渐变，而是跳回到最初的颜色然后继续渐变。</p> + +<h3 id="spreadMethod">spreadMethod</h3> + +<pre class="brush: html"><?xml version="1.0" standalone="no"?> + +<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="GradientPad" + cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" + spreadMethod="pad"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + <radialGradient id="GradientRepeat" + cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" + spreadMethod="repeat"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + <radialGradient id="GradientReflect" + cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" + spreadMethod="reflect"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/> + <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/> + + <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text> + <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text> + <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text> + +</svg></pre> + +<p>{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}</p> + +<p>两种渐变都有一个叫做 <code>gradientUnits（渐变单元）</code>的属性，它描述了用来描述渐变的大小和方向的单元系统。该属性有两个值：<code>userSpaceOnUse</code> 、<code>objectBoundingBox。默认值为objectBoundingBox，我们目前看到的效果都是在这种系统下的，它大体上定义了对象的渐变大小范围，所以你只要指定从0到1的坐标值，渐变就会自动的缩放到对象相同大小。</code>userSpaceOnUse使用绝对单元，所以你必须知道对象的位置，并将渐变放在同样地位置上。上例中的radialGradient需要被重写成：</p> + +<pre class="eval"> <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse"> +</pre> + +<p>你也可以利用属性<code>gradientTransform</code>给渐变添加额外的变化，但是因为我们还没有介绍<code><a href="/en-US/Web/SVG/Tutorial/Basic_Transformations" title="en-US/Web/SVG/Tutorial/Basic Transformations">transforms</a></code>，所以我们将在后续的章节中介绍它。</p> + +<p>如果对象边界框不是一个正方形，处理<code>gradientUnits="objectBoundingBox"</code>还有一些其他警告<code>，但是这些方法特别复杂因此有待一些了解得更深的人来解释他们。</code></p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/index.html b/files/zh-cn/web/svg/tutorial/index.html new file mode 100644 index 0000000000..3dc8d31499 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/index.html @@ -0,0 +1,58 @@ +--- +title: SVG教程 +slug: Web/SVG/Tutorial +tags: + - SVG + - SVG教程 + - 中间体 + - 需要内容 + - 需要帮助 + - 需要更新 +translation_of: Web/SVG/Tutorial +--- +<p>可缩放矢量图形，即<a href="/zh-CN/SVG" title="zh-CN/SVG">SVG</a>，是W3C XML的分支语言之一，用于标记可缩放的矢量图形。目前SVG在Firefox、Opera、Webkit浏览器、IE等浏览器中已经部分实现。</p> + +<p>本教程旨在解释SVG内部的技术细节。如果你希望绘制非常漂亮的图形，你可以在<a class="external" href="http://inkscape.org/doc/" title="http://inkscape.org/doc/">Inkscape的文档页面</a>上获取更多有用的资源。另外还有一个比较好的SVG介绍：<a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">W3C的SVG入门</a>。</p> + +<div class="note">本教程还在初期阶段，如果你有能力，可以来增加扩展一两段，写一整页的话会给加分！</div> + +<h5 id="从头开始介绍SVG">从头开始介绍SVG</h5> + +<ul> + <li><a href="/zh-CN/Web/SVG/Tutorial/Introduction" title="zh-CN/SVG/Tutorial/Introduction">引言</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Getting_Started" title="zh-CN/SVG/Tutorial/Getting_Started">入门</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Positions" title="zh-CN/SVG/Tutorial/Positions">坐标定位</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Basic_Shapes" title="zh-CN/SVG/Tutorial/Basic_Shapes">基本形状</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Paths" title="zh-CN/SVG/Tutorial/Paths">路径</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Fills_and_Strokes" title="zh-CN/SVG/Tutorial/Fills_and_Strokes">填充与边框</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Gradients" title="zh-CN/SVG/Tutorial/Gradients">渐变</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Patterns" title="zh-CN/SVG/Tutorial/Patterns">图案</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Texts" title="zh-CN/SVG/Tutorial/Texts">文字</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Basic_Transformations" title="zh-CN/SVG/Tutorial/Basic_Transformations">基本变换</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Clipping_and_masking" title="zh-CN/SVG/Tutorial/Clipping_and_masking">裁剪和遮罩</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Other_content_in_SVG" title="zh-CN/SVG/Tutorial/Other content in SVG">其他SVG内容</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/Filter_effects" title="zh-CN/SVG/Tutorial/Filter effects">滤镜效果</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/SVG_fonts" title="zh-CN/SVG/Tutorial/SVG fonts">SVG字体</a></li> + <li><a href="/zh-CN/Web/SVG/Tutorial/SVG_Image_Tag" title="zh-CN/SVG/Tutorial/SVG Image Tag">SVG的Image标签</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Tools_for_SVG" title="zh-CN/SVG/Tutorial/Tools_for_SVG">SVG工具</a></li> +</ul> + +<p>下面罗列的主题更高级，所以需要单独列出教程。</p> + +<h5 id="JavaScript脚本化SVG">JavaScript脚本化SVG</h5> + +<p>待定（TBD：To be determined）</p> + +<h5 id="SVG滤镜教程">SVG滤镜教程</h5> + +<p>待定</p> + +<h5 id="SVG的SMIL动画">SVG的SMIL动画</h5> + +<p>待定</p> + +<h5 id="在SVG中创建字体">在SVG中创建字体</h5> + +<p>待定</p> + +<p>{{ languages( { "de": "de/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik", "zh-CN":"zh-CN/SVG/Tutorial" } ) }}</p> diff --git a/files/zh-cn/web/svg/tutorial/introduction/index.html b/files/zh-cn/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..44f8a61317 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/introduction/index.html @@ -0,0 +1,43 @@ +--- +title: 引言 +slug: Web/SVG/Tutorial/Introduction +translation_of: Web/SVG/Tutorial/Introduction +--- +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> + +<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right;"><a href="/en/SVG" title="en/SVG">SVG</a>是一种<a href="/en/XML" title="en/XML">XML</a>语言，类似XHTML，可以用来绘制矢量图形，例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。</p> + +<p>SVG诞生于1999年，之前有几个相互竞争的格式规范被提交到<a class="external" href="http://www.w3.org" title="en/W3C">W3C</a>，但是都没有获得批准。主流浏览器均支持SVG。加载慢是SVG的一个缺点。但是SVG也有自身的优点，比如它实现了DOM接口（比Canvas方便），不需要安装第三方扩展(extensions，原文有误，应该是插件plugins，类似flash)。当然，是否使用SVG还要取决于你要实现什么。</p> + +<h3 id="基本要素">基本要素</h3> + +<p>HTML提供了定义标题、段落、表格等等内容的元素。与此类似，SVG也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线。一个简单的SVG文档由<code>{{ SVGElement('svg') }}</code>根元素和基本的形状元素构成。另外还有一个<code>g</code>元素，它用来把若干个基本形状编成一个组。</p> + +<p>从这些开始，SVG可以变得更加复杂。SVG支持渐变、旋转、动画、滤镜效果、与JavaScript交互等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。</p> + +<h3 id="Before_you_start" name="Before_you_start">开始之前</h3> + +<p>包括<a class="external" href="http://www.inkscape.org/">Inkscape</a>在内的很多免费应用原生支持SVG格式的文件。但是本教程建议在学习过程中使用XML或文本编辑器，因为想要理解SVG内部的原理，最好的方法就是动手写一些SVG的标记。你需要注意到你的最终目标。各种SVG浏览器是有差异的，因此很可能你制作了一个SVG图形，并且用一个工具调试正常后，却在另外一个浏览器中无法正常显示。这是因为不同的浏览器支持SVG标准的程度不同，另外，如果你将其他技术和SVG一起使用（比如<a href="/en/JavaScript">JavaScript</a>和<a href="/en/CSS" title="en/CSS">CSS</a>），也会出现类似的情况。</p> + +<p>所有的现代浏览器都支持SVG，在某些情况下甚至几个版本都支持SVG。<a class="external" href="https://caniuse.com/#feat=svg">Can I use</a>上有一份比较详细的支持SVG的浏览器列表，Firefox 1.5以后的版本支持SVG的部分内容，并且支持的程度越来越高。希望通过这份教程，MDC能帮助开发者理解Gecko内核和其他一些主要编译器之间的差异。</p> + +<p>正式开始之前，你需要基本掌握XML和其它标记语言比如说<abbr title="HyperText Markup Language">HTML</abbr>，如果你不是很熟悉XML，这里有几个重点一定要记住：</p> + +<ul> + <li>SVG的元素和属性必须按标准格式书写，因为XML是区分大小写的（这一点和HTML不同）</li> + <li>SVG里的属性值必须用引号引起来，就算是数值也必须这样做。</li> +</ul> + +<p>SVG是一个庞大的规范，本教程主要涵盖基础内容。掌握了这些内容之后，你就有能力使用<a href="/en/SVG/Element" title="en/SVG/Element">元素参考</a>和<a href="/zh-CN/docs/Web/API/Document_Object_Model#SVG_%E6%8E%A5%E5%8F%A3" title="en/SVG/Interface">接口参考</a>，学习其他你需要知道的内容。</p> + +<h3 id="SVG的种类">SVG的种类</h3> + +<p>自从2003年成为W3C推荐标准以来，最接近的“完整版”SVG版本是1.1版，它基于1.0版，并且增加了更多便于实现的模块化内容，SVG1.1的第二个版本在2011年成为推荐标准，完整的SVG1.2本来是下一个标准版本，但它又被SVG2.0取代。SVG2.0正在制定当中，它采用了类似CSS3的制定方法，通过若干松散耦合的组件形成一套标准。</p> + +<p>除了完整的SVG推荐标准，W3C工作组还在2003年推出了SVG Tiny和SVG Basic。这两个配置文件主要瞄准移动设备。首先SVG Tiny主要是为性能低的小设备生成图元，而SVG Basic实现了完整版SVG里的很多功能，只是舍弃了难以实现的大型渲染（比如动画）。2008年，SVG Tiny1.2成为W3C推荐标准。</p> + +<p>另外还有一些关于SVG打印规格的项目，增加对多页面和颜色管理的支持，但是这项工作已经终止。</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> + +<p>{{ languages( { "de": "de/SVG/Tutorial/Einführung", "fr": "fr/SVG/Tutoriel/Introduction", "ja": "ja/SVG/Tutorial/Introduction", "zh-CN": "zh-CN/SVG/Tutorial/Introduction" } ) }}</p> diff --git a/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html b/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html new file mode 100644 index 0000000000..82bb1edf5b --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/other_content_in_svg/index.html @@ -0,0 +1,52 @@ +--- +title: 其它SVG内容 +slug: Web/SVG/Tutorial/Other_content_in_SVG +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Other_content_in_SVG +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}</p> + +<p>除了图形化原件，如矩形和圆形之外，SVG还提供了一些元素用来在图片中嵌入别的类型的内容。</p> + +<h3 id="嵌入光栅图像">嵌入光栅图像</h3> + +<p>很像在HTML中的<code>img</code>元素，SVG有一个<code>image</code>元素，用于同样的目的。你可以利用它嵌入任意光栅（以及矢量）图像。它的规格要求应用至少支持PNG、JPG和SVG格式文件。</p> + +<p>嵌入的图像变成一个普通的SVG元素。这意味着，你可以在其内容上用剪切、遮罩、滤镜、旋转以及其它SVG工具：</p> + +<pre class="brush: html"><svg version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="200" height="200"> + <image x="90" y="-65" width="128" height="146" transform="rotate(45)" + xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/> +</svg></pre> + +<div class="hidden"> +<h2 id="Embedding_raster_images">Embedding_raster_images</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><svg version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="200" height="200"> + <image x="90" y="-65" width="128" height="146" transform="rotate(45)" + xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/> +</svg> +</pre> +</div> + +<p>{{ EmbedLiveSample('Embedding_raster_images','220','220','/files/16567/rotate-image-demo.png') }}</p> + +<h3 id="嵌入任意XML">嵌入任意XML</h3> + +<p>因为SVG是一个XML应用，所以你<strong>总是</strong>可以在SVG文档的任何位置嵌入任意XML。但是你没有必要定义周围的SVG需要怎样反作用于这个内容。实际上，在一个遵从的浏览者中，根本没有反作用的方法，数据将简单被忽略。因此特地在SVG中添加了{{ SVGElement("foreignObject") }} 元素。它的唯一的目的是作为其它标记的容器和SVG样式属性的载体（更突出的<code>width</code>和<code>height</code>用来定义该对象占用的空间。）。</p> + +<p>foreignObject元素是一个好办法，用来在SVG中嵌入XHTML。如果你有更长的文本，该HTML布局比SVG <code>text</code>元素更适合。另一个经常被引用的用例是用MathML写的方程式。对于SVG的科学应用，它是连接两个世界的一个很好的办法。</p> + +<div class="note">注意：请记住，<code>foreignObject</code>元素的内容是能被浏览器加工的。一个独立的SVG浏览器不太可能呈现HTML或MathML。</div> + +<p>因为<code>foreignObject</code>是一个SVG元素，所以你可以像用图像那样，使用任何SVG的精华，它将被应用到它的内容。</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/paths/index.html b/files/zh-cn/web/svg/tutorial/paths/index.html new file mode 100644 index 0000000000..94cbf89821 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/paths/index.html @@ -0,0 +1,214 @@ +--- +title: 路径 +slug: Web/SVG/Tutorial/Paths +translation_of: Web/SVG/Tutorial/Paths +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> + +<p>如上一章所说，<a href="/zh-CN/docs/Web/SVG/Element/path" title="zh-CN/SVG/Element/path"><code><path></code></a>元素是SVG<a href="/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes">基本形状</a>中最强大的一个。 你可以用它创建线条, 曲线, 弧形等等。</p> + +<p>另外，path只需要设定很少的点，就可以创建平滑流畅的线条（比如曲线）。虽然<code>polyline</code>元素也能实现类似的效果，但是必须设置大量的点（点越密集，越接近连续，看起来越平滑流畅），并且这种做法不能够放大（放大后，点的离散更明显）。所以在绘制SVG时，对路径的良好理解很重要。虽然不建议使用XML编辑器或文本编辑器创建复杂的路径，但了解它们的工作方式将有助于识别和修复SVG中的显示问题。</p> + +<p><a href="/ㄣ/SVG/Tutorial/Basic_Shapes" title="ㄣ/SVG/Tutorial/Basic Shapes">上一章</a>提到过，path元素的形状是通过属性<code>{{ SVGAttr("d") }}</code>定义的，属性<code>d</code>的值是一个“命令+参数”的序列，我们将讲解这些可用的命令，并且展示一些示例。</p> + +<p>每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你需要移动到的那个点的x和y轴坐标。比如移动到(10,10)这个点的命令，应该写成“M 10 10”。这一段字符结束后，解析器就会去读下一段命令。每一个命令都有两种表示方式，一种是用<strong>大写字母</strong>，表示采用绝对定位。另一种是用<strong>小写字母</strong>，表示采用相对定位（例如：<em>从上一个点开始，向上移动10px，向左移动7px</em>）。</p> + +<p><code>因为属性d</code>采用的是用户坐标系统，所以<strong>不需标明单位</strong>。在后面的教程中，我们会学到如何让变换路径，以满足更多需求。</p> + +<h2 id="Line_commands" name="Line_commands">直线命令</h2> + +<p><code><path></code>元素里有5个画直线的命令，顾名思义，直线命令就是在两个点之间画直线。首先是“Move to”命令，M，前面已经提到过，它需要两个参数，分别是需要移动到的点的x轴和y轴的坐标。假设，你的画笔当前位于一个点，在使用M命令移动画笔后，只会移动画笔，但不会在两点之间画线。因为M命令仅仅是移动画笔，但不画线。所以M命令经常出现在路径的开始处，用来指明从何处开始画。</p> + +<pre class="notranslate">M x y +</pre> + +<p>或</p> + +<pre class="notranslate">m dx dy</pre> + +<p>这有一个比较好的例子，不过我们没画任何东西，只是将画笔移动到路径的起点，所以我们不会看到任何图案。但是，我把我们移动到的点标注出来了，所以在下面的例子里会看到(10,10)坐标上有一个点。注意，如果只画path，这里什么都不会显示。（这段不太好理解，说明一下：为了更好地展示路径，下面的所有例子里，在用path绘制路径的同时，也会用circle标注路径上的点。）<img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> + +<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10"/> + + <!-- Points --> + <circle cx="10" cy="10" r="2" fill="red"/> + +</svg></pre> + +<p>能够真正画出线的命令有三个（M命令是移动画笔位置，但是不画线），最常用的是“Line to”命令，<code>L</code>，<code>L</code>需要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。</p> + +<pre class="eval notranslate"> L x y (or l dx dy) +</pre> + +<p>另外还有两个简写命令，用来绘制水平线和垂直线。<code>H</code>，绘制水平线。<code>V</code>，绘制垂直线。这两个命令都只带一个参数，标明在x轴或y轴移动到的位置，因为它们都只在坐标轴的一个方向上移动。</p> + +<pre class="eval notranslate"> H x (or h dx) + V y (or v dy) +</pre> + +<p>现在我们已经掌握了一些命令，可以开始画一些东西了。先从简单的地方开始，画一个简单的矩形（同样的效果用<code><rect/></code>元素可以更简单的实现），矩形是由水平线和垂直线组成的，所以这个例子可以很好地展现前面讲的画线的方法。<img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> + +<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10 H 90 V 90 H 10 L 10 10"/> + + <!-- Points --> + <circle cx="10" cy="10" r="2" fill="red"/> + <circle cx="90" cy="90" r="2" fill="red"/> + <circle cx="90" cy="10" r="2" fill="red"/> + <circle cx="10" cy="90" r="2" fill="red"/> + +</svg></pre> + +<p>最后，我们可以通过一个“闭合路径命令”Z来简化上面的path，<code>Z</code>命令会从当前点画一条直线到路径的起点，尽管我们不总是需要闭合路径，但是它还是经常被放到路径的最后。另外，Z命令不用区分大小写。</p> + +<pre class="eval notranslate"> Z (or z) +</pre> + +<p>所以上面例子里用到的路径，可以简化成这样：</p> + +<pre class="eval notranslate"> <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> +</pre> + +<p>你也可以使用这些命令的相对坐标形式来绘制相同的图形，如之前所述，相对命令使用的是小写字母，它们的参数不是指定一个明确的坐标，而是表示相对于它前面的点需要移动多少距离。例如前面的示例，画的是一个80*80的正方形，用相对命令可以这样描述：</p> + +<pre class="eval notranslate"> <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/> +</pre> + +<p>上述路径是：画笔移动到(10,10)点，由此开始，向右移动80像素构成一条水平线，然后向下移动80像素，然后向左移动80像素，然后再回到起点。</p> + +<p>你可能会问这些命令有什么用，因为 <code><polygon></code> 和 <code><polyline></code> 可以做到画出一样的图形。答案是，这些命令可以做得更多。如果你只是画直线，那么其他元素可能会更好用，但是，path却是众多开发者在SVG绘制中经常用到的。据我所知，它们之间不存在性能上的优劣。但是通过脚本生成path可能有所不同，因为另外两种方法只需要指明点，而path在这方面的语法会更复杂一些。</p> + +<h2 id="Curve_commands" name="Curve_commands">曲线命令</h2> + +<p>绘制平滑曲线的命令有三个，其中两个用来绘制贝塞尔曲线，另外一个用来绘制弧形或者说是圆的一部分。如果你在Inkscape、Illustrator或者Photoshop中用过路径工具，可能对贝塞尔曲线有一定程度的了解。欲了解贝塞尔曲线的完整数学讲解，请阅读这份<a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Wikipedia的文档</a>。在这里不用讲得太多。贝塞尔曲线的类型有很多，但是在path元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q。</p> + +<h3 id="Bezier_Curves" name="Bezier_Curves">贝塞尔曲线</h3> + +<p>我们从稍微复杂一点的三次贝塞尔曲线C入手，三次贝塞尔曲线需要定义一个点和两个控制点，所以用C命令创建三次贝塞尔曲线，需要设置三组坐标参数：</p> + +<pre class="eval notranslate"> C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) +</pre> + +<p>这里的最后一个坐标(x,y)表示的是曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。如果你熟悉代数或者微积分的话，会更容易理解控制点，控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。（文字描述不好，维基百科上有图示，更直观。） <img alt="" class="internal" src="/@api/deki/files/159/=Cubic_Bezier_Curves.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> + +<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/> + <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/> + <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/> + <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/> + <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/> + <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/> + <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/> + <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/> + <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/> + +</svg> +</pre> + +<p>上面的例子里，创建了9个三次贝塞尔曲线。有一点比较遗憾，标记控制点的代码会比较庞大，所以在这里舍弃了。（之前所有点都用circle标记，此处一样，只不过没把代码列出来）。如果你想更准确地控制它们，可以自己动手把他们画出来。图例上的曲线从左往右看，控制点在水平方向上逐渐分开，图例上的曲线从上往下看，控制点和曲线坐标之间离得越来越远。这里要注意观察，曲线沿着起点到第一控制点的方向伸出，逐渐弯曲，然后沿着第二控制点到终点的方向结束。</p> + +<p>你可以将若干个贝塞尔曲线连起来，从而创建出一条很长的平滑曲线。通常情况下，一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变）。这样，你可以使用一个简写的贝塞尔曲线命令S，如下所示：</p> + +<pre class="eval notranslate"> S x2 y2, x y (or s dx2 dy2, dx dy) +</pre> + +<p>S命令可以用来创建与前面一样的贝塞尔曲线，但是，如果S命令跟在一个C或S命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用，前面没有C或S命令，那当前点将作为第一个控制点。下面是S命令的语法示例，图中左侧红色标记的点对应的控制点即为蓝色标记点。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/363/=ShortCut_Cubic_Bezier.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> +<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>另一种可用的贝塞尔曲线是二次贝塞尔曲线Q，它比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。</p> + +<pre class="eval notranslate"> Q x1 y1, x y (or q dx1 dy1, dx dy) +</pre> + +<p><img alt="" class="internal" src="/@api/deki/files/326/=Quadratic_Bezier.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> +<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>就像三次贝塞尔曲线有一个S命令，二次贝塞尔曲线有一个差不多的T命令，可以通过更简短的参数，延长二次贝塞尔曲线。</p> + +<pre class="eval notranslate"> T x y (or t dx dy) +</pre> + +<p>和之前一样，快捷命令T会通过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，可以只定义终点，就创建出一个相当复杂的曲线。需要注意的是，T命令前面必须是一个Q命令，或者是另一个T命令，才能达到这种效果。如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/364/=Shortcut_Quadratic_Bezier.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> +<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>虽然三次贝塞尔曲线拥有更大的自由度，但是两种曲线能达到的效果总是差不多的。具体使用哪种曲线，通常取决于需求，以及对曲线对称性的依赖程度。</p> + +<h3 id="Arcs" name="Arcs">弧形</h3> + +<p>弧形命令A是另一个创建SVG曲线的命令。基本上，弧形可以视为圆形或椭圆形的一部分。假设，已知椭圆形的长轴半径和短轴半径，并且已知两个点（在椭圆上），根据半径和两点，可以画出两个椭圆，在每个椭圆上根据两点都可以画出两种弧形。所以，仅仅根据半径和两点，可以画出四种弧形。为了保证创建的弧形唯一，A命令需要用到比较多的参数：</p> + +<pre class="eval notranslate"> A rx ry x-axis-rotation large-arc-flag sweep-flag x y + a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy +</pre> + +<p>弧形命令A的前两个参数分别是x轴半径和y轴半径，它们的作用很明显，不用多做解释，如果你不是很清楚它们的作用，可以参考一下椭圆<a href="/zh-CN/docs/Web/SVG/Element/ellipse" title="zh-CN/SVG/Element/ellipse">ellipse</a>命令中的相同参数。弧形命令A的第三个参数表示弧形的旋转情况，下面的例子可以很好地解释它：</p> + +<p><img alt="" class="internal" src="/@api/deki/files/346/=SVGArcs_XAxisRotation.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> +<svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 315 + L 110 215 + A 30 50 0 0 1 162.55 162.45 + L 172.55 152.45 + A 30 50 -45 0 1 215.1 109.9 + L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> +</svg></pre> + +<p>如图例所示，画布上有一条对角线，中间有两个椭圆弧被对角线切开(x radius = 30, y radius = 50)。第一个椭圆弧的x-axis-rotation（x轴旋转角度）是0，所以弧形所在的椭圆是正置的（没有倾斜）。在第二个椭圆弧中，x-axis-rotation设置为-45，所以这是一个旋转了45度的椭圆，并以短轴为分割线，形成了两个对称的弧形。参看图示中的第二个椭圆形。</p> + +<p>对于上图没有旋转的椭圆，只有2种弧形可以选择，不是4种，因为两点连线（也就是对角线）正好穿过了椭圆的中心。像下面这张图，就是普通的情况，可以画出两个椭圆，四种弧。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15822/SVGArcs_XAxisRotation_with_grid_ellipses.png" style="height: 320px; width: 320px;"></p> + +<p>上面提到的四种不同路径将由接下来的两个参数决定。如前所讲，还有两种可能的椭圆用来形成路径，它们给出的四种可能的路径中，有两种不同的路径。这里要讲的参数是large-arc-flag（角度大小） 和sweep-flag（弧线方向），large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。下面的例子展示了这四种情况。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p> + +<pre class="notranslate"><?xml version="1.0" standalone="no"?> +<svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <path d="M80 80 + A 45 45, 0, 0, 0, 125 125 + L 125 80 Z" fill="green"/> + <path d="M230 80 + A 45 45, 0, 1, 0, 275 125 + L 275 80 Z" fill="red"/> + <path d="M80 230 + A 45 45, 0, 0, 1, 125 275 + L 125 230 Z" fill="purple"/> + <path d="M230 230 + A 45 45, 0, 1, 1, 275 275 + L 275 230 Z" fill="blue"/> +</svg></pre> + +<p>你应该已经猜到了，最后两个参数是指定弧形的终点，弧形可以简单地创建圆形或椭圆形图标，比如你可以创建若干片弧形，组成一个<em>饼图</em>。</p> + +<p>如果你是从<a href="/zh-CN/HTML/Canvas" title="zh-CN/HTML/Canvas">Canvas</a>过渡到SVG，那么弧形会比较难以掌握，但它也是非常强大的。用路径来绘制完整的圆或者椭圆是比较困难的，因为圆上的任意点都可以是起点同时也是终点，无数种方案可以选择，真正的路径无法定义。通过绘制连续的路径段落，也可以达到近似的效果，但使用真正的circle或者ellipse元素会更容易一些。</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/patterns/index.html b/files/zh-cn/web/svg/tutorial/patterns/index.html new file mode 100644 index 0000000000..bd58a30004 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/patterns/index.html @@ -0,0 +1,73 @@ +--- +title: Patterns +slug: Web/SVG/Tutorial/Patterns +tags: + - SVG +translation_of: Web/SVG/Tutorial/Patterns +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}</p> + +<h2 id="图案">图案</h2> + +<p>在我看来patterns（图案）是SVG中用到的最让人混淆的填充类型之一。它的功能非常强大，所以我认为他们值得讨论一下并且我们应至少对他们有最基本的了解。跟渐变一样，{{SVGElement('pattern')}}需要放在SVG文档的<defs>内部。</p> + +<pre class="brush: html"><?xml version="1.0" standalone="no"?> +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + + </defs> + + <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/> +</svg></pre> + +<p>{{ EmbedLiveSample('Patterns','220','220','/files/725/SVG_Pattern_Example.png') }}</p> + +<p>在pattern元素内部你可以包含任何之前包含过的其它基本形状，并且每个形状都可以使用之前学习过的任何样式样式化，包括渐变和半透明。这里我们在pattern中绘制两个矩形（两个矩形互相重叠，一个矩形是另一个矩形大小的二倍，且用于填充整个pattern）和一个圆。</p> + +<p>关于pattern容易混淆的事是，pattern定义了一个单元系统以及他们的大小。上例中，我们在pattern元素上定义了<code>width</code>和<code>height</code>属性，用于描述在重复下一个图案之前应该跨过多远。如果你想要在绘制时偏移矩形的开始点，也可以使用x和y属性，原因如下。</p> + +<p>就像前面使用了<code>gradientUnits</code>属性，同样的<code>pattern</code>也有一个属性<code>patternUnits</code>用于描述我们使用的属性单元。这同之前使用的<code>objectBoundingBox</code>默认值一样，所以当一个值为 1 时，它被缩放到应用 pattern 对象的宽高值。因此，我们希望 pattern 垂直和水平的重复4次，所以宽高被设置位0.25，这一位置 pattern 的宽高仅为总外框大小的 0.25。</p> + +<p>与渐变不同，pattern有第二个属性<code>patternContentUnits</code>，它描述了<code>pattern</code>元素基于基本形状使用的单元系统，这个属性默认值为<code>userSpaceOnUse</code>，与<code>patternUnits</code>属性相反，这意味着除非你至少指定其中一个属性值（<code>patternContentUnits</code>或<code>patternUnits</code>），否则在<code>pattern</code>中绘制的形状将与<code>pattern</code>元素使用的坐标系不同，当你手写这部分时会容易混淆。为了使上例生效，我们必须考虑我们的边框（200像素）大小和我们实际希望<code>pattern</code>垂直和水平重复 4 次的需求。这意味着每个 pattern 单元应该是 <code>50x50 </code>的方形，pattern 中的两个矩形和圆形的大小会被缩放适应到一个 50x50 的边框里，任何我们绘制在边框外的内容都不会显示。因为我们希望 pattern 从边框的左上角里开始，所以 pattern 也必须偏移 10 像素，也就是 pattern 的 <code>x</code> 和 <code>y</code> 属性需要调整为 <code>10/200=0.05</code>。</p> + +<p>如果对象改变了大小，pattern会自适应其大小，但是对象里面的内容不会自适应。所以当我们在 pattern 中还是放置 4 个重复的 pattern 时，组成 pattern 的对象将不会保持相同的大小，同时在他们之间会有大片空白区域。通过改变<code>patternContentUnits</code>属性，我们可以把所有的元素放到相同的单元系统中：</p> + +<pre class="brush: xml"> <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> + <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> + <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> + <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> +</pre> + +<p>现在，因为pattern内容与pattern本身处于相同的单元系统中，所以我们不用偏移边框以使pattern在正确的位置上开始，并且即使对象变大，pattern也会自动的缩放以保证pattern内部的对象数目和重复不变。这与 <code>userSpaceOnUse </code>系统不同，userSpaceOnUse 系统中如果对象改变大小，pattern本身会保持不变，只是重复更多次去填满边框。</p> + +<p>它有一点点的副作用，在Gecko中的圆如果半径设置得小于0.075（尽管半径应该设置的比这个值大得多。这个可能是pattern元素中的一个bug，或者也不算bug，我也不太清楚）的话绘制的时候可能会出现问题，为了规避这个问题，可能最好的办法是尽量避免在<code>objectBoundingBox</code>单元中绘制图形。</p> + +<p>在你想要使用pattern的时候，可能你并不中意这些方法中的任何一个，Pattern通常都是有确认的大小并且重复他们自己，与对象形状独立开来。要想创建这种pattern，pattern和它的内容必须在当前用户空间中绘制，这样当对象在做如下操作时他们才不会改变形状：</p> + +<pre class="brush: xml"> <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> +</pre> + +<p>当然，这意味着如果你后续改变了对象大小，pattern也不会缩放。上述三个举例在下图中放在一个矩形中展示，高度被轻微拉伸到300px，但是我注意到这不是完整的图片，并且有些其他选项可能你的应用不支持。</p> + +<p><img alt="Image:SVG_Pattern_Comparison_of_Units.png" class="internal" src="/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png"></p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/positions/index.html b/files/zh-cn/web/svg/tutorial/positions/index.html new file mode 100644 index 0000000000..294fe65838 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/positions/index.html @@ -0,0 +1,48 @@ +--- +title: 坐标定位 +slug: Web/SVG/Tutorial/Positions +translation_of: Web/SVG/Tutorial/Positions +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p> + +<h2 id="The_grid" name="The_grid">网格</h2> + +<p><img alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="float: right;"> 对于所有元素，SVG使用的坐标系统或者说网格系统，和<a href="/zh-CN/HTML/Canvas" title="zh-CN/HTML/Canvas">Canvas</a>用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。注意，这和你小时候所教的绘图方式是相反的。但是在HTML文档中，元素都是用这种方式定位的。</p> + +<h4 id="示例：">示例：</h4> + +<p>元素</p> + +<pre><rect x="0" y="0" width="100" height="100" /> + +</pre> + +<p>定义一个矩形，即从左上角开始，向右延展100px，向下延展100px，形成一个100*100大的矩形。</p> + +<h3 id="什么是_像素">什么是 "像素"?</h3> + +<p>基本上，在 SVG 文档中的1个像素对应输出设备（比如显示屏）上的1个像素。但是这种情况是可以改变的，否则 SVG 的名字里也不至于会有“Scalable”（可缩放）这个词。如同CSS可以定义字体的绝对大小和相对大小，SVG也可以定义绝对大小（比如使用“pt”或“cm”标识维度）同时SVG也能使用相对大小，只需给出数字，不标明单位，输出时就会采用用户的单位。</p> + +<p>在没有进一步规范说明的情况下，1个用户单位等同于1个屏幕单位。要明确改变这种设定，SVG里有多种方法。我们从<code>svg</code>根元素开始：</p> + +<pre><svg width="100" height="100"> + +</pre> + +<p>上面的元素定义了一个100*100px的SVG画布，这里1用户单位等同于1屏幕单位。</p> + +<pre><svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>> + +</pre> + +<p>这里定义的画布尺寸是200*200px。但是，viewBox属性定义了画布上可以显示的区域：从(0,0)点开始，100宽*100高的区域。这个100*100的区域，会放到200*200的画布上显示。于是就形成了放大两倍的效果。</p> + +<p>用户单位和屏幕单位的映射关系被称为<strong>用户坐标系统</strong>。除了缩放之外，坐标系统还可以旋转、倾斜、翻转。默认的用户坐标系统1用户像素等于设备上的1像素（但是设备上可能会自己定义1像素到底是多大）。在定义了具体尺寸单位的SVG中，比如单位是“cm”或“in”，最终图形会以实际大小的1比1比例呈现。</p> + +<p>下面是引自SVG1.1规范的一段说明：</p> + +<blockquote> +<p>[…] 假设在用户的设备环境里，1px等于0.2822222毫米（即分辨率是90dpi），那么所有的SVG内容都会按照这种比例处理： […] "1cm" 等于 "35.43307px" （即35.43307用户单位）；</p> +</blockquote> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/svg_fonts/index.html b/files/zh-cn/web/svg/tutorial/svg_fonts/index.html new file mode 100644 index 0000000000..0ff198dcff --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/svg_fonts/index.html @@ -0,0 +1,94 @@ +--- +title: SVG 字体 +slug: Web/SVG/Tutorial/SVG_fonts +translation_of: Web/SVG/Tutorial/SVG_fonts +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p> + +<p>当规定SVG时，在浏览器支持web字体并不流行。因为访问正确的字体文件对于正确呈现字体是有确定性的，SVG中添加了一个字体描述技术，以提供这个能力。它并不是为了和别的格式比如说PostScript或OTF兼容，而是为了将字形信息嵌入SVG呈现的一个简单的方法。</p> + +<div class="note"><strong>SVG字体当前只在Safari和Android浏览器中受支持。</strong><br> +Internet Explorer<a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx">还没有考虑实现它</a>，Chrome 38（和Opera25）<a href="https://www.chromestatus.com/feature/5930075908210688">移除了这个功能</a>，Firefox已经<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490">无限期推迟实施它</a>以专心实现<a href="/en/WOFF">WOFF</a>。别的工具比如说<a href="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a>插件、Batik和部分Inkscape支持SVG字体嵌入。</div> + +<p>定义一个SVG字体的基础是{{ SVGElement("font") }}元素。</p> + +<h2 id="定义一个字体">定义一个字体</h2> + +<p>在SVG中嵌入一个字体，有一些原料要求。让我们用一个示例演示它（来自<a href="http://www.w3.org/TR/SVG/fonts.html#FontElement">规范文档</a>的示例），并详细解释。</p> + +<pre><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="300"><!-- Outline of exclam. pt. glyph --></glyph> + <glyph unicode="@"><!-- Outline of @ glyph --></glyph> + <!-- more glyphs --> +</font> +</pre> + +<p>我们从{{ SVGElement("font") }}元素开始。这个携带了一个ID属性，使它能够通过一个<code>URI</code>被引用（如下所示）。属性<code>horiz-adv-x</code>定义了相比之单一字形的路径定义，一个字符的平均宽度。值<code>1000</code>设置了一个起作用的合理值。有一些陪同的属性，帮助进一步定义基本的字形盒布局。</p> + +<p>{{ SVGElement("font-face") }}元素在SVG中等同于CSS的 <a href="/en/CSS/@font-face" title="en/css/@font-face"><code>@font-face</code></a> 声明。它定义了最终字体的基本属性，比如说weight、style，等等。在上面这个示例中，最重要的是定义<code>font-family</code>，后面的CSS和SVG <code>font-family</code>属性可以引用它的值。属性<code>font-weight</code>和<code>font-style</code>跟CSS中的描述符有同样的目的。所有后面的属性都是字体布局引擎的呈现指令，举个例子，字形的全部高度可以<a href="http://en.wikipedia.org/wiki/Ascender_%28typography%29">提升</a>多少。</p> + +<p>它的子元素，{{ SVGElement("font-face-src") }}元素，相对于CSS的<code>@font-face</code>描述符中的<code>src</code>描述符。你可以利用它的子元素 {{ SVGElement("font-face-name") }}和{{ SVGElement("font-face-uri") }}把字体声明指向外源。以上示例表达了如果渲染器有一个名为“Super Sans Bold”的本地字体可用，它将使用这个本地字体。</p> + +<p>紧跟着{{ SVGElement("font-face-src") }}元素的是一个{{ SVGElement("missing-glyph") }}元素。它定义了如果一个特定的字形在字体中找不到，而且也没有回调机制的话，该如何显示。它同时还显示了如何创建字形：在里面简单添加任一个图形化SVG内容。你可以在这里使用任何其它的SVG元素，甚至是 {{ SVGElement("filter") }}元素、{{ SVGElement("a") }}元素或者 {{ SVGElement("script") }}元素。然而，为了简化字形，你可以简单添加一个属性<code>d</code>——它精确定义了字形的形状，就像标准SVG路径所做的那样。</p> + +<p>真正的字形是用{{ SVGElement("glyph") }}元素定义的。它最重要的属性是<code>unicode</code>。它定义了表达这个字形的unicode代码点。如果你还在一个字形上指定了{{htmlattrxref("lang")}}属性，你可以更进一步专门限定它为特定的语言（由目标上的<code>xml:lang</code>属性表达）。而且，你可以使用任意的SVG来定义这个字形，它允许用户代理所支持的很多效果。</p> + +<p>有两个进一步的元素，可以定义在<code>font</code>元素里面：{{ SVGElement("hkern") }}元素和{{ SVGElement("vkern") }}元素。这两个元素每个引用到至少两个字符（属性u1和属性u2）以及一个属性k。属性k决定了那些字符之间的距离应该减少多少。下面的示例指示用户代理把“A”和“V”字符放得比标准的字符间距更靠近一些。</p> + +<pre><hkern u1="A" u2="V" k="20" /> +</pre> + +<h2 id="引用一个字体">引用一个字体</h2> + +<p>如果你已经把你的字体声明如上放在一起，你可以使用一个单一的<code>font-family</code>属性以实现在SVG文本上应用字体：</p> + +<pre><font> + <font-face font-family="Super Sans" /> + <!-- and so on --> +</font> + +<text font-family="Super Sans">My text uses Super Sans</text> +</pre> + +<p>然而，你可以自由组合一些方法，在如何定义字体方面有极大的自由度。</p> + +<h3 id="选项：使用CSS_font-face">选项：使用CSS @font-face</h3> + +<p>你可以使用<code>@font-face</code>以引用远程（或者非远程）字体：</p> + +<pre><font id="Super_Sans"> + <!-- and so on --> +</font> + +<style type="text/css"> +@font-face { + font-family: "Super Sans"; + src: url(#Super_Sans); +} +</style> + +<text font-family="Super Sans">My text uses Super Sans</text></pre> + +<h3 id="选项：引用一个远程字体">选项：引用一个远程字体</h3> + +<p>上面提到的font-face-uri元素允许你引用一个外来字体，因此可以有很大的可重用性：</p> + +<pre><font> + <font-face font-family="Super Sans"> + <font-face-src> + <font-face-uri xlink:href="fonts.svg#Super_Sans" /> + </font-face-src> + </font-face> +</font> +</pre> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/svg_image_tag/index.html b/files/zh-cn/web/svg/tutorial/svg_image_tag/index.html new file mode 100644 index 0000000000..4b01b91f24 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/svg_image_tag/index.html @@ -0,0 +1,32 @@ +--- +title: SVG image element +slug: Web/SVG/Tutorial/SVG_Image_Tag +translation_of: Web/SVG/Tutorial/SVG_Image_Tag +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p> + +<p>SVG的{{ SVGElement("image") }}元素允许在一个SVG对象内部呈现光栅图像。</p> + +<p>在这个基本示例中，一个{{ SVGAttr("xlink:href") }} 属性引用了一个将呈现在SVG对象中的.jpg图像：</p> + +<pre class="brush: xml"><?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg width="5cm" height="4cm" version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> + <image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> +</svg></pre> + +<p>这里有一些重要的事情需要注意（引用自<a href="http://www.w3.org/TR/SVG/struct.html#ImageElement">W3规范文档</a>）：</p> + +<ul> + <li> + <p>如果你没有设置x属性或y属性，它们自动被设置为0。</p> + </li> + <li> + <p>如果你没有设置height属性或width属性，它们自动被设置为0。</p> + </li> + <li>如果width属性或height等于0，将不会呈现这个图像。</li> +</ul> + +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p> diff --git a/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.html b/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.html new file mode 100644 index 0000000000..a29b85a1da --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/svg_in_html_introduction/index.html @@ -0,0 +1,95 @@ +--- +title: SVG In HTML Introduction +slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction +tags: + - SVG +translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +--- +<h2 id="Overview" name="Overview">概述</h2> + +<p>本文及其相关示例展示了如何使用内联的 <a href="/zh-CN/docs/SVG" title="SVG">SVG</a> 给一个表单提供背景图片，它展示了如何按照编写常规XHTML代码相同的方式来通过<a href="/zh-CN/docs/JavaScript" title="JavaScript">JavaScript</a> 和 <a href="/zh-CN/docs/CSS" title="CSS">CSS</a> 操作图片。注意，该示例仅在支持XHTML（非HTML）并集成了SVG的浏览器中正常工作。</p> + +<h2 id="Source" name="Source">源码</h2> + +<p>源码如下： <a class="external external-icon" href="/presentations/xtech2005/svg-canvas/SVGDemo.xml" title="presentations/xtech2005/svg-canvas/SVGDemo.xml">查看示例</a></p> + +<pre><html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>XTech SVG Demo</title> +<style> + stop.begin { stop-color:yellow; } + stop.end { stop-color:green; } + body.invalid stop.end { stop-color:red; } + #err { display:none; } + body.invalid #err { display:inline; } +</style> +<script> + function signalError() { + document.getElementById('body').setAttribute("class", "invalid"); + } +</script> +</head> +<body id="body" + style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> +<form> + <fieldset> + <legend>HTML Form</legend> + <p><label>Enter something:</label> + <input type="text"/> + <span id="err">Incorrect value!</span></p> + <p><input type="button" value="Activate!" onclick="signalError();" /></p> + </fieldset> +</form> + +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" + style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> + <linearGradient id="gradient"> + <stop class="begin" offset="0%"/> + <stop class="end" offset="100%"/> + </linearGradient> + <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> + <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> +</svg> +</body> +</html> +</pre> + +<h2 id="Discussion" name="Discussion">讨论</h2> + +<p>该页面主要是常规的XHTML、CSS和Javascript，唯一有趣的部分就是包含了<svg>元素。该元素及其子元素都被声明在SVG的命名空间内。它包含一个渐变和两个渐变填充的形状。该渐变颜色的终值颜色由CSS设置，当用户在表单中输入了错误信息，脚本会给<body>设置一个<code>invalid</code>属性，样式规则将渐变颜色的<code>end-stop</code>颜色设置为红色（另一个样式规则用于展示错误提示信息）</p> + +<p>该方法有如下几点需要注意：</p> + +<ul> + <li>我们单独举出了一个可能存在的网站构成部分——表单，并为其添加了吸引人的、交互性的背景</li> + <li>该方法通过不展示背景图片的方式，向后兼容了不支持SVG的浏览器</li> + <li>它非常简单且运行良好</li> + <li>这个图片能够智能的自动适应其需要的大小</li> + <li>我们可以给HTML和SVG都显式声明样式规则</li> + <li>相同的脚本同时操作了HTML和SVG</li> + <li>该文档完全符合标准</li> +</ul> + +<div class="note"> +<p>如果需要给一个内嵌的SVG元素通过DOM方法添加一个有外链的图片，我们需要使用 <code>setAttributeNS</code> 来设置外链地址 <code>href</code>. 示例如下:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> img <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElementNS</span><span class="punctuation token">(</span><span class="string token">"http://www.w3.org/2000/svg"</span><span class="punctuation token">,</span> <span class="string token">"image"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +img<span class="punctuation token">.</span><span class="function token">setAttributeNS</span><span class="punctuation token">(</span><span class="string token">"http://www.w3.org/1999/xlink"</span><span class="punctuation token">,</span> <span class="string token">"xlink:href"</span><span class="punctuation token">,</span> <span class="string token">"move.png"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code> +</pre> +</div> + +<h2 id="Details" name="Details">细节</h2> + +<p>viewBox属性创建了一个与SVG图片坐标系相关联的逻辑坐标系，通过这种方式我们的图片被放置到了一个100x100的视觉系中。</p> + +<p><code>preserveAspectRatio属性指定了需要预设的数据，即指定了再有效大小内图片的居中、适配图片最大宽高，并裁切掉了多余部分。</code></p> + +<p>样式属性指定了SVG在form背景中的位置。</p> + +<h2 id="Related_Links" name="Related_Links">相关链接</h2> + +<ul> + <li>Another SVG in XHTML example: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">A swarm of motes</a></li> + <li><a href="http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml">Working example</a> 可以同时工作在安装有Adobe SVG Viwer的Mozilla和IE浏览器中。 （对于同时工作在Firefox和IE浏览器中得内联SVG，需要为每个浏览器的服务文档设置不同的Cotent-type。因为当你基于一个代理服务器获取页面的时候，如果在第二个浏览器中加载该案例将会失败，因其会获取错误的Content-Type）</li> +</ul> diff --git a/files/zh-cn/web/svg/tutorial/texts/index.html b/files/zh-cn/web/svg/tutorial/texts/index.html new file mode 100644 index 0000000000..6380942179 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/texts/index.html @@ -0,0 +1,74 @@ +--- +title: Texts +slug: Web/SVG/Tutorial/Texts +translation_of: Web/SVG/Tutorial/Texts +--- +<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div> + +<p>在SVG中有两种截然不同的文本模式. 一种是写在图像中的文本，另一种是SVG字体。关于后者我们将在教程的后面进行讲解，现在我们主要集中前者：写在图像中的文本。</p> + +<h2 id="基础">基础</h2> + +<p>我们已经在之前<a href="/zn-CN/docs/Web/SVG/Tutorial/Getting_Started">入门示例</a>中看到了，在一个SVG文档中，<text>元素内部可以放任何的文字。</p> + +<pre class="brush:xml notranslate"><text x="10" y="10">Hello World!</text> +</pre> + +<p>属性x和属性y性决定了文本在视口中显示的位置。属性<code>text-anchor</code>，可以有这些值：start、middle、end或inherit，允许决定从这一点开始的文本流的方向。</p> + +<p>和形状元素类似，属性<code>fill</code>可以给文本填充颜色，属性<code>stroke</code>可以给文本描边，形状元素和文本元素都可以引用渐变或图案, 相比较CSS2.1只能绘制简单的彩色文字，SVG显得更具有优势。</p> + +<h2 id="设置字体属性">设置字体属性</h2> + +<p>文本的一个至关重要的部分是它显示的字体。SVG提供了一些属性，类似于它们的CSS同行，用来激活文本选区。下列每个属性可以被设置为一个SVG属性或者成为一个CSS声明：<code>font-family</code>、<code>font-style</code>、<code>font-weight</code>、<code>font-variant</code>、<code>font-stretch</code>、<code>font-size</code>、<code>font-size-adjust</code>、<code>kerning</code>、<code>letter-spacing</code>、<code>word-spacing</code>和<code>text-decoration</code>。</p> + +<h2 id="其它文本相关的元素">其它文本相关的元素</h2> + +<h3 id="tspan">tspan</h3> + +<p>该元素用来标记大块文本的子部分，它必须是一个<code>text</code>元素或别的<code>tspan</code>元素的子元素。一个典型的用法是把句子中的一个词变成粗体红色。</p> + +<pre class="brush:xml notranslate"><text> + <tspan font-weight="bold" fill="red">This is bold and red</tspan> +</text> +</pre> + +<p><code>tspan</code>元素有以下的自定义属性：</p> + +<p><strong>x</strong><br> + 为容器设置一个新绝对<code>x</code>坐标。它覆盖了默认的当前的文本位置。这个属性可以包含一个数列，它们将一个一个地应用到<code>tspan</code>元素内的每一个字符上。</p> + +<p><strong>dx</strong><br> + 从当前位置，用一个水平偏移开始绘制文本。这里，你可以提供一个值数列，可以应用到连续的字体，因此每次累积一个偏移。</p> + +<p>此外还有属性<strong>y</strong>和属性<strong>dy</strong>作垂直转换。</p> + +<p><strong>rotate</strong><br> + 把所有的字符旋转一个角度。如果是一个数列，则使每个字符旋转分别旋转到那个值，剩下的字符根据最后一个值旋转。</p> + +<p><strong>textLength</strong><br> + 这是一个很模糊的属性，给出字符串的计算长度。它意味着如果它自己的度量文字和长度不满足这个提供的值，则允许渲染引擎精细调整字型的位置。</p> + +<h4 id="tref">tref</h4> + +<p><code>tref</code>元素允许引用已经定义的文本，高效地把它复制到当前位置。你可以使用<code>xlink:href</code>属性，把它指向一个元素，取得其文本内容。你可以独立于源样式化它、修改它的外观。</p> + +<pre class="brush:xml notranslate"><text id="example">This is an example text.</text> + +<text> + <tref xlink:href="#example" /> +</text> +</pre> + +<h4 id="textPath">textPath</h4> + +<p>该元素利用它的<code>xlink:href</code>属性取得一个任意路径，把字符对齐到路径，于是字体会环绕路径、顺着路径走：</p> + +<pre class="brush:xml notranslate"><path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" /> +<text> + <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> + This text follows a curve. + </textPath> +</text></pre> + +<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div> diff --git a/files/zh-cn/web/svg/tutorial/tools_for_svg/index.html b/files/zh-cn/web/svg/tutorial/tools_for_svg/index.html new file mode 100644 index 0000000000..9127b6fad3 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/tools_for_svg/index.html @@ -0,0 +1,64 @@ +--- +title: SVG工具 +slug: Web/SVG/Tutorial/Tools_for_SVG +translation_of: Web/SVG/Tutorial/Tools_for_SVG +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p> + +<p>现在我们已经讲解了SVG内部的基础。我们将看一看哪些工具可以制作或呈现SVG文件。</p> + +<h3 id="浏览器支持">浏览器支持</h3> + +<p>随着IE9面世，最终所有的主流浏览器将支持SVG：Internet Explorer 9、Mozilla Firefox、Safari、Google Chrome和Opera。基于Webkit的移动设备浏览器（主要是指iOS和Android），都支持SVG。在较老或者较小的设备上，一般支持SVG Tiny。</p> + +<h2 id="Inkscape">Inkscape</h2> + +<p>URL: <a class="external" href="http://www.inkscape.org" title="http://www.inkscape.org/">www.inkscape.org</a></p> + +<p>图形格式最重要的工具之一，是一个相当好的绘图程序。Inkscape提供了最先进的矢量绘图功能，而且它是开源的。</p> + +<p>此外它使用SVG作为它的原生文件格式。为了存储Inkcape特有的数据，它扩展了SVG文件，添加了自定义命名空间的元素和属性，但是你依然可以选择导出纯SVG文件。</p> + +<h2 id="Adobe_Illustrator">Adobe Illustrator</h2> + +<p>URL: <a class="external" href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p> + +<p>在Adobe收购Macromedia之前，它已经是最著名的SVG的推动者。长期以来，Illustrator对SVG支持得很好。然而，它输出的SVG经常显出一些怪癖，导致有必要为普适性而进行后续处理。</p> + +<h2 id="Apache_Batik">Apache Batik</h2> + +<p>URL: <a class="external" href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p> + +<p>Batik是Apache软件基金会支持下的一个开源工具集。这个工具包是用Java写的，提供了相当完整的SVG 1.1支持，而且还有很多源自于SVG 1.2计划的功能。</p> + +<p>除了查看器（Squiggle）以及输出为PNG的光栅化输出，Batik还提供了一个SVG完美打印机以格式化SVG文件，以及一个TrueType字体到SVG字体的转换器。</p> + +<p>与<a class="external" href="http://xmlgraphics.apache.org/fop/">Apache FOP</a>联用，Batki还可以把SVG转换成PDF。</p> + +<h3 id="其它呈现器">其它呈现器</h3> + +<p>要想从一个SVG源创建一个光栅图像，存在很多个项目。<a class="external" href="http://ImageMagick.org" title="http://imagemagick.org/">ImageMagick</a>是最著名的命名行图象处理工具之一。Wikipedia所用到的Gnome库<a class="external" href="http://library.gnome.org/devel/rsvg/" title="http://library.gnome.org/devel/rsvg/">rsvg</a>能把它们的SVG图形光栅化。</p> + +<h2 id="Raphael_JS">Raphael JS</h2> + +<p>URL: <a class="external" href="http://raphaeljs.com/">raphaeljs.com</a></p> + +<p>这是一个JavaScript库，表现为浏览器编译器之间的一个抽像层。特别老的Internet Explorer版本可以用生成的VML支持。VML，一种矢量标记语言，它是SVG的两个祖先之一，从IE 5.5以来就存在了。</p> + +<h2 id="Google_Docs">Google Docs</h2> + +<p>URL: <a class="external" href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p> + +<p>从Google Docs绘制，可以被输出为SVG。</p> + +<h2 id="Science">Science</h2> + +<p>这两个名声很响的策划工具xfig和gnuplot都支持导出为SVG。为了在web上呈现图像， <a href="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a>支持VML、SVG和canvas，基于浏览器的功能，自动决定使用哪种技术。</p> + +<p>在GIS（地理图形信息系统）应用中，SVG是常用的存储和呈现格式。请阅读<a class="external" href="http://carto.net">carto.net</a>以了解详情。</p> + +<h2 id="更多工具">更多工具</h2> + +<p>W3C提供了一个支持SVG的<a href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">程序列表</a>。</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p> |