CODEWITHSUNDEEP
htmlcsssvg
Navid Nazarian
Navid Nazarian

Reputation: 30

SVG clipPath coordinates issue

I have some problem on SVG clipPath align and transform.
Here is my HTML code:

<div class="box"></div>
<svg height="100%" width="100%" viewBox="0 0 600 600" >
  <clipPath id="clipped">
    <circle cx="100" cy="100" r="50"></circle>
  </clipPath>
  <circle cx="100" cy="100" r="50" fill="none" stroke="#000000"></circle>
</svg>

And here is the CSS:

body{
  margin:0;
  padding:0;
}
.box{
  position:absolute;
  width:100%;
  height:100%;
  background:pink;
  clip-path: url(#clipped);
  -webkit-clip-path: url(#clipped);
}

I have two circles inside of my svg with the same X and Y and R. As you can see my SVG element has width of 100% and height of 100% and the viewBox="0 0 600 600", so the contents of the svg will be transformed by resizing the browser window, except the clipped area of that div. In fact when I inspect elements with devTools, the position of both circles are the same, but masked area of that DIV is not in the right place. when I remove the viewBox, it will be ok, but I want my svg fits to screen. as I know the svg viewBox does not affect the clipPath, so what can I do to match the masked area in right place on top of the both circles even when I set the viewBox.
Here is the CodePen

Thanks.

Upvotes: 1

Views: 587

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101810

When you use an SVG clipPath on an HTML element, it is used as-is. As it is defined. It is not affected by any scaling that may be present in its parent SVG.

If you used the clipPath on an element in the SVG, it would be affected by the scaling.

Upvotes: 2

Related Questions