clipPath转换为：focus /：悬停在同一图标的多个实例上

问题描述 投票：0回答：1

我有一个带有一些蒙面形状的SVG图标，包括：

  • book-1：被clipPath mask-1掩盖
  • book-2：被clipPath mask-2掩盖
  • book-3：没有蒙面，不需要转换

在:focus / :hover我想要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);
}

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

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

  1. MRYwBq失败： 每次出现时都会详细说明完整的SVG book-1和book-2的类名 每个掩码实例的唯一id名称：mask-1和mask-2
  2. qwEZrG与： 每次出现时都会详细说明完整的SVG 每个书籍和面具实例的唯一ID名称：book-1，mask-1，book-2和mask-2
  3. gybrvL失败： 通过页面中的<symbol>迭代图标的<use>实例

思考

  1. 这很奇怪。我想了解为什么它失败了。
  2. 它的工作原理很好，但我不希望在将ID发送到未分化的页面之后不必使用JavaScript迭代这些ID。
  3. 这是我想要的工作，但我不知道这是否可行。
css svg mask css-transforms clip-path
1个回答
1
投票

由于clip-path需要一个svg def子的id，因此如果在页面上放置多个图标，则只考虑其中一个<clipPath>定义。这就是为什么改变<clipPath>元素是一个禁忌，因为引用它的所有项目都会受到影响。因此，我们需要一种不会根据:hover的:focus移动或修改这些元素的解决方案。

幸运的是，通过使用以下技巧，可以仅移动分配给元素的剪切路径“不”移动元素本身：

  1. 将剪辑路径指定给父级
  2. 将父级移动到剪辑路径应移动的方向
  3. 将所有孩子向相反方向移动

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

a .nudge, a .unnudge {
  transition: transform 0.2s ease-in;
}

a:focus, 
a:hover {
    background-color: black;
}
    
a:focus .nudge, 
a:hover .nudge {
    transform: translate(-2px, 2px);
}

a:focus .unnudge, 
a:hover .unnudge {
    transform: translate(2px, -2px);
}


* {
  box-sizing: border-box;
}

a {
  display: block;
  background-color: red;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background-color 0.2s ease-in;
  width: 60px;
  height: 60px;
}

body {
  font-family: sans-serif;
  line-height: 1.5;
  max-width: 36em;
  color: #333;
}

code {
  background: #e5e5e5;
  font-size: 1.125em;
  border-radius: 2px;
}
<p>Instance 1: 
  <a href="#">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="44" height="44">
      <defs>
          <style>
              .book-1{clip-path:url(#mask-1-1);}
              .book-2{clip-path:url(#mask-2-1);}
          </style>
          <clipPath id="mask-1-1">
              <path fill="none" d="M13.823,33.1V18.293a4.738,4.738,0,0,1,1.4-3.371S24.6,5.531,25.085,5.048L20.019-.019H8.143V33.1Z"/>
          </clipPath>
          <clipPath id="mask-2-1">
              <path fill="none" d="M31.814,10.117,21.12,20.822a4.733,4.733,0,0,0-1.4,3.371V39H12V7H28.7Z"/>
          </clipPath>
      </defs>
      <g class="nudge book-1" >
          <path fill="#fff" class="unnudge" d="M22.736,5.72a1.193,1.193,0,0,0-1.686,0l-7.516,7.516a1.191,1.191,0,0,1-1.685-1.685l7.516-7.516a1.192,1.192,0,0,0-1.686-1.686L10.163,9.865h0a3.565,3.565,0,0,0-1.047,2.529h0V26.625h0a3.576,3.576,0,0,0,6.1,2.528h0l7.516-7.516a1.188,1.188,0,0,0,.349-.843V6.563A1.188,1.188,0,0,0,22.736,5.72Z"/>
      </g>
      <g class="book-2">
          <path fill="#fff" class="nudge" d="M21.723,22.193a4.733,4.733,0,0,1,1.4-3.371l5.865-5.871v-.488a1.192,1.192,0,0,0-2.035-.843l-7.516,7.516a1.192,1.192,0,0,1-1.686-1.686l7.516-7.516a1.191,1.191,0,1,0-1.685-1.685l-7.516,7.516a3.561,3.561,0,0,0-1.048,2.528h0V32.524h0a3.577,3.577,0,0,0,6.105,2.529h0l.6-.6Z"/>
      </g>
      <path fill="#fff" d="M34.535,17.52a1.19,1.19,0,0,0-1.685,0l-7.516,7.516a1.192,1.192,0,0,1-1.686-1.686l7.516-7.516a1.192,1.192,0,1,0-1.686-1.685l-7.516,7.516h0a3.564,3.564,0,0,0-1.047,2.528h0V38.424h0a3.576,3.576,0,0,0,6.1,2.529h0l7.516-7.516a1.188,1.188,0,0,0,.349-.843V18.363A1.188,1.188,0,0,0,34.535,17.52Z"/>
  </svg>
  </a>
</p>
<p>Instance 2, exact copy of instance 1: 
  <a href="#">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="44" height="44">
      <defs>
          <style>
              .book-1{clip-path:url(#mask-1-1);}
              .book-2{clip-path:url(#mask-2-1);}
          </style>
          <clipPath id="mask-1-1">
              <path fill="none" d="M13.823,33.1V18.293a4.738,4.738,0,0,1,1.4-3.371S24.6,5.531,25.085,5.048L20.019-.019H8.143V33.1Z"/>
          </clipPath>
          <clipPath id="mask-2-1">
              <path fill="none" d="M31.814,10.117,21.12,20.822a4.733,4.733,0,0,0-1.4,3.371V39H12V7H28.7Z"/>
          </clipPath>
      </defs>
      <g class="nudge book-1" >
          <path fill="#fff" class="unnudge" d="M22.736,5.72a1.193,1.193,0,0,0-1.686,0l-7.516,7.516a1.191,1.191,0,0,1-1.685-1.685l7.516-7.516a1.192,1.192,0,0,0-1.686-1.686L10.163,9.865h0a3.565,3.565,0,0,0-1.047,2.529h0V26.625h0a3.576,3.576,0,0,0,6.1,2.528h0l7.516-7.516a1.188,1.188,0,0,0,.349-.843V6.563A1.188,1.188,0,0,0,22.736,5.72Z"/>
      </g>
      <g class="book-2">
          <path fill="#fff" class="nudge" d="M21.723,22.193a4.733,4.733,0,0,1,1.4-3.371l5.865-5.871v-.488a1.192,1.192,0,0,0-2.035-.843l-7.516,7.516a1.192,1.192,0,0,1-1.686-1.686l7.516-7.516a1.191,1.191,0,1,0-1.685-1.685l-7.516,7.516a3.561,3.561,0,0,0-1.048,2.528h0V32.524h0a3.577,3.577,0,0,0,6.105,2.529h0l.6-.6Z"/>
      </g>
      <path fill="#fff" d="M34.535,17.52a1.19,1.19,0,0,0-1.685,0l-7.516,7.516a1.192,1.192,0,0,1-1.686-1.686l7.516-7.516a1.192,1.192,0,1,0-1.686-1.685l-7.516,7.516h0a3.564,3.564,0,0,0-1.047,2.528h0V38.424h0a3.576,3.576,0,0,0,6.1,2.529h0l7.516-7.516a1.188,1.188,0,0,0,.349-.843V18.363A1.188,1.188,0,0,0,34.535,17.52Z"/>
  </svg>
  </a>
</p>

请注意，这个解决方案并不完美，并且具有两个相反运动的技巧应该总结为无运动，可能会导致某些浏览器（例如Firefox）上的.book-1有点急躁。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.