svg clipping to a path

10.1 Clipping to a path

Example 1. Clipping to a rectangular path

 <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <clipPath id="rectClip">
           <rect id="rect1" x="50" y="40" width="60" height="70"
                 style="stroke:#aaa; fill:none;"/>
        </clipPath>
     </defs>
     <!--  #cat clipped to the clipPath #rectClip-->
     <use xlink:href="svg_es_10_01_cat.svg#cat" style="clip-path:url(#rectClip);"/>
     <!--  whole #cat with clipping rectangle area outlined -->
     <g transform="translate(200,0)">
        <use xlink:href="#rect1"/>
        <use xlink:href="svg_es_10_01_cat.svg#cat"/>
     </g>
</svg>

Example 2. Complex clip paths

 <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="curveClip">
       <path  id="curve1"
              d = "M 5 55 C 25 5 45 -25 75 55 85 85 20 105 55 55 Z"
             style="stroke:#555; fill:none;"/>
    </clipPath>
    <clipPath id="textClip">
       <text  id="text1"
              x="20" y="20" transform="rotate(60)"
              style="font-family:'Liberation Sans'; font-size:48pt; fill:none; stroke:black;">
             CLIP
        </text>
        </clipPath>
        <g id="shapes">
          <rect x="0" y="50" width="90" height="60" style="fill:#999;"/>
          <circle cx="25" cy="25" r="25" style="fill:#666;"/>
          <polygon points="30 0 80 0 80 100 Z" style="fill:#ccc;"/>
        </g>
     </defs>
    <!-- draw with curved clip-path -->
    <use transform="translate(40,40)"
     xlink:href="#shapes" style="clip-path: url(#curveClip)"/>
    <!-- draw with text clip-path -->
     <use transform="translate(240,40)"
     xlink:href="#shapes" style="clip-path: url(#textClip)"/>
     <!-- show shapes and curve clip path -->
    <g transform="translate(40,240)">
        <use xlink:href="#shapes"/>
        <use xlink:href="#curve1"/>
    </g>
     <!-- show shapes and text path -->
    <g transform="translate(240,240)">
        <use xlink:href="#shapes"/>
        <use xlink:href="#text1"/>
    </g>
</svg>

Example 3. clipPathUnits using objectBoundingBox

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.

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
      <defs>
           <clipPath id="circularPath" clipPathUnits="objectBoundingBox">
               <circle cx="0.5" cy="0.5" r="0.5"/>
           </clipPath>
           <g id="shapes1">
               <rect x="0" y="0" width="100" height="50" style="fill:#999;"/>
               <circle cx="25" cy="25" r="25" style="fill:#666;"/>
               <polygon points="30 0 80 0 80 100" style="fill:#ccc;"/>
           </g>
           <g id="words">
               <text x="0" y="19" style="font-family:'Liberation Sans'; font-size:14pt;">
                   <tspan x="0" y="19">If you have form'd a circle</tspan>
                   <tspan x="12" y="35">to go into,</tspan>
                   <tspan x="0" y="51">Go into it yourself</tspan>
                   <tspan x="12" y="67">and see how you would do.</tspan>
                   <tspan x="50" y="87">&#8212;William Blake</tspan>
               </text>
           </g>
     </defs>
     <use xlink:href="#shapes1" transform="translate(150,50)" style="clip-path: url(#circularPath);"/>
     <use xlink:href="#words" transform="translate(80,250)" style="clip-path: url(#circularPath);"/>
 </svg>

For <marker>, <symbol>, and <svg> elements, which define their own viewport, you can also clip content to the viewport by using a style of overflow: hidden.

However, if the content has a meet value for preserveAspectRatio, the viewport may be larger than the viewBox.
To clip to the viewBox, create a <clipPath> element containing a rectangle that matches the minimum x, minimum y, width, and height of the viewBox.