Utilizing SVG and CSS together: Implementing clip-path in a flexbox layout

This task may seem simple to some, but I am struggling to mask an image with an SVG graphic.

I have created an SVG with the clipPath element:

<svg id="heart-path-container" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
 viewBox="0 0 50 50" xml:space="preserve">
  <clipPath id="heart-path" clipPathUnits="objectBoundingBox">
    <path d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
            c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
            c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z">    
            </path>
  </clipPath>
</svg>

And I also have an SVG with the image in it:

<svg id="heart-image-container" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
 viewBox="0 0 50 50" xml:space="preserve">
  <image class="clip-image" xlink:href="https://images.unsplash.com/photo-1490810277975-e64342ceecf0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=88e69bf894f334456f8ae269752556e1&auto=format&fit=crop&w=2250&q=80"></image>
</svg>

In CSS, I specify that the image should be clipped with the SVG clipPath element.

.clip-image{
    width: 100%;
    height: 100%;
    clip-path: url(#heart-path);
}

However, the clipping is not working as intended.

I have created a fiddle to demonstrate that nothing is being clipped.

Can someone please point out what I am doing wrong?

https://codepen.io/Marvbuster/pen/MXvbXo

htmlcsssvg

Answer №1

Ensuring that your coordinates are within the range of 0 and 1 is crucial when using objectBoundingBox coordinates. In your case, the clip path coordinates exceed this range, being approximately 50 times too large.

A simple solution would be to employ a transform to scale your path back down to the appropriate size.

body, html{
  height: 100%;
}

svg{
  position: absolute;
  width: 100%;
  height: 100%;
}

.clip-image{
    width: 100%;
    height: 100%;
    clip-path: url(#heart-path);
}

.wrapper{
  position: relative;
  margin: 0 auto;
  height: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
}

section{
  position: relative;
  background: red;
  flex: 1;
  width: 100%;
}
<div class="wrapper">

  <section></section>
  
  <section>
    <svg x="0px" y="0px">
      <clipPath id="heart-path" clipPathUnits="objectBoundingBox">
        <path d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
                 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
                 c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z"
              transform="scale(0.02,0.02)"></path>
      </clipPath>
    </svg>

    <svg id="heart-image-container" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
 viewBox="0 0 50 50" xml:space="preserve">

      <image class="clip-image" xlink:href="https://images.unsplash.com/photo-1490810277975-e64342ceecf0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=88e69bf894f334456f8ae269752556e1&auto=format&fit=crop&w=2250&q=80"></image>

    </svg>
  
  
  </section>
  
  <section></section>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Progressive Web App with Vue.js and WordPress Rest API integration

When creating an ecommerce website using Wordpress, I utilized Python for scraping data from other websites to compare prices and bulk upload products through a CSV file. My next goal is to learn Vue and transform the website into a PWA as it will be esse ...

javascripthtmlvue.jsprogressive-web-appswoocommerce-rest-api

problem with the picture and wrapper expanding to fill the entire width of the screen

I'm having an issue with the image I added and its hover effect. The image seems to be leaving space on both sides of the screen, even though I've included background-size: cover and width:100% in my code. Could someone please point out where I ...

htmlcssuser-interfacebootstrap-4background-image

Maintaining the proportions of images in different screen sizes when resizing

I apologize if this question has already been addressed, but I have been unable to find a solution that works for my specific issue. My Gallery consists of a side list of available images in one section, which when clicked changes the image source in anot ...

javascripthtmlcss

What is the best way to generate a ul-li structure using JSON input and jQuery?

There is a JSON variable present: var links=[{"text":"Home","href":"http://home.com","icon":"fas fa-home","target":"_top","title":"My Home","children":[{"text":"home2","href":"home2.com","icon":"fas fa-chart-bar","target":"_self","title":"home2","category ...

javascriptjqueryhtmljson

Incorporate a curved progress line into the progress bar

Currently, I am working on creating a customized progress bar: .create-progress-bar { padding: 0 !important; margin: 25px 0; display: flex; } .create-progress-bar li { display: flex; flex-direction: column; list-style-type: none ...

htmlcss

Ways to align content on navbar (Bootstrap 5)

I am currently working on a minimal navbar design using Bootstrap 5. In this setup, there are two main elements - the 'navbar-brand' for the logo/brand and the navigation links. My goal is to have the brand/logo aligned all the way to the left, ...

htmlcssbootstrap-4bootstrap-5

Modify section background color for every iteration in an image carousel

Is it possible to dynamically change the background color of the cd-hero section each time a new image is loaded in a simple slider on the home page? Can this be achieved by storing predefined colors in an array so that different images trigger different b ...

javascriptjqueryhtmlcss

The transfer of information through HTTP

I have been exploring the inner workings of HTTP servers and clients to better understand how data is transmitted. Despite reading numerous articles on the topic, I still have some lingering questions that remain unanswered. I would like to walk through th ...

javascripthtmlsocketshttpserver-side

The fancybox scroll feature is visible when using a browser, but unfortunately, it does not appear on the

I noticed that the scrollbar in my fancybox is not showing up on iPad, but it does display when using Google Chrome on Desktop. You can find the page here. The issue seems to be with the vertical scroll bar not appearing on iPad. Has anyone encountered th ...

jqueryhtmlcssipadfancybox

Guide on adjusting canvas height to match Full Document height (covering entire page)

Hello everyone, I'm getting in the holiday spirit by adding some snow falling effects using Canvas and it looks pretty awesome. The only issue is that it's filling up the entire screen due to: c.width = innerWidth; c.height = innerHeight; If a ...

jqueryhtmlcsscanvas

What is the best way to pass the ng-repeat value to the controller in AngularJS

On my webpage, I am trying to utilize ng-repeat with an array like the one below: var array = [{name: Bill, age: 12, number: 1}, {name: Tyrone, age: 11, number: 2}, {name: Sarah, age: 14, number: 3}]; I want to have a button that, when clicked, sends eit ...

javascripthtmlangularjssubmit

Unable to retrieve all form properties when using enctype='multipart/form-data'

Recently, my NodeJS server has been successfully uploading files to Amazon using a secret form. However, in an effort to enhance security measures, I decided to introduce a password field to the form. Unfortunately, upon doing so, I encountered an issue wh ...

htmlnode.jsformsexpress

In regards to navigational bars that are oriented horizontally

Trying to create a simple navigation bar with horizontal links but facing issues. Can't seem to make it work despite following examples online: <!-- Navigator --> <div id="nav"> <ul> <li><a href="#"& ...

htmlcssnavigation

Ways to adjust the div height to match the span height

.headerDesc { width: 100% + 1px; height: 70px; background-color: #4d2765; margin: 0 -8px; } .headerDesc span { padding: 5px; position: absolute; color: white; font-family: 'Arial', sans-serif; text-al ...

htmlcss

How can I arrange individual events in agendaWeek view on FullCalendar.io and then merge them all into one line?

I am using Fullcalendar.io version 2 When I switch to the agendaWeek mode, all my events are displayed on one line in each day square. As a result, the more events I have, the thinner the event blocks become. Is there a way for me to display only one eve ...

javascriptjquerycssfullcalendar

How can external webpages be effectively integrated under a banner for a cohesive user experience?

Google Images serves as a prime example. Upon clicking on an image, a persistent frame appears at the top of the page, prompting users to easily navigate back to Google. Is there a specific term for this method and what would be the most effective approach ...

htmlcssiframe

What is the best way to align the content of a <ul> in the center while keeping the text left-aligned and setting a max-width

UPDATE: Including an image for better visualization: [![Check out the image link][1]][1] To understand more clearly, refer to this fiddle: https://jsfiddle.net/c7jazc9z/2/ Currently, I have a list with items aligned to the left. The goal is to center th ...

htmlcss

How to Show a Div When Clicking using Javascript

Looking for a way to toggle the visibility of a div element on click and hide it when clicked anywhere else. window.addEventListener('load', function() { $$('a.tooltip').each(function(link) { var tooltip = document. ...

javascripthtmlonclick

Troubleshooting mat-accordion title problem on mobile devices

Despite reading numerous blogs and conducting extensive searches on Google, I am still unable to resolve the CSS issue related to Angular material below. Your assistance in fixing this problem would be greatly appreciated. Desktop view: https://i.stack.im ...

htmlcssangularangular-material

The Mystery of jQuery Isotope Plugin: Why Can't I Add "display:none" Inline?

I'm currently in the process of integrating Isotope into my latest Wordpress theme. However, I've encountered an issue where it's not appearing on the page due to some external factor adding an inline style (display:none) to the main isotope ...

javascriptjquerycssjquery-pluginsjquery-isotope