SMIL animation doesn't work on a use element on Firefox - firefox
Although this animation is working on Chrome, Safary and Opera, it doesn't work on Firefox when I'm using the group:
svg {
max-width: 90vh;
stroke-linecap: round;
display:block;
position:absolute;
margin:auto;
top:0;bottom:0;left:0;right:0;
}
path {
stroke: black;
stroke-width: 0.2;
fill: none;
}
circle {
fill: black;
}
<svg id="svg" viewBox="-50 -50 100 100">
<g id="slice">
<path d="M8.390747629378028, 4.0407710911278985Q16.337096335644915,1.578047643071413 28.72564510652592,5.067456639486153Q41.114193877406926,8.556865635900893 22.230907302700192,4.260374440788638Q3.3476207279934576,-0.03611675432361651 21.46226478304126,-6.962030472005244Q39.57690883808906,-13.887944189686872 31.396381359458864,-2.1315394650039874Q23.215853880828664,9.624865259678897 22.336451060888443,2.1742972246208847Q21.457048240948225, -5.276270810437127, 8.390747629378028, -4.0407710911278985" id="theCurve"></path>
<circle r="1">
<animateMotion begin="0s" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#theCurve"></mpath>
</animateMotion>
</circle>
</g>
<use xlink:href="#slice" transform="rotate(200)"></use>
</svg>
This was fixed very recently. You can use a Nightly in the meantime or just wait till September's release of Firefox 69.
In order to make it work I'm putting the used path and the animated circle in a group and I'm rotating the group:
svg {
border:1px solid;
max-width: 90vh;
stroke-linecap: round;
display:block;
position:absolute;
margin:auto;
top:0;bottom:0;left:0;right:0;
}
path {
stroke: black;
stroke-width: 0.2;
fill: none;
}
circle {
fill: black;
}
<svg id="svg" viewBox="-50 -50 100 100">
<defs>
<path d="M8.390747629378028, 4.0407710911278985Q16.337096335644915,1.578047643071413 28.72564510652592,5.067456639486153Q41.114193877406926,8.556865635900893 22.230907302700192,4.260374440788638Q3.3476207279934576,-0.03611675432361651 21.46226478304126,-6.962030472005244Q39.57690883808906,-13.887944189686872 31.396381359458864,-2.1315394650039874Q23.215853880828664,9.624865259678897 22.336451060888443,2.1742972246208847Q21.457048240948225, -5.276270810437127, 8.390747629378028, -4.0407710911278985" id="theCurve"></path>
</defs>
<g transform="rotate(0)">
<use xlink:href="#theCurve" ></use>
<circle r="1">
<animateMotion begin="0s" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#theCurve"></mpath>
</animateMotion>
</circle>
</g>
<g transform="rotate(200)">
<use xlink:href="#theCurve" ></use>
<circle r="1">
<animateMotion begin="0s" dur="10s" repeatCount="indefinite">
<mpath xlink:href="#theCurve"></mpath>
</animateMotion>
</circle>
</g>
</svg>
Related
Hard svg animation
I need your help with the implementation of svg animation. https://youtu.be/lrWjkARl8Zg (sorry for the poor video quality) And I have such a structure of svg I need the arrow (class = "arrow") itself to move along long lines and draw it. <svg class="vector" width="1193" height="329" viewBox="0 0 1193 329" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="long_line" d="M1436 327.98L84.7148 327.98C73.8082 328.219 62.9639 326.275 52.818 322.262C42.6722 318.249 33.4293 312.249 25.6315 304.613C17.8337 296.977 11.6384 287.858 7.40866 277.793C3.17891 267.728 0.999997 256.919 0.999996 246C0.999996 235.081 3.17891 224.272 7.40866 214.207C11.6384 204.142 17.8337 195.023 25.6315 187.387C33.4292 179.751 42.6722 173.75 52.818 169.738C62.9638 165.725 73.8082 163.781 84.7147 164.02L589.173 164.02" stroke="black" stroke-width="2" stroke-miterlimit="10"/> <path class="arrow" d="M544 204L589 164L548 124" stroke="black" stroke-width="2"/> <path class="arrow" d="M504 1L459 41L500 81" stroke="black" stroke-width="2"/> <path class="short_line" d="M1308 41L459 41" stroke="black" stroke-width="2" stroke-miterlimit="10"/> </svg> Advise which library I can use
You could do this using svg smil animations:
A Guide to SVG Animations (SMIL)
Your arrow animations could be achieved by
<animateMotion> for moving the arrow element and
animating the stroke-dashoffset property.
Animated example
svg {
border: 1px solid #ccc;
width: 33%;
overflow: visible;
display: block;
}
path {
stroke-width: 10;
stroke: #000;
}
<p>Click on animation for replay</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 500">
<defs>
<path id="arrow" fill="none" d="M-45,40L0,0l-41-40" />
</defs>
<use id="arrow1" href="#arrow" />
<use id="arrow2" href="#arrow" />
<g id="graphics">
<rect id="graphics" fill="#fff" fill-opacity="0" x="0" y="0" width="100%" height="100%" />
<path id="mpath-long" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="100" stroke-dasharray="100" d="M1571,413H219.7
c-10.9,0.2-21.8-1.7-31.9-5.7c-10.1-4-19.4-10-27.2-17.6c-7.8-7.6-14-16.8-18.2-26.8S136,341.9,136,331s2.2-21.7,6.4-31.8
s10.4-19.2,18.2-26.8c7.8-7.6,17-13.6,27.2-17.6c10.1-4,21-6,31.9-5.7h504.5" />
<path id="mpath-short" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="100" stroke-dasharray="100" d="M1443,126H594" />
</g>
<animateMotion href="#arrow1" dur="2" rotate="auto" repeatCount="1" begin="0;graphics.click" fill="freeze">
<mpath href="#mpath-long" />
</animateMotion>
<animate attributeType="XML" href="#mpath-long" id="strokeAni" attributeName="stroke-dashoffset" from="100" to="0" dur="2s" repeatCount="1" begin="0;graphics.click" fill="freeze" />
<animateMotion href="#arrow2" dur="2s" rotate="auto" repeatCount="1" begin="0;graphics.click" fill="freeze">
<mpath href="#mpath-short" />
</animateMotion>
<animate attributeType="XML" href="#mpath-short" attributeName="stroke-dashoffset" from="100" to="0" dur="2s" repeatCount="1" fill="freeze" begin="0;graphics.click" />
</svg>
Quite likely, you will have to tweak your svg viewBox to get the desired result.
A common trick is to position element that's supposed to move along the motion path to x/y = 0.
Static example
<style>
svg{
border: 1px solid #ccc;
width: 33%;
overflow:visible;
display:block;
}
path{
stroke-width:10;
stroke: #000;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 500">
<defs>
<path id="arrow" fill="none" d="M-45,40L0,0l-41-40" />
</defs>
<use id="arrow1" href="#arrow" />
<use id="arrow2" href="#arrow" />
<g id="graphics">
<rect id="graphics" fill="#fff" fill-opacity="0" x="0" y="0" width="100%" height="100%" />
<path id="mpath-long" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="0" stroke-dasharray="100" d="M1571,413H219.7
c-10.9,0.2-21.8-1.7-31.9-5.7c-10.1-4-19.4-10-27.2-17.6c-7.8-7.6-14-16.8-18.2-26.8S136,341.9,136,331s2.2-21.7,6.4-31.8
s10.4-19.2,18.2-26.8c7.8-7.6,17-13.6,27.2-17.6c10.1-4,21-6,31.9-5.7h504.5" />
<path id="mpath-short" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="0" stroke-dasharray="100" d="M1443,126H594" />
</g>
</svg>
SVG animate a bezier curve to grow by following an arrowhead
I'm trying to create an arrow with its arrowhead moving from a starting point and ending at its target. Moving the arrowhead was achieved successfully with the tip from #Robert Longson. I want the end of the shaft also to follow the arrowhead and grow to its full length. The code is given below and notice that the shaft isn't growing with the arrowhead and also ends up in partial length. Is there a way to correct this. Any help will be greatly appreciated.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="5 0 100 45">
<style>
.wire {
fill: none;
stroke: red;
stroke-width: 1px;
/* Stroke-dasharray property to animate */
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: move linear 5s;
}
#keyframes move {
100% {
stroke-dashoffset: 0;
}
}
</style>
<path d="M10,10 C15,50 95,50 100,10" stroke="blue" stroke-width="2" id="wire" class="wire">
<animate>
<mpath xlink:href="#wire" />
</animate>
</path>
<!-- acceptable movement along the path but incorrect orientation -->
<polygon points="-5,-5 5,0 -5,5 -3,0" fill="red">
<animateMotion dur="5s" repeatCount="1" rotate="auto" fill="freeze">
<mpath xlink:href="#wire" />
</animateMotion>
</polygon>
</svg>
Like this I guess. Note that you could have done this in SMIL too.
I've set the animation to be forwards so it remains at the end, otherwise the curve disappears at the end of the animation.
The console.log line shows you where I got the number from.
console.log(document.getElementsByTagName("path")[0].getTotalLength())
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="5 0 100 45">
<style>
.wire {
fill: none;
stroke: red;
stroke-width: 1px;
/* Stroke-dasharray property to animate */
stroke-dasharray: 118.27912902832031;
stroke-dashoffset: 118.27912902832031;
animation: move linear 5s forwards;
}
#keyframes move {
100% {
stroke-dashoffset: 0;
}
}
</style>
<path d="M10,10 C15,50 95,50 100,10" stroke="blue" stroke-width="2" id="wire" class="wire">
<animate>
<mpath xlink:href="#wire" />
</animate>
</path>
<!-- acceptable movement along the path but incorrect orientation -->
<polygon points="-5,-5 5,0 -5,5 -3,0" fill="red">
<animateMotion dur="5s" repeatCount="1" rotate="auto" fill="freeze">
<mpath xlink:href="#wire" />
</animateMotion>
</polygon>
</svg>
To move the cursor and line at the same time:
It is necessary to synchronize both animations in start time begin="svg1.click" and duration dur="5s"
The maximum curve length is 118.3px so
stroke-dashoffset:118.3px;
stroke-dasharray:118.3px;
#wire {
stroke-dashoffset:118.3px;
stroke-dasharray:118.3px;
stroke:red;
stroke-width:2px;
fill:none;
}
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="5 0 100 45">
<style>
</style>
<path id="wire" d="M10,10 C15,50 95,50 100,10" >
<!-- Curved path growth animation -->
<animate
attributeName="stroke-dashoffset"
begin="svg1.click"
dur="5s"
values="118.3;0"
calcMode="linear"
fill="freeze"
restart="whenNotActive" />
</animate>
</path>
<!-- Cursor -->
<polygon points="-5,-5 5,0 -5,5 -3,0" fill="red">
<!-- Animating cursor movement along a curved path -->
<animateMotion begin="svg1.click" dur="5s" repeatCount="1" calcMode="linear" rotate="auto" fill="freeze">
<mpath xlink:href="#wire" />
</animateMotion>
</polygon>
<text x="40" y="20" font-size="6px" fill="dodgerblue">Click me</text>
</svg>
<script>
var path = document.querySelector('#wire');
var len = (path.getTotalLength() );
console.log("Path length - " + len);
</script>
UPDATE
as a bonus:
Moving forward - backward
To control the direction of movement, add two buttons and an
onclick event
<div>
<button onclick="forward.beginElement()">forward</button>
<button onclick="back.beginElement()">back</button>
</div>
The direction of the cursor is controlled by a couple of arguments:
keyPoints="0;1"
keyTimes="0;1"
Animation of line growing or falling depends on the value of
stroke-dashoffset
values="118.3;0" - line growth
values="0;118.3" - decrease line`
#wire {
stroke-dashoffset:118.3px;
stroke-dasharray:118.3px;
stroke:red;
stroke-width:2px;
fill:none;
}
svg {
width:50%;
height:50%;
}
<div>
<button onclick="forward.beginElement()">forward</button>
<button onclick="back.beginElement()">back</button>
</div>
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="5 0 100 45">
<style>
</style>
<path id="wire" d="M10,10 C15,50 95,50 100,10" >
<!-- Animation of filling, growing a line (`forward`)-->
<animate id="strokeForward"
attributeName="stroke-dashoffset"
begin="forward.begin"
dur="5s"
values="118.3;0"
calcMode="linear"
fill="freeze"
restart="whenNotActive" />
<!-- String decrease animation (`back`) -->
<animate id="strokeBack"
attributeName="stroke-dashoffset"
begin="back.begin"
dur="5s"
values="0;118.3"
calcMode="linear"
fill="freeze"
restart="whenNotActive" />
</path>
<!-- Cursor -->
<polygon points="-5,-5 5,0 -5,5 -3,0" fill="red">
<!-- Animating cursor movement along a curved path (`forward`) -->
<animateMotion
id="forward"
begin="indefinite"
dur="5s"
repeatCount="1"
calcMode="linear"
rotate="auto"
fill="freeze"
keyPoints="0;1"
keyTimes="0;1"
restart="whenNotActive">
<mpath xlink:href="#wire" />
</animateMotion>
<!-- Animating cursor movement along a curved path (`back`) -->
<animateMotion
id="back"
begin="indefinite"
dur="5s"
repeatCount="1"
calcMode="linear"
rotate="auto"
fill="freeze"
keyPoints="1;0"
keyTimes="0;1"
restart="whenNotActive">
<mpath xlink:href="#wire" />
</animateMotion>
</polygon>
</svg>
SVG animate gradient along path
I have the following svg that i would like to animate. I would like the red part moves along the path up to the end (so from the top right side to the left bottom side) :
The problem is : obviously is quite impossible to have a gradient following a path. Here is my code so far :
<svg id="fil" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 783.53 362">
<defs>
<style>
.cls-3{
fill: none;
stroke-miterlimit:10;
stroke-width:3px;
}
</style>
<linearGradient id="light" x1="100%" y1="100%">
<stop offset="70%" stop-color="#3E3E3E">
<!-- <animate attributeName="stop-color" to="#CF4B59" from="#3E3E3E" dur="0.5s" fill="freeze" /> -->
</stop>
<stop offset="100%" stop-color="#CF4B59">
<!-- <animate attributeName="stop-color" from="#CF4B59" to="#3E3E3E" dur="0.5s" fill="freeze" /> -->
</stop>
</linearGradient>
</defs>
<g id="Calque_2" data-name="Calque 2">
<g id="Calque_1-2" data-name="Calque 1">
<g class="cls-2">
<path class="cls-3" id="base" d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62" transform="translate(-52.32 -8.93)" stroke="url(#light)"/>
</g>
</g>
</g>
</svg>
I tried to use "animate" to make it move along the path, but it's a vertical gradient which is applied and goes from the top to the bottom and not a gradient which follows the path.
I had other ideas to overcome this :
Maybe by using a second path which would be the same shape than the first one but with inverted gradient so I could make it slide along the initial path maybe
Or, I could use opacity to make the final path appear but i'm not sure i will be able to make the red part move in this way...
If you have some ideas to make the red part move from the top right to the bottom left it would help me a lot!
Question
I would like the red part moves along the path up to the end (so from
the top right side to the left bottom side) :
Consider using fill-line animation with stroke-dashoffset.
For clarity, I placed exactly the same curve below which will show the route of filling the line with color
If this indication of the motion path is not necessary, simply remove the path id = "trace"
<svg id="fil" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 783.53 362">
<defs>
<style>
.cls-3{
fill: none;
stroke-miterlimit:10;
stroke-width:3px;
stroke:#E7E7E7;
}
#base {
fill: none;
stroke:crimson;
stroke-width:3px;
stroke-dashoffset:1732;
stroke-dasharray:1732;
animation: fillStroke 10s linear forwards;
}
#keyframes fillStroke {
to {stroke-dashoffset:0;}
}
</style>
</defs>
<g transform="translate(-352.32 -8.93)">
<path id="trace" class="cls-3" d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62" />
<g class="cls-2">
<path id="base" d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62" >
</path>
</g>
</g>
</svg>
Gradient animation option
Instead of filling with color as the length of the curve increases, a gradient will perform this function
<svg id="fil" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 783.53 362">
<defs>
<style>
.cls-3{
fill: none;
stroke-miterlimit:10;
stroke-width:3px;
stroke:#E7E7E7;
}
#base {
fill: none;
stroke:url(#light);
stroke-width:3px;
stroke-dashoffset:1732;
stroke-dasharray:1732;
animation: fillStroke 10s linear forwards;
}
#keyframes fillStroke {
to {stroke-dashoffset:0;}
}
</style>
<linearGradient id="light" x1="100%" y1="100%">
<stop offset="50%" stop-color="#CF4B59">
<!-- <animate attributeName="stop-color" from="#CF4B59" to="#3E3E3E" dur="10s" fill="freeze" /> -->
</stop>
<stop offset="100%" stop-color="#3E3E3E">
<!-- <animate attributeName="stop-color" to="#CF4B59" from="#3E3E3E" dur="10s" fill="freeze" /> -->
</stop>
</linearGradient>
</defs>
<g transform="translate(-352.32 -8.93)">
<path class="cls-3" d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62" />
<g class="cls-2">
<path id="base" d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62" >
</path>
</g>
</g>
</svg>
Does Xamarin ffimageloadingsvg:SvgCachedImage have different rules from the web when it comes to interpreting CSS in svgs?
Here is an example:
This svgs works in Google, Illustrator but not XF when using ffimageloadingsvg:SvgCachedImage
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<style type="text/css">
.cls-1 {
fill: none;
}
.cls-2 {
fill: none;
stroke: #666;
stroke-miterlimit: 10;
stroke-width: 9px;
}
</style>
</defs>
<rect class="cls-1" width="512" height="512" />
<circle class="cls-2" cx="256" cy="256" r="251.5" />
</svg>
This svgs works in Google, Illustrator and XF when using ffimageloadingsvg:SvgCachedImage
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<style type="text/css">
.cls-1, .cls-2 {
fill: none;
}
.cls-2 {
stroke: #666;
stroke-miterlimit: 10;
stroke-width: 9px;
}
</style>
</defs>
<rect class="cls-1" width="512" height="512" />
<circle class="cls-2" cx="256" cy="256" r="251.5" />
</svg>
Laggy animation on Firefox
I've replicated this effect using mask and filter.
This is what I've done:
Applied two masks on two different text elements, one on the left for the blurred text and one on the right for the normal text.
Animated both masks and the ellipse to get the final effect.
Everything works fine, however the animation is lagging on Firefox. Is there any way to make the animation smooth?
CodePen
body, html {
height: 100%;
margin: 0;
background: -webkit-radial-gradient(center, ellipse, #300 10%, #000 100%);
background: -moz-radial-gradient(center, ellipse, #300 10%, #000 100%);
background: radial-gradient(center, ellipse, #300 10%, #000 100%);
}
svg {
position: relative;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<svg width="100%" height="200" viewBox="0 0 700 200">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
<mask id="mask-left" maskUnits="userSpaceOnUse" x="0" y="0" width="700" height="200">
<path id="d1" d="M0,30 h0 c-35,15 -35,125 0,140 h0z" fill="white" />
<animate xlink:href="#d1" attributeType="XML" attributeName="d" from="M0,30 h0 c-35,15 -35,125 0,140 h-0z" to="M0,30 h700 c-35,15 -35,125 0,140 h-700z" dur="10s" repeatCount="indefinite" />
</mask>
<mask id="mask-right" maskUnits="userSpaceOnUse" x="0" y="0" width="700" height="200">
<path id="d2" d="M700,30 h-672 c-35,15 -35,125 0,140 h672z" fill="white" />
<animate xlink:href="#d2" attributeType="XML" attributeName="d" from="M700,30 h-700 c-35,15 -35,125 0,140 h700z" to="M700,30 h0 c-35,15 -35,125 0,140 h0z" dur="10s" repeatCount="indefinite" />
</mask>
</defs>
<text mask="url(#mask-right)" x="350" y="120" fill="white" text-anchor="middle" font-size="50" font-family="Ubuntu">Magic of Filter and Masking</text>
<text mask="url(#mask-left)" filter="url(#blur)" x="350" y="120" fill="white" text-anchor="middle" font-size="50" font-family="Ubuntu">Magic of Filter and Masking</text>
<ellipse id="e" cx="26" cy="100" rx="25" ry="70" fill="none" stroke="#600" stroke-width="2" />
<animate xlink:href="#e" attributeType="XML" attributeName="cx" from="0" to="700" dur="10s" repeatCount="indefinite" />
</svg>
I have taken a look at your svg animation in different browsers. But it works without any lagging in FireFox and Chrome, but in Internet Explorer it's not working at all. Maybe make use of Fakesmile, this is supported for Internet Explorer.