I have:
<set attributeName="visibility" attributeType="CSS" to="visible" begin="5s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden" begin="10s" fill="freeze"/>
I want the loop to perform these instructions.
If you want the item to continuously "blink" on and off, you need to set the animations to have a duration and begin when the other ends. For example:
Demo: http://jsfiddle.net/rnSFY/
<svg xmlns="http://www.w3.org/2000/svg">
<circle fill="red" cx="50%" cy="50%" r="30" stroke="black">
<set id="show" attributeName="visibility" attributeType="CSS" to="visible"
begin="0s; hide.end" dur="1s" fill="freeze"/>
<set id="hide" attributeName="visibility" attributeType="CSS" to="hidden"
begin="show.end" dur="1s" fill="freeze"/>
</circle>
</svg>
Rather than toggling back and forth between two different static set elements, you can use a single animate that switch between hidden and visible indefinitely.
Then you also don't need to worry about wiring up the begin timing with the end event of another named animation
<svg xmlns="http://www.w3.org/2000/svg">
<circle fill="red" cx="50%" cy="50%" r="30" stroke="black">
<animate attributeType="CSS"
attributeName="visibility"
from="visible"
to="hidden"
dur="1s"
repeatCount="indefinite"/>
</circle>
</svg>
Related
If you click two subsequent times on the rectangle, you see an animation toggling on and off:
<svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container">
<rect id="project-10-activator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="block">
<animateTransform id="activate_project_10" begin="click" fill="freeze" dur="0.01s"></animateTransform>
<set attributeName="display" to="block" begin="inactivate_project_10.end" fill="freeze"></set>
<set attributeName="display" to="none" begin="activate_project_10.end" fill="freeze"></set>
</rect>
<rect id="project-10-inactivator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="none">
<animateTransform id="inactivate_project_10" begin="click" fill="freeze" dur="0.01s"></animateTransform>
<set attributeName="display" to="block" begin="activate_project_10.end" fill="freeze"></set>
<set attributeName="display" to="none" begin="inactivate_project_10.end" fill="freeze"></set>
</rect>
<text data-project-id="10" x="17" y="121.2" transform="rotate(-90,17,121.2)" class="timeline-project-label label-above-project-point">
<tspan>Upper Title</tspan>
<tspan class="project-name-span" x="17" dy="15">lower title</tspan>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 16.609375 139.7156219482422" to="90 16.609375 139.7156219482422" additive="sum" fill="freeze">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 0" to="-33.140625 -10" additive="sum" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 0" to="33.140625 10" additive="sum" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 16.609375 139.7156219482422" to="-90 16.609375 139.7156219482422" additive="sum" fill="freeze">
</animateTransform>
</text>
</svg>
I want that to work as many times as you may want, but it only works once; afterwards the rotation start point for the first click is for some reason shifted by -90 deg, as you'll notice from upon the 3rd click. Any ideas?
UPDATE
I noticed the following, if that may help to solve the problem (still unable to solve it): Try out the following with the snippet above:
A) Click on the rectangle once
B) Click on the rectangle again, to get the label back to its original position
C) Before clicking on the rectangle for the third time, copy the four animateTransform tags inside the text tag into a js variable let's say yourSavedAnimateTransformString, then delete them from the markup, e.g. via
document.getElementsByClassName("timeline-project-label")[0].innerHTML =
document.getElementsByClassName("timeline-project-label")[0]
.childNodes[0].outerHTML +
document.getElementsByClassName("timeline-project-label")[0]
.childNodes[1].outerHTML;
, then reinsert them at the exact same place with js, e.g. via
document.getElementsByClassName("timeline-project-label")[0].innerHTML +=
yourSavedAnimateTransformString
Then, click on the rectangle a third and a fourth time, and you'll see that it will work for the third and fourth time without refreshing the page, but fail again for subsequent clicks, unless you repeat this delete-re-insert procedure on every 2nd click on the rectangle, which is a rather hacky not-solution to me.
I supposed that this info may be useful to solve my problem, as it indicates that my problem's somehow related to an unaccessible tracked state of the present animateTransform tags, which can be eliminated by renewing these tags on every 2nd click.
As this is not a real solution, I'd still really like to understand what's going on here..?
UPDATE 2
How come that the snippet above actually does not ainmate the transforms AT ALL in Safari?? According to the specs, animateTransform is supported for all except IE... (for which I'll use Fakesmile when done..)?
I've only noticed it now; you may check my problem in FF and Chrome, where the snippet behaves as described.
Doing it programmatically via document.getElementById("activate_project_10").beginElement() does actually work, but is this really necessary? Which is the standard approach for svg animatransforms in safari?
Okay, found a solution which works in FF and Chrome. The principal thought was to overwrite, after finishing the last animation of inactivate_project_10 animation, the state of the transform property with the initial value, before triggering the first one of the activate_project_10 animation. All this while thus using replace instead of sum as the value of additive for the last resetting animation, while using accumulate=sum to assure that the accumulated (thus actually the resetted) value is taken for the reset.
And this actually worked:
<svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container">
<rect id="project-10-activator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="block">
<animateTransform id="activate_project_10" begin="click" fill="freeze" dur="0.5s"></animateTransform>
<set attributeName="display" to="block" begin="inactivate_project_10.end" fill="freeze"></set>
<set attributeName="display" to="none" begin="activate_project_10.end" fill="freeze"></set>
</rect>
<rect id="project-10-inactivator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="none">
<animateTransform id="inactivate_project_10" begin="click" fill="freeze" dur="0.5s"></animateTransform>
<set attributeName="display" to="block" begin="activate_project_10.end" fill="freeze"></set>
<set attributeName="display" to="none" begin="inactivate_project_10.end" fill="freeze"></set>
</rect>
<text data-project-id="10" x="17" y="121.2" transform="rotate(-90,17,121.2)" class="timeline-project-label label-above-project-point">
<tspan>Upper Title</tspan>
<tspan class="project-name-span" x="17" dy="15">lower title</tspan>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 16.609375 139.7156219482422" to="90 16.609375 139.7156219482422" additive="sum" fill="freeze">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 0" to="-33.140625 -10" additive="sum" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 0" to="33.140625 10" additive="sum" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 16.609375 139.7156219482422" to="-90 16.609375 139.7156219482422" additive="sum" fill="freeze">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="1" dur="0.01s" from="-90 17 121.2" to="-90 17 121.2" fill="freeze" additive="replace" accumulate="sum" begin="inactivate_project_10.end"></animateTransform>
</text>
</svg>
The main modifications were:
changed the dur in the two main animateTransforms (inactivate_project_10 and activate_project_10) to the same time as the combined translation + rotation animations of 0.5s.
added the last animateTransform tag to reset the transform state to the initial state to be able to toggle the animation in an endless loop of clicking. Use a particularly short duration (0.01s used) to reset as fast as possible when finishing a toggle cycle, to quickly be ready for the next one, if triggered again.
Yet, I'd still like to know why this is not working AT ALL in Safari..? Even if you use beginElement(), that only works for the first two toggles, and then stops working..
Without using css and js, I would like to animate this svg. I would like for the circles to go from small to large and then back to small. I've gotten the animation to work for small to large but now I can't seem to figure out how to get them to return to their original size.
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="8" r="1" style="fill:steelblue;">
<animate attributeType="XML" attributeName="r" from="1" to="6"
dur="1s" begin=".25s" repeatCount="indefinite" />
</circle>
<circle cx="18" cy="8" r="1" style="fill:red;">
<animate attributeType="XML" attributeName="r" from="1" to="6"
dur="1s" begin=".5s" repeatCount="indefinite" />
</circle>
<circle cx="30" cy="8" r="1" style="fill:orange;">
<animate attributeType="XML" attributeName="r" from="1" to="6"
dur="1s" begin=".75s" repeatCount="indefinite" />
</circle>
<circle cx="42" cy="8" r="1" style="fill:green;">
<animate attributeType="XML" attributeName="r" from="1" to="6"
dur="1s" begin="1s" repeatCount="indefinite" />
</circle>
</svg>
Focusing on the 1st circle, I'd like to go from r="1" to r="6" and then back to r="1". This should happen within dur="1s".
Is this possible? If so how? Again, without using external JS or CSS.
Thanks!
Instead of from and to, use values to list a series of values that it should animate between.
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="8" r="1" style="fill:steelblue;">
<animate attributeType="XML" attributeName="r" values="1;6;1"
dur="1s" begin="0.25s" repeatCount="indefinite" />
</circle>
<circle cx="18" cy="8" r="1" style="fill:red;">
<animate attributeType="XML" attributeName="r" values="1;6;1"
dur="1s" begin="0.5s" repeatCount="indefinite" />
</circle>
<circle cx="30" cy="8" r="1" style="fill:orange;">
<animate attributeType="XML" attributeName="r" values="1;6;1"
dur="1s" begin="0.75s" repeatCount="indefinite" />
</circle>
<circle cx="42" cy="8" r="1" style="fill:green;">
<animate attributeType="XML" attributeName="r" values="1;6;1"
dur="1s" begin="1s" repeatCount="indefinite" />
</circle>
</svg>
I'm trying to have a line moving between two points.
In order to need only one gradient, I'm rotating the line using transform.
See this for details : SVG gradients direction
Now when I apply the animation on the line it behaves strangely.
It's not going anywhere near the real destination, and I don't really understand what's happening.
Which is particulary weird is that if I remove the rotate transformation, the lines goes to the right point (but then obviously it's not having the right gradient).
<svg height="670.9" width="1920">
<defs>
<linearGradient y2="100%" x2="100%" y1="0%" x1="0%" id="linegradred">
<stop style="stop-color:#F70D1A;stop-opacity:0" offset="0%" />
<stop style="stop-color:#F70D1A;stop-opacity:0.3" offset="50%" />
<stop style="stop-color:#F70D1A;stop-opacity:0.8" offset="100%" />
</linearGradient>
</defs>
<circle cx="964" cy="426" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc"/>
<circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<line class="svg_line_red" id="line_1442197044254" x1="964" y1="426" fill="url(#linegradred)" stroke="url(#linegradred)" x2="1030" y2="492" transform="rotate(-146.5346206536447 964 426)">
<animate attributeName="x1" attributeType="XML" to="924" fill="freeze" dur="1.1s" />
<animate attributeName="y1" attributeType="XML" to="230" fill="freeze" dur="1.1s" />
<animate attributeName="x2" attributeType="XML" to="924" fill="freeze" dur="1s" />
<animate attributeName="y2" attributeType="XML" to="230" fill="freeze" dur="1s" />
</line>
<circle cx="590" cy="344" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<line class="svg_line_red" id="line_1442197045251" x1="590" y1="344" fill="url(#linegradred)" stroke="url(#linegradred)" x2="707" y2="461" transform="rotate(-63.84566422168709 590 344)">
<animate attributeName="x1" attributeType="XML" to="924" fill="freeze" dur="1.1s" />
<animate attributeName="y1" attributeType="XML" to="230" fill="freeze" dur="1.1s" />
<animate attributeName="x2" attributeType="XML" to="924" fill="freeze" dur="1s" />
<animate attributeName="y2" attributeType="XML" to="230" fill="freeze" dur="1s" />
</line>
<circle cx="771" cy="363" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<line class="svg_line_red" id="line_1442197046253" x1="771" y1="363" fill="url(#linegradred)" stroke="url(#linegradred)" x2="838" y2="430" transform="rotate(-85.99981423948691 771 363)">
<animate attributeName="x1" attributeType="XML" to="924" fill="freeze" dur="1.1s" />
<animate attributeName="y1" attributeType="XML" to="230" fill="freeze" dur="1.1s" />
<animate attributeName="x2" attributeType="XML" to="924" fill="freeze" dur="1s" />
<animate attributeName="y2" attributeType="XML" to="230" fill="freeze" dur="1s" />
</line>
</svg>
Here's a fiddle : https://jsfiddle.net/qj7z2hhr/
Any help to understand why this behaves like that would be greatly appreciated.
In SVG files, anything that is lower in the hierarchy is affected by things in their ancestor elements. So all the coordinates in your animations are also being affected by the rotation you are applying to their parent element (the line).
If you want to fix it, you will have to apply the translate animation after (ie. higher up than) the rotation. One way you could do that would be to surround the line with a group. Apply the rotation to the line and an animateTransform to the group.
Update
Actually what I suggested wouldn't work. I didn't account for the fact that you are animating both the start and end points of the line.
But I have another suggestion. Make each line be a vector based at (0,0) and be the length match the original line. I.e.:
x1=0 y1=0
x2=(x2-x1) y2=(y2-y2)
Then you can create your desired animation as a combination of three animation components.
a translate between the original start and end points.
a scale from 1 to 0 to make the start and end converge to a single point
a fixed rotation transform to make your line and gradient point in the correct direction
Here's the result. I've just implemented two of the lines to show you how it works. I'll leave you to decide whether this is simpler than just having multiple gradients, or not.
<svg viewBox="0 0 1920 670.9">
<defs>
<linearGradient y2="100%" x2="100%" y1="0%" x1="0%" id="linegradred">
<stop style="stop-color:#F70D1A;stop-opacity:0" offset="0%" />
<stop style="stop-color:#F70D1A;stop-opacity:0.3" offset="50%" />
<stop style="stop-color:#F70D1A;stop-opacity:0.8" offset="100%" />
</linearGradient>
</defs>
<circle cx="964" cy="426" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc"/>
<circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<line class="svg_line_red" id="line_1442197044254"
x2="66" y2="66"
fill="url(#linegradred)" stroke="url(#linegradred)">
<animateTransform attributeName="transform" attributeType="XML"
type="translate" from="964 426" to="924 230" dur="1.1s"
additive="sum" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="0" dur="1.1s"
additive="sum" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="-146.5" to="-146.5" dur="1.1s"
additive="sum" fill="freeze" />
</line>
<circle cx="590" cy="344" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<line class="svg_line_red" id="line_1442197045251"
x2="117" y2="116"
fill="url(#linegradred)" stroke="url(#linegradred)">
<animateTransform attributeName="transform" attributeType="XML"
type="translate" from="590 344" to="924 230" dur="1.1s"
additive="sum" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="0" dur="1.1s"
additive="sum" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="-63.8" to="-63.8" dur="1.1s"
additive="sum" fill="freeze" />
</line>
</svg>
I want to make some images included in an svg file toggle on and off in order. To do this I need to know how to set my begin and dur attributes on the animate element.
Assuming I have images like the following
<image visibility="visible" xlink:href="image1.gif" x="0" y="0" height="100%" width="100%">
<animate attributeName="visibility" begin="0s"
from="visible" to="hidden" dur="5s" repeatCount="indefinite" />
</image>
<image visibility="hidden" xlink:href="image2.gif" x="0" y="0" height="100%" width="100%">
<animate attributeName="visibility" begin="5s"
from="hidden" to="visible" dur="4s" repeatCount="indefinite" />
</image>
How do I get them to toggle their visibility in order, so that the first image is visible at first for 4 seconds, it turns invisible the next image is visible for exactly 4 seconds, it turns invisible and the previous image is now visible for the next 4 seconds.
I would really prefer to do this with the declarative animation style.
Ok I figured out how to do it from an example in the book SVG Unleashed http://my.safaribooksonline.com/book/photo-and-graphic-manipulation/0672324296
<image visibility="visible" xlink:href="image1.gif" x="0" y="0" height="100%" width="100%">
<animate id="img1ani" attributeName="visibility" begin="1s; img2ani.end+1s"
from="visible" to="hidden" dur="5s" fill="freeze" />
</image>
<image id="img2" visibility="hidden" xlink:href="image2.gif" x="0" y="0" height="100%" width="100%">
<animate id="img2ani" attributeName="visibility" begin="img1ani.end+1s"
from="hidden" to="visible" dur="5s"/>
</image>
just in case anyone else has the same problem,img1ani begins after 1 second or 1 second after image2ani ends while img2ani begins 1 second after img1ani ends.
So in this way it toggles between the two images.
When trying to get SVG rendering in older IE browsers I've used the svgweb project.
Recently I've come up against bug 585 in svgweb.
https://code.google.com/p/svgweb/issues/detail?id=585&q=visibility
In the following example the rectangle stays hidden in IE but shows after one second in Chrome.
<set xlink:href="#testRect" attributeName="visibility" attributeType="XML" begin="1s" end="2s" from="hidden" to="visible" fill="freeze"/>
<rect id="testRect" x="0" y="100" width="300" height="150" fill="#A68064" visibility="hidden" />
I have found a workaround. Dynamically setting the fill or stroke of an element before setting the visibility results in the correct behaviour.
<set xlink:href="#testRect" attributeName="fill" attributeType="XML" begin="0s" end="1s" from="#A68064" to="#A68064"/>
<set xlink:href="#testRect" attributeName="visibility" attributeType="XML" begin="1s" end="2s" from="hidden" to="visible" fill="freeze"/>
<rect id="testRect" x="0" y="100" width="300" height="150" fill="#A68064" visibility="hidden" />