Custom SVG shape clip path image

Question

Been trying to work this out but have wasted so much time I think its best for me to just ask.

The objective is to have custom (responsive) shapes - which house an image (example below):

I've followed some online sources and have managed to get this (kinda) working with:

SVG custom path and clip-path

<header>
<h1><span class="text-shadow">Hiking</span><br>
    <span class="text-shadow">The Pinicles</span><br>
    <span class="text-shadow">NZ</span></h1>

<svg width='0' height='0'>
  <defs>
    <clipPath id='clipper'>
      <path d="M0 830.5V0.500008H514C514 0.500008 575.5 0.500008 632.5 146.5C689.5 292.5 239.5 646.667 0 830.5Z" fill="#C4C4C4"/>
    </clipPath>
  </defs>
</svg>
<img class="headerIMG" src="/ASSETS/IMG/blog-images/mountain.JPG" alt="">

And applying the clip path to the image:

    img.headerIMG {
    clip-path: url(#clipper);
}

Result:

What I am trying to do and failing at is:

moving the IMG to position it so that a different part of the photo is showing (not the top left)
resizing the SVG clip path so it could be 100vh or 50vh depending on the media query used.

Any help here would be great and please feel free to ask any questions you might have to better understand what I am trying to do.

Please take a look at this: https://stackoverflow.com/questions/65457332/svg-clip-path-resizing-according-to-viewport/65458270#65458270 — enxaneta, Jul 10 '21 at 14:41

score 0 · Answer 1 · answered Jul 10 '21 at 15:58

There are a few different ways to move the image independently from the clip path. But they boil down to applying the clip to a parent element, so you can move the image around within it.

For example

<div class="headerIMG-container">
  <img class="headerIMG" src="/ASSETS/IMG/blog-images/mountain.JPG" alt="">
</div>

.headerIMG-container {
  clip-path: url(#clipper);
}

.headerIMG {
  transform: tarnslate(0, -100px);
}

or something like

<div class="headerIMG></div>

.headerIMG {
  clip-path: url(#clipper);
  background: url(/ASSETS/IMG/blog-images/mountain.JPG) no-repeat;
  background-position: 0px 100px;
}

or do it all in the SVG

<svg width="400" height="300">
  <defs>...clip...</defs>

  <g clip-path="url(#clipper)">
    <image class="headerIMG" xlink:href="/ASSETS/IMG/blog-images/mountain.JPG" width="???" height="???" transform="translate(0, -100)"/>
  </g>
</svg>

Custom SVG shape clip path image

1 Answers1