将旋转SVG裁剪为HTML/CSS中的文本

Question

我有一个使用星暴模式动画旋转的SVG图像，以及它旁边的一个文本元素。每当星光较亮的部分与文字重叠时，我希望文字的那一部分改变颜色。基本上，恒星爆发应该剪辑到文本，同时旋转。

基本设置是：

<div class="header">
    <div class="starburst-image">
        <img src="starburst-dark.svg" class="starburst"></img>
        <img src="starburst-bright.svg" class="starburst starburst-bright"></img>
    </div>
    <div class="title-wrapper">
        <h1 class="title-text">Title</h1>
    </div>
</div>

在这里，两个starburst图像都有position: absolute，完全一致，并且都是使用CSS动画旋转的。整个starburst-dark应该显示在背景中而不需要剪裁，而starburst-bright应该在它旋转时剪辑到title-text。

在使用clip-path和background-clip这样的属性之后，我似乎无法让SVG既旋转又剪辑到文本。我还尝试将文本放在svg <text>元素中，而不是<h1>中，并将其封装到<clipPath>中，但似乎文本剪辑相对于starburst SVG的坐标而不是标题文本本身的坐标进行了定位。

一定有办法在HTML/CSS中做到这一点，对吗？

Answer 1

是的，您可以使用CSS中的clip-path属性将一个元素剪辑成另一个元素的形状，包括文本。您也可以使用mask属性，它类似于clip-path，但它允许您使用更复杂的形状和图像集作为裁剪路径。

下面是一个示例，说明如何使用clip-path属性实现您想要的效果：

<div class="header">
    <div class="starburst-image">
        <img src="starburst-dark.svg" class="starburst"></img>
        <img src="starburst-bright.svg" class="starburst starburst-bright"></img>
    </div>
    <div class="title-wrapper">
        <h1 class="title-text">Title</h1>
    </div>
</div>

<style>
    .starburst-bright {
        clip-path: inset(0 0 0 0 round 9px);
        -webkit-clip-path: inset(0 0 0 0 round 9px);
    }

    .title-text {
        clip-path: inset(0 0 0 0 round 9px);
        -webkit-clip-path: inset(0 0 0 0 round 9px);
    }
</style>

在本例中，clip-path属性同时用于starburst-bright和title-text元素。inset()函数用于创建一个带有9px圆角的圆形矩形形状，然后用于夹紧这两个元素。这将导致将starburst-bright图像剪裁成title-text元素的形状，从而产生所需的效果。

您还可以使用mask属性而不是clip-path属性，后者允许更复杂的裁剪路径。例如：

<div class="header">
    <div class="starburst-image">
        <img src="starburst-dark.svg" class="starburst"></img>
        <img src="starburst-bright.svg" class="starburst starburst-bright"></img>
    </div>
    <div class="title-wrapper">
        <h1 class="title-text">Title</h1>
    </div>
</div>

<style>
    .starburst-bright {
        mask: url(title-mask.svg#mask);
        -webkit-mask: url(title-mask.svg#mask);
    }

    .title-text {
        mask: url(title-mask.svg#mask);
        -webkit-mask: url(title-mask.svg#mask);
    }
</style>

在本例中，mask属性同时用于starburst-bright和title-text元素，并使用单独的SVG映像作为掩码。这允许您使用SVG路径或其他形状创建更复杂的掩码形状，而不是使用inset()函数创建的简单矩形形状。