Responsive CSS Clip-path using SVG even after adding objectBoundingBox

Asked Feb 24 '16 at 10:52

Active Feb 24 '16 at 14:15

Viewed 123 times

html, body{
   margin:0;
  padding: 0;
}
div {
  background: crimson;
  width: 100vw;
  height: 100vh;
}
.clip {
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
}

<div class="clip">
  Test
</div>
<svg width="0" height="0">
  <defs>
    <clipPath id="svgPath">
      <path id="masksvg" d="M0,0H1449L828,900H0V0Z" />
    </clipPath>
  </defs>
</svg>

svg clip shape path is not responsive. http://codepen.io/praveenvijayan/full/PZMxqG

I tried adding objectBoundingBox.

I created a code snippet with minimum test case. Please view it in full screen to see the mask.

SVG

 <svg width="0" height="0">
  <defs>
     <clipPath id="svgPath" clipPathUnits="objectBoundingBox">
        <path id="masksvg" d="M0,0H1449L828,900H0V0Z"/> 
     </clipPath>
  </defs>
</svg>

CSS

.clip {
   -webkit-clip-path: url(#svgPath);
   clip-path: url(#svgPath);
}

edited Feb 24 '16 at 14:15

asked Feb 24 '16 at 10:52

Praveen Vijayan

6,521
2
29
28

use objectBoundingBox units if you want it responsive – Robert Longson Feb 24 '16 at 10:56
Tried viewBox. That is not working. – Praveen Vijayan Feb 24 '16 at 12:04
What's viewBox got to do with objectBounding box units? – Robert Longson Feb 24 '16 at 12:19
clipPathUnits="objectBoundingBox" - not worked. – Praveen Vijayan Feb 24 '16 at 13:17
You need to show us what you've written otherwise we don't know where you're going wrong. – Robert Longson Feb 24 '16 at 13:19
http://codepen.io/praveenvijayan/pen/PZMxqG – Praveen Vijayan Feb 24 '16 at 13:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104422/discussion-between-praveen-vijayan-and-robert-longson). – Praveen Vijayan Feb 24 '16 at 13:21
@paul-lebeal - this is not a duplicate question. The solution mentioned there is not working for me. – Praveen Vijayan Feb 24 '16 at 14:06
The values in the path d attribute are inappropriate for objectBoundingBox units – Robert Longson Feb 24 '16 at 14:16
@RobertLongson - I tried both values as discussed - objectBoundingBox & userSpaceOnUse. – Praveen Vijayan Feb 24 '16 at 14:18

Responsive CSS Clip-path using SVG even after adding objectBoundingBox

0 Answers0