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は、私が定義されている.btn.tap.areaにあなた:hoverいったん正常に動作するようです。しかし、カーソルがアニメーション化された.ringのパスの途中に入ると、アニメーションが再びトリガされて再び開始されるように見えます。
私は、JSなしでこの再起動の問題を唯一望んでいます。
この問題に対する私の解決策は、透明の.btn.tap.areaをsvgの他のパスの上に置くことでした。
私のSVGパスのレンダリング順序を変更することはできません。これはCSSで頼りにしています。 .btn.tap.area:hover + .ring.container .ring.a {。
私が理解しているように、z-indexはsvgのコンテキストでは有効ではないので、私はそれを使用できません。
私はその後this postを見て、提供され、代替ソリューションが働くだろうと思った：私は.btn.tap.areaにbtnIDのIDを追加した後<use xlink:href="#btnID"/>は.btn.tap.areaパスの2番目のインスタンスを呼び出します。しかし、これはどちらもうまくいかないようでした。
任意のJSを使用せずに他のパスの前に.btn.tap.areaを強制的に別の解決策はありますか？
ここにはfiddleが掲載されています。
g.containerの中にrectを置き、gエレメントのCSS：ホバールールを設定すれば完了です。 – Kaiido