svg clipping

untitled

<div id="svgess-CHP-9-EX-1">
<p><b>Example 9-1. Clipping to a rectangular path</b>
</p>
<pre>&lt;defs&gt;
&lt;clipPath id="rectClip"&gt;
    &lt;rect id="rect1" x="15" y="15"
       width="40" height="45"
       style="stroke: gray; fill: none;"/&gt;
&lt;/clipPath&gt;
&lt;/defs&gt;

&lt;!-- clip to rectangle --&gt;
&lt;use xlink:href="minicat.svg#cat" style="clip-path: url(#rectClip);"/&gt;

&lt;!--
  for reference, show entire picture with clipping area outlined --&gt;
&lt;g transform="translate(100,0)"&gt;
    &lt;use xlink:href="#rect1"/&gt;    &lt;!-- show clip rectangle --&gt;
    &lt;use xlink:href="minicat.svg#cat"/&gt;
&lt;/g&gt;
</pre>
</div>
<div id="svgess-CHP-9-FIG-1">
<p><b>Figure 9-1. Simple rectangular clipping</b>
</p><p><a href="/wiki/index.php/Image:SVG_Essentials_I_9_tt180.png" class="image" title="Simple rectangular clipping"><img alt="Simple rectangular clipping" src="/wiki/images/4/41/SVG_Essentials_I_9_tt180.png" width="167" height="83" border="0" /></a>
</p>
</div>
<p>As the name <tt>&lt;clipPath&gt;</tt> implies, you can clip to any arbitrary path. Indeed, the <tt>&lt;clipPath&gt;</tt> element can contain any number of basic shapes, <tt>&lt;path&gt;</tt> elements, or <tt>&lt;text&gt;</tt> elements. <a href="/wiki/index.php/SVG_Essentials/Clipping_and_Masking#svgess-CHP-9-EX-2" title="SVG Essentials/Clipping and Masking">Example 9-2</a> shows a group of shapes clipped to a curved path and the same group of shapes clipped by text.
</p>
<div id="svgess-CHP-9-EX-2">
<p><b>Example 9-2. Complex clip paths</b>
</p>
<pre>&lt;defs&gt;
&lt;clipPath id="curveClip"&gt;
    &lt;path id="curve1"
        d="M5 55 C 25 5, 45 -25, 75 55, 85 85, 20 105, 40 55 Z"
        style="stroke: black; fill: none;"/&gt;
&lt;/clipPath&gt;

&lt;clipPath id="textClip"&gt;
    &lt;text id="text1" x="20" y="20" transform="rotate(60)"
        style="font-size: 48pt; stroke: black; fill: none;"&gt;
    CLIP
    &lt;/text&gt;
&lt;/clipPath&gt;

&lt;g id="shapes"&gt;
&lt;rect x="0" y="50" width="90" height="60" style="fill: #999;"/&gt;
&lt;circle cx="25" cy="25" r="25" style="fill: #666;"/&gt;
&lt;polygon points="30 0 80 0 80 100" style="fill: #ccc;"/&gt;
&lt;/g&gt;
&lt;/defs&gt;

&lt;!-- draw with curved clip-path --&gt;
&lt;use xlink:href="#shapes" style="clip-path: url(#curveClip);" /&gt;

&lt;g transform="translate(100,0)"&gt;
    &lt;use xlink:href="#shapes"/&gt;
    &lt;use xlink:href="#curve1"/&gt;   &lt;!-- show clip path --&gt;
&lt;/g&gt;

&lt;!-- draw with text as clip-path --&gt;
&lt;g transform="translate(0,150)"&gt;
    &lt;use xlink:href="#shapes" style="clip-path: url(#textClip);"/&gt;
&lt;/g&gt;

&lt;g transform="translate(100,150)"&gt;
    &lt;use xlink:href="#shapes"/&gt;
    &lt;use xlink:href="#text1"/&gt;
&lt;/g&gt;
</pre>
</div>
<p>To help you see the areas better, the preceding SVG draws the clipping path above the entire figure; you see this in the right half of <a href="/wiki/index.php/SVG_Essentials/Clipping_and_Masking#svgess-CHP-9-FIG-2" title="SVG Essentials/Clipping and Masking">Figure 9-2</a>.
</p><p>The coordinates for the preceding clip paths have been specified in user coordinates. If you wish to express coordinates in terms of the object bounding box, then set <tt>clipPathUnits</tt> to <tt>objectBoundingBox</tt> (the default is <tt>userSpaceOnUse</tt>). <a href="/wiki/index.php/SVG_Essentials/Clipping_and_Masking#svgess-CHP-9-EX-3" title="SVG Essentials/Clipping and Masking">Example 9-3</a> uses a clip path that will produce a circular (or oval) window on any object that it's applied to.
</p>
<div id="svgess-CHP-9-EX-3">
<p><b>Example 9-3. clipPathUnits using objectBoundingBox</b>
</p>
<pre>&lt;defs&gt;
&lt;clipPath id="circularPath" clipPathUnits="objectBoundingBox"&gt;
    &lt;circle cx="0.5" cy="0.5" r="0.5"/&gt;
&lt;/clipPath&gt;

&lt;g id="shapes"&gt;
&lt;rect x="0" y="50" width="100" height="50" style="fill: #999;"/&gt;
&lt;circle cx="25" cy="25" r="25" style="fill: #666;"/&gt;
&lt;polygon points="30 0 80 0 80 100" style="fill: #ccc;"/&gt;
&lt;/g&gt;

&lt;g id="words"&gt;
&lt;text  x="0"  y="19" style="font-size: 12;"&gt;
&lt;tspan x="0"  y="19"&gt;If you have form'd a circle&lt;/tspan&gt;
&lt;tspan x="12" y="33"&gt;to go into,&lt;/tspan&gt;
&lt;tspan x="0"  y="47"&gt;Go into it yourself&lt;/tspan&gt;
&lt;tspan x="12" y="61"&gt;and see how you would do.&lt;/tspan&gt;
&lt;tspan x="50" y="80"&gt;&amp;#xad;William Blake&lt;/tspan&gt;
&lt;/text&gt;
&lt;/g&gt;
&lt;/defs&gt;

&lt;use xlink:href="#shapes" style="clip-path: url(#circularPath);" /&gt;
&lt;use xlink:href="#words" transform="translate(110,0)"
    style="clip-path: url(#circularPath);"/&gt;
</pre>
</div>
<div id="svgess-CHP-9-FIG-2">
<p><b>Figure 9-2. Complex path clipping</b>
</p><p><a href="/wiki/index.php/Image:SVG_Essentials_I_9_tt181.png" class="image" title="Complex path clipping"><img alt="Complex path clipping" src="/wiki/images/d/d7/SVG_Essentials_I_9_tt181.png" width="199" height="285" border="0" /></a>
</p>
</div>
<p>In <a href="/wiki/index.php/SVG_Essentials/Clipping_and_Masking#svgess-CHP-9-FIG-3" title="SVG Essentials/Clipping and Masking">Figure 9-3</a>, the geometric figures happen to have a square bounding box, so the clipping appears circular. The text is bounded by a rectangular area, so the clipping area appears to be an oval.
</p>
<div id="svgess-CHP-9-FIG-3">
<p><b>Figure 9-3. Use of a circular/oval clipping path</b>
</p><p><a href="/wiki/index.php/Image:SVG_Essentials_I_9_tt182.png" class="image" title="Use of a circular/oval clipping path"><img alt="Use of a circular/oval clipping path" src="/wiki/images/9/92/SVG_Essentials_I_9_tt182.png" width="276" height="100" border="0" /></a>
</p>
</div>
<div class="note">
<p><b>Note</b>
</p><p>Specify a clipping rectangle for <tt>&lt;marker&gt;</tt> and <tt>&lt;symbol&gt;</tt> tags with the <tt>clip</tt> style property. Its value is four whitespace-separated numbers specifying the rectangle's top, right, bottom, and left bounds. This sets the clip rectangle to match the marker or symbol's <tt>viewBox</tt>, rather than its viewport.
</p>
</div>