这在混合模式或剪辑路径下可能吗

Question

在此处输入图像描述

我附上了一张图片。

它有一个粉红色的圆圈和一个粉红色箭头。

当粉色箭头移向圆圈时，重叠部分是否可以显示为白色？

(我正在制作一个动画，当箭头向圆形(

不管我想了多少个小时，我都找不到解决办法。我能得到一些帮助吗？

a{position:relative; padding-right:80px; margin-right:60px; font-size:20px; font-weight:400;}
a::after{position:absolute; content:''; width:1px; height:14px; right:-30px; top:50%; margin-top:-7px; background:#7c7c7c;}
a:last-child{margin-right:0;}
a:last-child::after{display:none;}
a i{position:absolute; width:34px; height:34px; border-radius:34px; right:0; top:50%; margin-top:-17px; background:#ec3294;}
a i svg{position:absolute; right:30px; top:50%; margin-top:-5px; transition:all 0.2s ease; z-index:1;}
a:hover i svg{right:15px;}

<a href="">
<span>TEST</span>
<i>
<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="39.999px" height="9.337px" viewBox="0 0 39.999 9.337" enable-background="new 0 0 39.999 9.337"
xml:space="preserve">
<g>
<path fill="none" stroke="#EC3294" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M28.228,0.598l11.026,7.458c0.27,0.271,0.205,0.684-0.509,0.684"/>
<line fill="none" stroke="#EC3294" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="38.972" y1="8.723" x2="0.598" y2="8.723"/>
</g>
</svg>
</i>
</a>
<a href="">
<span>TEST</span>
<i>
<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="39.999px" height="9.337px" viewBox="0 0 39.999 9.337" enable-background="new 0 0 39.999 9.337"
xml:space="preserve">
<g>
<path fill="none" stroke="#EC3294" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M28.228,0.598l11.026,7.458c0.27,0.271,0.205,0.684-0.509,0.684"/>
<line fill="none" stroke="#EC3294" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="38.972" y1="8.723" x2="0.598" y2="8.723"/>
</g>
</svg>
</i>
</a>

Answer 1

您可以使用混合混合模式差异。

这个片段使用深粉色#ff00ff(品红色(来说明这一点，以便更容易地看到正在发生的事情。

包含锚元素的背景为#ffffff(白色(

svg及其线条被赋予#00ff00的互补笔划颜色。

当线条位于#ffffff背景之上时，两种颜色之间的差异为#ff00ff。

当线条在#ff00ff背景之上时，两者之间的差异为#ffffff。

通过这种方式，箭头越过圆圈时变成白色。

a {
position: relative;
padding-right: 80px;
margin-right: 60px;
font-size: 20px;
font-weight: 400;
}
a::after {
position: absolute;
content: '';
width: 1px;
height: 14px;
right: -30px;
top: 50%;
margin-top: -7px;
background: #7c7c7c;
}
a:last-child {
margin-right: 0;
}
a:last-child::after {
display: none;
}
a i {
position: absolute;
width: 34px;
height: 34px;
border-radius: 34px;
right: 0;
top: 50%;
margin-top: -17px;
background: #ec3294;
background: #ff00ff;
}
a i svg {
position: absolute;
right: 30px;
top: 50%;
margin-top: -5px;
transition: all 0.2s ease;
z-index: 1;
}
a:hover i svg {
right: 15px;
}
svg,
svg g,
svg g path,
svg g path line {
mix-blend-mode: difference;
}
a {
background: white;
}

<a href="">
<span>TEST</span>
<i>
<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="39.999px" height="9.337px" viewBox="0 0 39.999 9.337" enable-background="new 0 0 39.999 9.337"
xml:space="preserve">
<g>
<path fill="none" stroke="#00ff00" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M28.228,0.598l11.026,7.458c0.27,0.271,0.205,0.684-0.509,0.684"/>
<line fill="none" stroke="#00ff00" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="38.972" y1="8.723" x2="0.598" y2="8.723"/>
</g>
</svg>
</i>
</a>
<a href="">
<span>TEST</span>
<i>
<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="39.999px" height="9.337px" viewBox="0 0 39.999 9.337" enable-background="new 0 0 39.999 9.337"
xml:space="preserve">
<g>
<path fill="none" stroke="#00ff00" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M28.228,0.598l11.026,7.458c0.27,0.271,0.205,0.684-0.509,0.684"/>
<line fill="none" stroke="#00ff00" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="38.972" y1="8.723" x2="0.598" y2="8.723"/>
</g>
</svg>
</i>
</a>