mozilla

Compare Revisions

Clipping and masking

Change Revisions

Revision 647601:

Revision 647601 by trevorh on

Revision 647915:

Revision 647915 by trevorh on

Title:
Clipping and masking
Clipping and masking
Slug:
Web/SVG/Tutorial/Clipping_and_masking
Web/SVG/Tutorial/Clipping_and_masking
Tags:
"NeedsLiveSample", "SVG", "SVG:Tutorial", "Advanced"
"NeedsLiveSample", "SVG", "SVG:Tutorial", "Advanced"
Content:

Revision 647601
Revision 647915
n25    <pre class="brush: xml">n25    <pre class="brush: html">
26&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xl
 >ink="http://www.w3.org/1999/xlink"&gt;
27  &lt;defs&gt;
26&lt;clipPath id="cut-off-bottom"&gt;28    &lt;clipPath id="cut-off-bottom"&gt;
27  &lt;rect x="0" y="0" width="200" height="100" /&gt;29      &lt;rect x="0" y="0" width="200" height="100" /&gt;
28&lt;/clipPath&gt;30    &lt;/clipPath&gt;
31  &lt;/defs&gt;
n30&lt;circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottn33  &lt;circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bo
>om)" /&gt;>ttom)" /&gt;
34&lt;/svg&gt;
n39      <img alt="clipdemo.png" class="internal default" src="/@apin43      {{ EmbedLiveSample('Creating_clips','220','220','/files/322
>/deki/files/4933/=clipdemo.png">>4/clipdemo.png') }}
n50    <pre class="brush: xml">n54    <pre class="brush: html">
n70      <img alt="maskdemo.png" class="internal default" src="/@apin74      {{ EmbedLiveSample('Masking','220','220','/files/3234/maskd
>/deki/files/4945/=maskdemo.png">>emo.png') }}
n84    <pre class="brush: xml">n88    <pre class="brush: html">
89&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xl
 >ink="http://www.w3.org/1999/xlink"&gt;
85&lt;rect x="0" y="0" width="200" height="200" fill="blue" /&gt;90  &lt;rect x="0" y="0" width="200" height="200" fill="blue" /&gt;
86&lt;circle cx="100" cy="100" r="50" stroke="yellow" stroke-width=91  &lt;circle cx="100" cy="100" r="50" stroke="yellow" stroke-widt
>"40" stroke-opacity=".5" fill="red" /&gt;>h="40" stroke-opacity=".5" fill="red" /&gt;
92&lt;/svg&gt;
t89      <img alt="opacitydemo.png" class="internal default" src="/@t95      {{ EmbedLiveSample('Transparency_with_opacity','220','220',
>api/deki/files/4942/=opacitydemo.png">>'/files/3231/opacitydemo.png') }}

Back to History