According to the svg Animate Element document animate is additive; but when I am trying to use 2 animate tag with attribute name=display , I am getting only the effect of later one in firefox 23.0 and opera 12.15, here is My svg file;
and Here is two animate tag
<animate attributeName="display" begin="0" dur="10" calcMode="discrete" fill="remove" additive="sum" keyTimes="0;0.5;1" values="inherit;none;inherit" />
<animate attributeName="display" begin="0" dur="10" calcMode="discrete" fill="remove" additive="sum" keyTimes="0;0.2;.8;1" values="inherit;none;inherit;none" />
I like to know if display is the special attribute for animate? or it is a bug in those two browsers?
The display property is one of the "All other data types used in animatable attributes and properties" in the table in the SVG specification that defines whether something is animatable and reading across the answer is "no", it's not additive.
Related
I'm trying to create a flashing lightning icon with SVG but I can't get keyTimes to work. The intention is to set up a more realistic flash with uneven steps between on and off but for the purposes of this question I have simplified the SVG like so
<g id="lightning">
<polygon fill="#FFD744" points="55.724,91.297 41.645,91.297 36.738,105.038 47.483,105.038 41.622,124.568 62.783,98.526 51.388,98.526" />
<animate attributeType="CSS"
attributeName="visibility"
from="hidden"
to="hidden"
values="hidden;visible;hidden"
keyTimes="0; 0.5; 0.6"
dur="2s"
repeatCount="indefinite"/>
</g>
However if I have the keyTimes attribute all flashing stops and the lightning bolt is static on the screen. If I remove the attribute the flashing is slow because the loop is two seconds long and it just oscillates gently back and forth.
From the SVG specification
For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be 1. The key time associated with each value defines when the value is set; values are interpolated between the key times.
You haven't specified a calcMode, but the default is linear so the last value must be 1 or the animation is invalid and ignored.
Here's what happens if I set the last value to 1.
<svg id="lightning">
<polygon fill="#FFD744" points="55.724,91.297 41.645,91.297 36.738,105.038 47.483,105.038 41.622,124.568 62.783,98.526 51.388,98.526" />
<animate attributeType="CSS"
attributeName="visibility"
from="hidden"
to="hidden"
values="hidden;visible;hidden"
keyTimes="0; 0.5; 1"
dur="2s"
repeatCount="indefinite"/>
</svg>
I want to set a global value for the duration of animations in SVG, perhaps via CSS. However the code below does not set the desired duration.
<style>
.animate {
dur: 5s
}
</style>
<animateTransform class="animate" id="at1" attributeName="transform" type="translate" begin="showLine.begin+0s" fill="freeze" from="0,100" to="0,500"/>
Is there some way to set a global default value for the length of animations in SVG? Thanks.
No, SMIL animations use attributes rather than CSS properties so you can't set them using CSS.
I am trying to use non-linear animation rate on an SVG <animateMotion> by using the keyTimes="…" and keyPoints="…" attributes. It does not appear to be working: the animation motion is as linear as can be.
Here's the test file try it!
<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink"
viewBox="0 0 300 200">
<style>
path { stroke:#999 }
circle { fill-opacity:0.5; stroke:black }
</style>
<path id="p" d="M30,160 L270,40" />
<circle id="c" r="5" />
<animateMotion x:href="#c" fill="freeze"
dur="10s"
keyTimes="0;0.1;1"
keyPoints="0;0.9;1">
<mpath x:href="#p" />
</animateMotion>
</svg>
When working the ball should move 90% along the path in the first second, and move the final 10% in the remaining 9 seconds. What do I need to change to get this to work?
I've found another example online that is working correctly, so that I know it's not my OS/browser/version at fault.
(FWIW: Win7x64, Chrome30)
I found my mistake. Even though the default value for calcMode is linear—which is what I want—I didn't read far enough into the spec to see that it's a different default value for <animateMotion> elements.
Adding an explicit calcMode="linear" fixes the problem.
The default calcmode Value for animate Motion is paced not linear;
http://www.w3.org/TR/SVG/animate.html#AnimateMotionElement
And, if calcmode = "paced" is specified, any ‘keyTimes’ or ‘keySplines’ will be ignored.
http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute;
That is why you have not got the the desired output...
There are a number of JavaScript snippets that will make text or graphics travel along a circular path with the letters or words always upright.
Example: http://www.dseffects.com/f_scripts.html
I want to have text (or graphics) orbit a point the way the moon orbits the Earth, with one face always toward the center. The following example shows this, but very crudely and not using web fonts.
Example: http://javaboutique.internet.com/text/Manipulation/TextRotor/
I am sure there is a way to modify orbiting code like the first example (only not around the cursor) so that each letter/image keeps one side toward the center (axis).
SVG really is the way to go for this kind of thing. I just whipped this up really quick but at least it works as an example. The HTML part can vary a lot but this is one way.
Put this into an html page:
<iframe src="orbitingText.svg" width="100%" height="100%"></iframe>
Then, create the orbitingText.svg file (it's just a text file with a .svg extension):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 300 300">
<defs>
<path id="textPath" d="M 150 75 a 75 75 0 1 0 0.00001 0"/>
</defs>
<circle cx="150" cy="150" r="40" stroke="blue" stroke-width="1"></circle>
<text fill="red">
<textPath xlink:href="#textPath" startOffset="0">
<animate attributeName="startOffset" dur="7s" from="0" to="500" repeatCount="indefinite" />
Orbiting Text
</textPath>
</text>
Oh, and if you are worried about cross-browser compatibility, check out this site:
http://code.google.com/p/svgweb/
I am trying to have a dot fade from white to red and then from white to red.
This is what I have thus far:
<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/>
<animate id="testies" attributeName="fill" from="#ED1C24"
to="#fff" xlink:href="#test" dur="2s" fill="freeze" />
<animate attributeName="fill" from="" to="#ED1C24"
xlink:href="#test" begin="" onrepeat=" dur="2s" fill="freeze" />
I want the second animation to begin when the first one ends, I know this is possible, I just can't figure it out.
Using your example, here's how:
<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/>
<animate id="testies" attributeName="fill" from="#ED1C24" to="#fff"
xlink:href="#test" dur="2s" fill="freeze" />
<animate attributeName="fill" from="" to="#ED1C24" xlink:href="#test"
begin="testies.end" dur="2s" fill="freeze" />
or as an equivalent alternative without the xlink:href syntax:
<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485">
<animate id="testies" attributeName="fill" from="#ED1C24" to="#fff"
dur="2s" fill="freeze" />
<animate attributeName="fill" from="" to="#ED1C24"
begin="testies.end" dur="2s" fill="freeze" />
</circle>
So, basically just add the id of the element you want to trigger the other animation from and add a ".end" suffix. You can also specify ".begin" to trigger on the beginning of an animation, or add a time offset, e.g begin="someId.end+2s".
It's also possible to use events to trigger animations, the syntax is similar: id followed by a dot and then the name of the event and optionally a time offset. See the list of events that are required in SVG 1.1 here (the leftmost column labeled "Event name" is what applies here).
If you're not scared of specifications see the full syntax of the begin attribute for all the details.