Search code examples
htmlcsssvgclip-path

I want to implement SVG clip-path for SVG element

I want to implement SVG clip-path for SVG element. I have a DIV element in which I want to put SVG element which will act as a clipping mask, and also I have the separate SVG element that has an image to which the clipping mask will be applied.

  1. The first problem I faced with is that clipping mask moves to the left top corner of the viewport but not located inside of the parent DIV element.
  2. The second problem is that I want to make an image on the full screen not depending on the screen size.

Incorrect Mask Circle

Correct Mask Circle (what I want to have)

Do you have suggestions how to make it?

Thanks in advance! 

html, body { margin:0; padding:0; overflow:hidden }

svg { position:absolute; top:0; left:0;}


.image-clip-src {
  width: 100%;
  height: 100%;
}

.svg-wrapper {
  width: 72px;
  height: 72px;
  padding: 2.5em;
  border: 1px solid #4D4F51;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  position: fixed;
  top: 55%;
  z-index: 9;
  left: 64%;
  transform: translateY(-50%);
  cursor: pointer;
}

.clipped-image image {
  clip-path: url(#clipping);
}
<svg class="clipped-image" width="100%" height="100%" viewBox="0 0 1440 960" preserveAspectRatio="xMinYMin meet">
      <image class="image-clip-src" xlink:href="https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=1650&q=80" width="100%" height="100%" overflow="visible"/>
</svg>

<div class="svg-wrapper">
  <svg class="svg-defs">
    <defs>
      <clipPath id="clipping">
      <circle r="72" stroke="black" stroke-width="3"/>
      </clipPath>
    </defs>
  </svg>
</div>

Solution

  • That's not the way SVG works.

    When you tell something to use a clip path, all it sees is the clip path definition itself. It doesn't know or care about where on the page you have positioned it's parent <svg>.

    If you want the clip circle to be at a certain position on the water image, you need to specify its position using cx and cy.

    html, body { margin:0; padding:0; overflow:hidden }

svg { position:absolute; top:0; left:0;}


.image-clip-src {
  width: 100%;
  height: 100%;
}

.clipped-image image {
  clip-path: url(#clipping);
}
    <svg class="clipped-image" width="100%" height="100%" viewBox="0 0 1440 960" preserveAspectRatio="xMinYMin meet">
  <defs>
    <clipPath id="clipping">
      <circle cx="64%" cy="55%" r="72" stroke="black" stroke-width="3"/>
    </clipPath>
  </defs>
  <image class="image-clip-src" xlink:href="https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=1650&q=80" width="100%" height="100%" overflow="visible"/>
  <circle cx="64%" cy="55%" r="72" fill="none" stroke="#4D4F51" stroke-width="1"/>
</svg>