css - 缩放 SVG 剪切蒙版而不缩放被剪切的元素

Question

我有一个 SVG 作为 div 元素的剪贴蒙版。 div 是一个图像。我想放大(并旋转)SVG 剪切蒙版，同时使图像 div 保持不动，以使用 gsap 动画实现显示效果。

我知道我正在缩放整个 div，但我不知道如何缩放 SVG 剪辑路径。那么我如何才能只放大 SVG 剪贴蒙版，而不是图像 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>

Answer 1

将 svg 放在 div 之后并缩放 path 而不是它本身。

.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>