1
我一直在尝试内联svg第一次。这里是我的代码：SVG渲染顺序问题需要解决没有任何JS
<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>
乍一看，这似乎BTN一旦你:hover到.btn.tap.area我已经定义好工作。但是如果你的光标碰巧遇到了其中一个动画.ring路径，那么动画似乎会被重新触发并重新开始。
我想单独这个没有任何JS的重新触发问题。
我的解决方案是将透明的.btn.tap.area置于svg中的其他路径之上。
我无法更改我的svg路径的渲染顺序，因为我在css中依赖它，例如.btn.tap.area:hover + .ring.container .ring.a {。
据我了解，z-index在svg上下文无效，所以我不能使用它。
我然后看到this post，并认为所提供的替代解决方案将工作：<use xlink:href="#btnID"/>会调出.btn.tap.area路径的第二个实例一旦我加入的btnID一个ID .btn.tap.area。但是这似乎也不起作用。
是否有另一种解决方案，在不使用任何JS的情况下强制其他路径前面的.btn.tap.area？
以下是fiddle以查看您自己的问题。
将您的矩形放在g.container中，在g元素上设置CSS：悬停规则，就完成了。 – Kaiido