如何使用偽類來“混合混合模式”SVG的填充顏色？

我想做這樣的事情：

如您所見，無論圓圈在哪里，字體都會將顏色變為黑色。圓圈一離開，文本就會變回白色。

但是，我不想使用文本，而是想使用 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>

uj5u.com熱心網友回復：

問題不在于偽元素。

你這里有兩個問題。第一個問題是你正在使用 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>

標籤：

上一篇：將Excel資料上傳到Mysql資料庫時保持正確的時間格式

下一篇：SVG正在處理純HTML檔案，但在集成到Angular時會失去對齊