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