I am new to experimenting with inline svg, and I wanted to share my code:
<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>
Upon initial inspection, this button appears to work well once you hover over the .btn.tap.area that I have specified. However, if your cursor intersects with one of the animated .ring paths, the animation seems to restart.
I wanted to resolve this issue of re-triggering the animation without using any JavaScript.
To address this problem, I decided to place the transparent .btn.tap.area on top of the other paths within the SVG.
Since I rely on the rendering order of my SVG paths in the CSS (e.g.,
.btn.tap.area:hover + .ring.container .ring.a {While z-index is not valid in the context of SVG, I came across a potential solution in this post. The alternate approach suggested was to use <use xlink:href="#btnID"/> to call a second instance of the .btn.tap.area, provided I added an ID of btnID to the existing element. Unfortunately, this method did not work as expected.
Is there another way to ensure that the .btn.tap.area remains in front of the other paths without relying on JavaScript?
You can view the issue for yourself on this fiddle.