缩放 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>

Answer 2

考虑添加旋转动画的不同 SVG：

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

然后将其用作蒙版，您可以轻松地根据需要调整大小：

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>

如果你想运行点击时旋转你试试下面的方法：

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>

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

Scale SVG clipping mask without scaling the clipped element

css

svg

clip-path