SVGClipPathElement : SVGElement

Instance Properties

clipPathUnits : SVGAnimatedEnumeration<SVGUnitTypes> readonly

Details

Example:

<svg width='100' height='100' viewPort='0 0 100 100' version='1.1' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <clipPath id='circleClip' clipPathUnits='objectBoundingBox'>
      <circle cx='0.5' cy='0.5' r='0.5'/>
    </clipPath>
  </defs>

  <rect width='100' height='100' fill='blue' clip-path='url(#circleClip)'/>
</svg>

<style>
.circle {
  width: 100px; 
  height: 100px;
  background: red;
  -webkit-clip-path: url(#circleClip);
  clip-path: url(#circleClip);
}
</style>
<div class='circle'></div>

Run

Results:

home license contribute feedback toggle light/dark mode