My web element is enclosed within an Svg border:
.element-inside-svg-border {
border-image-source: url('images/border.svg');
[....]
}
The border.svg file contains a CSS animation (defined in the <style> tag), like this:
<svg class="svg-frame-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 337 198">
<style>
.svg-frame-1:hover > path {
animation-play-state: running;
}
path {
stroke:#BEA757;
fill-opacity:0;
stroke-width:1;
stroke-dasharray: 1948;
stroke-dashoffset:1948;
animation-name: dash1;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-play-state: paused;
}
@keyframes dash1 {
0% { stroke-dashoffset:1948;}
100%{stroke-dashoffset:0;}
}
</style>
[...]
</svg>
I want to trigger the animation only when hovering over the .element-inside-svg-border element.
Due to the fact that it is not inline, the <svg> does not recognize elements from the main DOM and vice versa.
Is there a solution to this issue, possibly involving JavaScript?
EDITED: based on @Danny '365CSI' Engelman's suggestion in the comments, I attempted a solution (see snippet below):
Insert the SVG onto the page with animations set to "paused"
In JavaScript, assign a
mouseenterevent where the SVG animations are switched to "running", the Svg is converted into a data URI, and then applied to the CSSborder-imageproperty as a URL valueLikewise, in Js, create a
mouseleaveevent where the SVG animations return to "paused", the Svg is transformed into a data URI once again, and assigned to the CSSborder-imageproperty
The issue arises where upon mouseenter, the animation restarts but visually resets to 0 on mouseleave. Subsequent mouseenter reveals that the animation was indeed completed during this time gap.
Why does this occur?
EDITED 2: The previous snippet had 2 flaws:
- Change the "animation-name" to "none" on
mouseleaveto pause it - Prior to re-injecting the Svg as data uri in
border-src, adjust theanimation-durationfor remaining play time. Additionally, update the@keyframesby injecting new "start values" using CSSom. Despite implementing these changes, the updated CSSom is not recognized by the Svg as data uri and thus causes the animation to restart upon subsequentmouseenter...