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