Scale SVG clipping mask without scaling the clipped element

user_9420597 0
Viewed 782

I have an SVG act as a clipping mask for a div element. The div is an image. I want to scale up (and rotate) the SVG clipping mask while making the image div hold still in place to achieve the revealing effect using gsap animation.

I understand that I'm scaling the whole div up, but I don't know how to scale the SVG clip-path. So how can I scale up just the SVG clipping mask, but not the image div?

.red {
  clip-path: url(#myClip);
  width:300px;
  height:300px;
  background-color: red;
  /*background-image: url(./img/project.jpg);*/
  background-size: cover;
  position:absolute;
}

.red:hover {
    transform: scale(1.5) rotate(-45deg);
}
<svg height="0" width="0">            
    <clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.003)" > 
        <path xmlns="http://www.w3.org/2000/svg" class="cls-2" d="M208.5,3.5c-61-4-125,31-141,94-5,19-5,39,4,57-10-48,21-95,64-116,31-15,66-17,99-7,30,9,59,26,77,53-31-33-75-55-121-51-36,3-73,24-86,59,18-27,47-42,79-44a130,130,0,0,1,104,43c31,36,47,85,35,131,10-65-25-138-93-155-19-5-39-5-57,4,48-10,95,21,116,64,15,31,17,66,7,99-9,30-26,59-53,77,33-31,55-75,51-121-3-36-24-73-59-86,27,18,42,47,44,79a130,130,0,0,1-43,104c-36,31-85,47-131,35,65,10,138-25,155-93,5-19,5-39-4-57,10,48-21,95-64,116-31,15-66,17-99,7-30-9-59-26-77-53,31,33,75,55,121,51,36-3,73-24,86-59-18,27-47,42-79,44a130,130,0,0,1-104-43c-31-36-47-85-35-131-10,65,25,138,93,155,19,5,39,5,57-4-48,10-95-21-116-64-15-31-17-66-7-99,9-30,26-59,53-77-33,31-55,75-51,121,3,36,24,73,59,86-27-18-42-47-44-79a130,130,0,0,1,43-104c36-31,85-47,131-35a66,66,0,0,1-14-1Z"/>
    </clipPath>
</svg>
        
<div href="test.html" class="red">
  <h1>Content Content</h1>
  <h1>Content Content</h1>
  <h1>Content Content</h1>
</div>

clip-path svg css
2 Answers

Put the svg after the div and scale the path instead of itself.

.red {
  clip-path: url(#myClip);
  width: 300px;
  height: 300px;
  background-color: red;
  /*background-image: url(./img/project.jpg);*/
  background-size: cover;
  position: absolute;
}

svg path {
  transform-box: fill-box;
  transform-origin: center;
}

.red:hover~svg path {
  transform: scale(1.5);
}
<div href="test.html" class="red">
  <h1>Content Content</h1>
  <h1>Content Content</h1>
  <h1>Content Content</h1>
</div>

<svg height="0" width="0">
            <clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.003)" > 
                <path xmlns="http://www.w3.org/2000/svg" class="cls-2" d="M208.5,3.5c-61-4-125,31-141,94-5,19-5,39,4,57-10-48,21-95,64-116,31-15,66-17,99-7,30,9,59,26,77,53-31-33-75-55-121-51-36,3-73,24-86,59,18-27,47-42,79-44a130,130,0,0,1,104,43c31,36,47,85,35,131,10-65-25-138-93-155-19-5-39-5-57,4,48-10,95,21,116,64,15,31,17,66,7,99-9,30-26,59-53,77,33-31,55-75,51-121-3-36-24-73-59-86,27,18,42,47,44,79a130,130,0,0,1-43,104c-36,31-85,47-131,35,65,10,138-25,155-93,5-19,5-39-4-57,10,48-21,95-64,116-31,15-66,17-99,7-30-9-59-26-77-53,31,33,75,55,121,51,36-3,73-24,86-59-18,27-47,42-79,44a130,130,0,0,1-104-43c-31-36-47-85-35-131-10,65,25,138,93,155,19,5,39,5,57-4-48,10-95-21-116-64-15-31-17-66-7-99,9-30,26-59,53-77-33,31-55,75-51,121,3,36,24,73,59,86-27-18-42-47-44-79a130,130,0,0,1,43-104c36-31,85-47,131-35a66,66,0,0,1-14-1Z"/>
            </clipPath>
        </svg>

user_106987410

Consider a different SVG where you add a rotation animation:

<svg viewBox="-20 -20 360 360">
 <path d="M208.5,3.5c-61-4-125,31-141,94-5,19-5,39,4,57-10-48,21-95,64-116,31-15,66-17,99-7,30,9,59,26,77,53-31-33-75-55-121-51-36,3-73,24-86,59,18-27,47-42,79-44a130,130,0,0,1,104,43c31,36,47,85,35,131,10-65-25-138-93-155-19-5-39-5-57,4,48-10,95,21,116,64,15,31,17,66,7,99-9,30-26,59-53,77,33-31,55-75,51-121-3-36-24-73-59-86,27,18,42,47,44,79a130,130,0,0,1-43,104c-36,31-85,47-131,35,65,10,138-25,155-93,5-19,5-39-4-57,10,48-21,95-64,116-31,15-66,17-99,7-30-9-59-26-77-53,31,33,75,55,121,51,36-3,73-24,86-59-18,27-47,42-79,44a130,130,0,0,1-104-43c-31-36-47-85-35-131-10,65,25,138,93,155,19,5,39,5,57-4-48,10-95-21-116-64-15-31-17-66-7-99,9-30,26-59,53-77-33,31-55,75-51,121,3,36,24,73,59,86-27-18-42-47-44-79a130,130,0,0,1,43-104c36-31,85-47,131-35a66,66,0,0,1-14-1Z">
   <animateTransform attributeName="transform" attributeType="XML"  type="rotate" from="0 160 160" to="360 160 160" dur="5s" repeatCount="indefinite"/>
  </path>
</svg>

Then apply it as mask and you can easily adjust the size like you want:

document.querySelector('button').addEventListener('click',function() {
     document.querySelector('.red').classList.toggle('active');
})
.red {
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-20 -20 360 360"><path xmlns="http://www.w3.org/2000/svg" class="cls-2" d="M208.5,3.5c-61-4-125,31-141,94-5,19-5,39,4,57-10-48,21-95,64-116,31-15,66-17,99-7,30,9,59,26,77,53-31-33-75-55-121-51-36,3-73,24-86,59,18-27,47-42,79-44a130,130,0,0,1,104,43c31,36,47,85,35,131,10-65-25-138-93-155-19-5-39-5-57,4,48-10,95,21,116,64,15,31,17,66,7,99-9,30-26,59-53,77,33-31,55-75,51-121-3-36-24-73-59-86,27,18,42,47,44,79a130,130,0,0,1-43,104c-36,31-85,47-131,35,65,10,138-25,155-93,5-19,5-39-4-57,10,48-21,95-64,116-31,15-66,17-99,7-30-9-59-26-77-53,31,33,75,55,121,51,36-3,73-24,86-59-18,27-47,42-79,44a130,130,0,0,1-104-43c-31-36-47-85-35-131-10,65,25,138,93,155,19,5,39,5,57-4-48,10-95-21-116-64-15-31-17-66-7-99,9-30,26-59,53-77-33,31-55,75-51,121,3,36,24,73,59,86-27-18-42-47-44-79a130,130,0,0,1,43-104c36-31,85-47,131-35a66,66,0,0,1-14-1Z"><animateTransform attributeName="transform" attributeType="XML"  type="rotate" from="0 160 160" to="360 160 160" dur="1.5s" repeatCount="indefinite"/></path></svg>') center no-repeat;
  -webkit-mask-size:0% 0%;
  width: 300px;
  height: 300px;
  background-color: red;
  transition:1s linear;
}
.active {
  -webkit-mask-size:280% 280%;
}
<button>
click me
</button>
<div href="test.html" class="red">
  <h1>Content Content</h1>
  <h1>Content Content</h1>
  <h1>Content Content</h1>
</div>

If you want to run the rotation on click you try like below:

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('.red').classList.toggle('active');
})
.red {
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-20 -20 360 360"><path xmlns="http://www.w3.org/2000/svg" class="cls-2" d="M208.5,3.5c-61-4-125,31-141,94-5,19-5,39,4,57-10-48,21-95,64-116,31-15,66-17,99-7,30,9,59,26,77,53-31-33-75-55-121-51-36,3-73,24-86,59,18-27,47-42,79-44a130,130,0,0,1,104,43c31,36,47,85,35,131,10-65-25-138-93-155-19-5-39-5-57,4,48-10,95,21,116,64,15,31,17,66,7,99-9,30-26,59-53,77,33-31,55-75,51-121-3-36-24-73-59-86,27,18,42,47,44,79a130,130,0,0,1-43,104c-36,31-85,47-131,35,65,10,138-25,155-93,5-19,5-39-4-57,10,48-21,95-64,116-31,15-66,17-99,7-30-9-59-26-77-53,31,33,75,55,121,51,36-3,73-24,86-59-18,27-47,42-79,44a130,130,0,0,1-104-43c-31-36-47-85-35-131-10,65,25,138,93,155,19,5,39,5,57-4-48,10-95-21-116-64-15-31-17-66-7-99,9-30,26-59,53-77-33,31-55,75-51,121,3,36,24,73,59,86-27-18-42-47-44-79a130,130,0,0,1,43-104c36-31,85-47,131-35a66,66,0,0,1-14-1Z"></path></svg>') center no-repeat;
  -webkit-mask-size: 20% 20%;
  width: 300px;
  height: 300px;
  background-color: red;
  transition: -webkit-mask-size 1s linear;
}

.active {
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-20 -20 360 360"><path xmlns="http://www.w3.org/2000/svg" class="cls-2" d="M208.5,3.5c-61-4-125,31-141,94-5,19-5,39,4,57-10-48,21-95,64-116,31-15,66-17,99-7,30,9,59,26,77,53-31-33-75-55-121-51-36,3-73,24-86,59,18-27,47-42,79-44a130,130,0,0,1,104,43c31,36,47,85,35,131,10-65-25-138-93-155-19-5-39-5-57,4,48-10,95,21,116,64,15,31,17,66,7,99-9,30-26,59-53,77,33-31,55-75,51-121-3-36-24-73-59-86,27,18,42,47,44,79a130,130,0,0,1-43,104c-36,31-85,47-131,35,65,10,138-25,155-93,5-19,5-39-4-57,10,48-21,95-64,116-31,15-66,17-99,7-30-9-59-26-77-53,31,33,75,55,121,51,36-3,73-24,86-59-18,27-47,42-79,44a130,130,0,0,1-104-43c-31-36-47-85-35-131-10,65,25,138,93,155,19,5,39,5,57-4-48,10-95-21-116-64-15-31-17-66-7-99,9-30,26-59,53-77-33,31-55,75-51,121,3,36,24,73,59,86-27-18-42-47-44-79a130,130,0,0,1,43-104c36-31,85-47,131-35a66,66,0,0,1-14-1Z"><animateTransform attributeName="transform" attributeType="XML"  type="rotate" from="0 160 160" to="360 160 160" dur="1.5s" repeatCount="indefinite"/></path></svg>') center no-repeat;
  -webkit-mask-size: 280% 280%;
}
<button>
click me
</button>
<div href="test.html" class="red">
  <h1>Content Content</h1>
  <h1>Content Content</h1>
  <h1>Content Content</h1>
</div>

user_86203330
Related