diff options
Diffstat (limited to 'files/zh-cn/web/svg/attribute/in/index.html')
| -rw-r--r-- | files/zh-cn/web/svg/attribute/in/index.html | 105 |
1 files changed, 105 insertions, 0 deletions
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> |