CODEWITHSUNDEEP
csssvg
Jordan Carter
Jordan Carter

Reputation: 1336

CSS clip-path with inline SVG not working

I'm not sure why this is not working. It should clip the green rectangle on a diagonal. If possible, I would prefer not to change my html structure (changing the SVG is fine).

.el-to-clip{
  clip-path: url(#nav-path);
  width: 500px;
  height: 1000px;
  background-color: green;
}
<svg width="0" height="0">
  <defs>
		<clipPath id="nav-path" clipPathUnits="objectBoundingBox">
		  <polygon points="0 0, 73 0, 100 100, 0 100"></polygon>
	  </clipPath>
  </defs>
</svg>
  
<div class="el-to-clip"></div>

Upvotes: 0

Views: 740

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

objectBoundingBox units are in the range 0..1 Perhaps you meant .73 and 1 as below.

.el-to-clip{
  clip-path: url(#nav-path);
  width: 500px;
  height: 1000px;
  background-color: green;
}
<svg width="0" height="0">
  <defs>
		<clipPath id="nav-path" clipPathUnits="objectBoundingBox">
		  <polygon points="0 0, .73 0, 1 1, 0 1"></polygon>
	  </clipPath>
  </defs>
</svg>
  
<div class="el-to-clip"></div>

Upvotes: 1

Related Questions