Css clipPath transform on:focus/：悬停在同一图标的多个实例上

我有一个SVG图标，带有一些遮罩形状，包括：

• book-1

  ：被clipPath掩盖

  mask-1

• book-2

  ：被clipPath遮住

  mask-2

• book-3

  ：未屏蔽，无需转换

在

：焦点

/

：悬停

我想要

mask-1

（但不是

book-1

），和

book-2

（但不是

mask-2

）转换。够直接的了

<a href="whatevs" class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44">
        <defs>
            <style>
                #book-1 {clip-path:url(#mask-1);} 
                #book-2 {clip-path:url(#mask-2);}
            </style>

            <clipPath id="mask-1">
                <path class="nudge" fill="none" … />
            </clipPath>
            <clipPath id="mask-2">
                <path fill="none" … />
            </clipPath>
        </defs>

        <g id="book-1">
            <path fill="#fff" … />
        </g>
        <g id="book-2">
            <path fill="#fff" class="nudge" … />
        </g>
        <path fill="#fff" … /> <!-- book-3 -->
    </svg>
</a>

/* CSS */

.icon .nudge {
    transition: transform 0.2s ease-in;
}

.icon:focus .nudge, 
.icon:hover .nudge {
    transform: translate(-2px, 2px);
}

/*CSS*/
.图标.轻推{
过渡：0.2s缓进转换；
}
.图标：焦点。轻推，
.图标：悬停.微移{
转换：转换（-2px，2px）；
}

但是当一个页面中有多个相同图标的实例时，乐趣就开始了

---

我在CodePen上有3支笔，每支笔都有2个链接图标实例，其中：

失败，原因是：

• 每次显示完整SVG时都会显示详细的代码

• book-1

  和

  book-2

• 仅掩码的每个实例的唯一id名称：

  mask-1

  和

  mask-2

与以下各项配合使用：

• 每次显示完整SVG时都会显示详细的代码
• 书籍和掩码的每个实例的唯一id名称：

  book-1

  、

  mask-1

  、

  book-2

  和

  mask-2

失败，原因是：

• 通过页面中的
  迭代的图标的
  实例

思想

这太奇怪了。我想知道为什么它会这样失败

这很好，但我不希望在ID被发送到页面后，用JavaScript迭代ID

这是我想开始工作的，但我不知道这是否可能

---

由于

剪辑路径

需要svg

def

子项的id，因此在一个页面上放置多个图标的情况下，将只考虑其中一个

定义。这就是为什么转换

元素是不可能的，因为引用它的所有项目都会受到影响。因此，我们需要一个解决方案，该解决方案不会基于

：focus

的

：hover

移动或修改这些元素

幸运的是，通过使用以下技巧，可以只移动指定给元素的剪裁路径，而不移动元素本身：

将剪辑路径指定给父对象

沿剪辑路径应移动的方向移动父对象

向相反方向移动所有子对象

基于您提供的代码的此技巧示例可以在下面的代码段中找到：

a.轻推，a.解题{
过渡：0.2s缓进转换；
}
答：焦点，
a:悬停{
背景色：黑色；
}
a:专注，轻推，
a:悬停，轻推{
转换：转换（-2px，2px）；
}
a:集中注意力，不要胡思乱想，
a:悬停，算了{
变换：平移（2px，-2px）；
}
* {
框大小：边框框；
}
a{
显示：块；
背景色：红色；
填充：0.5雷姆；
边界半径：50%；
过渡：背景色0.2s缓进；
宽度：60px；
高度：60px；
}
身体{
字体系列：无衬线；
线高：1.5；
最大宽度：36em；
颜色：#333；
}
代码{
背景：#e5；
字号：1.125em；
边界半径：2px；
}

实例1：

实例2，实例1的精确副本：

非常感谢Piotr。很好的洞察力。