如何使用伪类在 SVG 填充颜色上“混合混合模式”？

Question

我想做这样的事情：

如您所见，无论圆圈在哪里，字体都会将颜色变为黑色。圆圈一离开，文字就变回白色。

但是，我不想使用文本，而是使用 SVG。当我将鼠标悬停在我的容器上时，我希望扩展的伪类仅在它相交的地方使箭头变为白色（在动画结束时，整个箭头将是白色的，因为黑色伪类扩展了整个容器）。我尝试了以下方法（添加到我的所有元素中），但它不起作用：

isolation: isolated;
mix-blend-mode: difference; 

这是我的代码，在此先感谢：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.formatting {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.svg-container,
svg,
.svg-container::before,
path {
    isolation: isolated;
    mix-blend-mode: difference;
}

.svg-container {
    border-radius: 50%;
    position: relative;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    cursor: pointer;
}

.svg-container::before {
    content: "";
    background-color: none;
    position: absolute;
    border-radius: 50%;
    width: 0%;
    z-index: -4;
    height: 0%;
    transition: all 0.5s ease-in-out;
}

.svg-container:hover::before {
    height: 100%;
    width: 100%;
    background-color: black;
    transition: all 0.5s ease-in-out;
}

.svg-actual {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
}

path {
    transition: all 0.5s ease-in-out;
}
.svg-container:hover path {
    /* fill: white; */
    transition: all 0.5s ease-in-out;
}

.text {
    position: absolute;
    font-size: 0.6rem;
}

    
    <div class="formatting">
        <div class="svg-container">
            <div class="svg-actual">
                <svg width="27" height="15" viewBox="0 0 280 184" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path id="arrow" d="M259.585 97.2345L180.703 176.117L187.96 183.375L279.22 92.115L187.955 0.850169L180.707 8.09801L259.577 86.9878L0.129355 86.9758V97.2345L259.585 97.2345Z" fill="#010002"/>
                </svg>
            </div>
        </div>
    </div>

Answer 1

问题不在于伪元素。

这里有两个问题。第一个问题是你正在使用 transition: all - 所以 mix-blend-mode 正在被转换，所以你看不到它。您需要指定仅适用于宽度/高度的过渡。

第二个问题是您试图将黑色与黑色混合 - 这是行不通的 - 它只会给您黑色。如果我调整您的示例以匹配您的初始图像示例（黑色背景、白色前景、黑色箭头），它就可以正常工作。

这是一个经过调整和夸张的版本，向您展示一切正常。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.formatting {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transform: scale(300%);
    background: black;
}

.svg-container {
    border-radius: 50%;
    position: relative;
    border: 1px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    cursor: pointer;
}

.svg-container::before {
    content: "";
    background-color: none;
    position: absolute;
    border-radius: 50%;
    width: 0%;
    height: 0%;
    transition: height 5s ease-in-out, width 5s ease-in-out;
}

.svg-container:hover::before {
    height: 100%;
    width: 100%;
    background-color: white;
    transition: height 5s ease-in-out, width 5s ease-in-out;

}

.svg-actual {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
    mix-blend-mode: difference;
}

path {
    transition: height 5s ease-in-out, width 5s ease-in-out;
}
.svg-container:hover path {
    /* fill: white; */
    transition: height 5s ease-in-out, width 5s ease-in-out;
}

.text {
    position: absolute;
    font-size: 0.6rem;
}

   <div class="formatting">
        <div class="svg-container">
            <div class="svg-actual">
                <svg width="27" height="15" viewBox="0 0 280 184" fill="none" xmlns="http://www.w3.org/2000/svg" id="#svg-element" color-interpolation="sRGB">
                    <path id="arrow" d="M259.585 97.2345L180.703 176.117L187.96 183.375L279.22 92.115L187.955 0.850169L180.707 8.09801L259.577 86.9878L0.129355 86.9758V97.2345L259.585 97.2345Z" stroke="white" stroke-width="20"/>
                </svg>
            </div>
        </div>
    </div>