Question

我第一次尝试使用内联svg。这是我的代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="350">
  <defs>
    <style>
      .ring {
        transform-origin: 175px 175px;
      }

      .ring.a {
        fill: #f2ca30;
      }
      .ring.b {
        fill: #31bc06;
      }
      .ring.c {
        fill: #11a0ad;
        }
      .ring.d {
        fill: #028d9e;
      }

      .btn.tap.area {
        z-index: 100;
        fill: transparent;
      }
      .btn.tap.area:hover + .ring.container .ring {
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }

      .btn.tap.area:hover + .ring.container .ring.a,
      .btn.tap.area:hover + .ring.container .ring.c {
        animation-name: clockwise;
      }
      .btn.tap.area:hover + .ring.container .ring.b,
      .btn.tap.area:hover + .ring.container .ring.d {
        animation-name: counter-clockwise;
      }

      .btn.tap.area:hover + .ring.container .ring.a {
        animation-duration: 1.33s;
      }
      .btn.tap.area:hover + .ring.container .ring.b {
        animation-duration: 1s;
      }
      .btn.tap.area:hover + .ring.container .ring.c {
        animation-duration: .67s;
      }
      .btn.tap.area:hover + .ring.container .ring.d {
        animation-duration: .33s;
      }

      @keyframes clockwise {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes counter-clockwise {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(-360deg);
        }
      }
    </style>
  </defs>
  <title>ring btn</title>
  <rect class="btn tap area" width="350" height="350"/>
  <g class="ring container">
    <path class="ring a" d="M119.139,129.639a10.5,10.5,0,0,1-7.425-17.924,89.5,89.5,0,0,1,126.571,0,10.5,10.5,0,0,1-14.849,14.85,68.5,68.5,0,0,0-96.873,0A10.468,10.468,0,0,1,119.139,129.639Z"/>
    <path class="ring b" d="M104.29,114.79a10.5,10.5,0,0,1-7.425-17.924,110.5,110.5,0,0,1,156.269,0,10.5,10.5,0,1,1-14.849,14.85,89.5,89.5,0,0,0-126.57,0A10.468,10.468,0,0,1,104.29,114.79Z"/>
    <path class="ring c" d="M89.44,99.94a10.5,10.5,0,0,1-7.424-17.925,131.5,131.5,0,0,1,185.967,0,10.5,10.5,0,1,1-14.849,14.85,110.5,110.5,0,0,0-156.27,0A10.468,10.468,0,0,1,89.44,99.94Z"/>
    <path class="ring d" d="M74.591,85.091a10.5,10.5,0,0,1-7.425-17.925,152.5,152.5,0,0,1,215.667,0,10.5,10.5,0,1,1-14.849,14.85,131.5,131.5,0,0,0-185.968,0A10.468,10.468,0,0,1,74.591,85.091Z"/>
  </g>
</svg>

乍一看，一旦你:hover进入我定义的.btn.tap.area，这个btn似乎工作正常。但是如果您的光标碰巧妨碍了其中一条动画.ring路径，则动画似乎会重新触发并重新开始。

我想在没有任何JS的情况下完成这个重新触发的问题。

我对此的解决方案是将svg中其他路径的透明.btn.tap.area置于其上。

我无法更改svg路径的渲染顺序，因为我在css中依赖它，例如.btn.tap.area:hover + .ring.container .ring.a {。

据我所知，z-index在svg的上下文中无效，所以我无法使用它。

然后我看到this post并认为提供的替代解决方案可行：<use xlink:href="#btnID"/>在我添加{{1}的ID后将调用.btn.tap.area路径的第二个实例到btnID。但这似乎也没有用。

是否有其他解决办法在不使用任何JS的情况下强制.btn.tap.area在其他路径前？

这是一个fiddle，可以自己查看问题。

Answer 1

您无法使用z-index更改svg元素顺序。但是你可以用HTML元素来做。以下解决方案如何：

我将水龙头区域放在另一个绝对定位的svg中。

＆＃13;

  .svg-stack {
    position: relative;
  }
      
  .svg-tap-area {
    position: absolute;
    z-index: 1;
  }
      
  .ring {
    transform-origin: 175px 175px;
  }

  .ring.a {
    fill: #f2ca30;
  }

  .ring.b {
    fill: #31bc06;
  }

  .ring.c {
    fill: #11a0ad;
  }

  .ring.d {
    fill: #028d9e;
  }

  .btn.tap.area {
    fill: transparent;
  }

  .svg-tap-area:hover + svg .ring.container .ring {
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .svg-tap-area:hover + svg .ring.container .ring.a,
  .svg-tap-area:hover + svg .ring.container .ring.c {
    animation-name: clockwise;
  }

  .svg-tap-area:hover + svg .ring.container .ring.b,
  .svg-tap-area:hover + svg .ring.container .ring.d {
    animation-name: counter-clockwise;
  }

  .svg-tap-area:hover + svg .ring.container .ring.a {
    animation-duration: 1.33s;
  }

  .svg-tap-area:hover + svg .ring.container .ring.b {
    animation-duration: 1s;
  }

  .svg-tap-area:hover + svg .ring.container .ring.c {
    animation-duration: .67s;
  }

  .svg-tap-area:hover + svg .ring.container .ring.d {
    animation-duration: .33s;
  }

  @keyframes clockwise {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes counter-clockwise {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }

＆＃13;

<div class="svg-stack">
  <svg class="svg-tap-area" xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="350">
    <title>ring area</title>
    <rect class="btn tap area" id="one" width="350" height="350"/>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="350">
    <title>ring btn</title>
    <g class="ring container">
      <path class="ring a" d="M119.139,129.639a10.5,10.5,0,0,1-7.425-17.924,89.5,89.5,0,0,1,126.571,0,10.5,10.5,0,0,1-14.849,14.85,68.5,68.5,0,0,0-96.873,0A10.468,10.468,0,0,1,119.139,129.639Z"/>
      <path class="ring b" d="M104.29,114.79a10.5,10.5,0,0,1-7.425-17.924,110.5,110.5,0,0,1,156.269,0,10.5,10.5,0,1,1-14.849,14.85,89.5,89.5,0,0,0-126.57,0A10.468,10.468,0,0,1,104.29,114.79Z"/>
      <path class="ring c" d="M89.44,99.94a10.5,10.5,0,0,1-7.424-17.925,131.5,131.5,0,0,1,185.967,0,10.5,10.5,0,1,1-14.849,14.85,110.5,110.5,0,0,0-156.27,0A10.468,10.468,0,0,1,89.44,99.94Z"/>
      <path class="ring d" d="M74.591,85.091a10.5,10.5,0,0,1-7.425-17.925,152.5,152.5,0,0,1,215.667,0,10.5,10.5,0,1,1-14.849,14.85,131.5,131.5,0,0,0-185.968,0A10.468,10.468,0,0,1,74.591,85.091Z"/>
    </g>
    <rect class="btn tap area" id="one" width="350" height="350"/>
  </svg>
</div>

＆＃13;

Answer 2

添加指针事件：无;例如，环形元素。

  .ring {
    transform-origin: 175px 175px;
    pointer-events: none;
  }

需要在没有任何JS

2 个答案: