Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am animating svg image by modifying there code in the source code.
It runs perfectly fine in torch browser but is not animating in google chrome and other browsers.
I am using this code for animation in the xml file of svg image.
<animateColor attributeName="fill" attributeType="XML" from="black" to="grey" dur=".5s" repeatCount="indefinite"/>
<animateColor attributeName="stroke" attributeType="XML" from="black" to="grey" dur=".5s" repeatCount="indefinite"/>
Don't use <animateColor> as it's deprecated. Some UAs implement it, some don't.
Fortunately <animate> can be used anywhere <animateColor> can and the syntax is the same so just global search and replace animateColor with animate and you should be all set.
As pointedOut the correct way to animate the svg image was to use animate tag since animateColor tag is depreceated.
<animate attributeName="fill" attributeType="XML" from="black" to="grey" dur=".5s" repeatCount="indefinite"/>
<animate attributeName="stroke" attributeType="XML" from="black" to="grey" dur=".5s" repeatCount="indefinite"/>
Related
This is the example https://codesandbox.io/s/4xwv953mv0
There are three lines. The original one is hidden the second linked to it by id xlink:href="#line", the third links the second the same way.
Move the slider, the lines will go up in the Chrome, and only one will go up in the Firefox.
If it is a Firefox bug what to do? Is there a way to update SVG with Vue?
Yes. This is a known Firefox bug. Firefox bug report here and here.
There is a simple fix here though. Just change your second use so that it points to the <line> directly, rather than at the <use>.
<use
id="Svg"
xlink:href="#line"
transform="translate(40,10)"
></use>
As an aside. I recommend that you put your line in a <defs> section, rather than hiding it with display:none. This is what <defs> is for, and using display:none can have unintended consequences in some cases.
<defs>
<line
id="line"
x1="0"
y1="0"
x2="100"
:y2="value"
vector-effect="non-scaling-stroke"
/>
</defs>
I'm just starting to deal with Svg, so Im not really aware how to deal with all the effect,
I'm looking to do an small effect animation, exactly like this website: http://www.resanova.fr/
The idea would be to scale my svg image from the bottom to the top like you can see on this website.
I've try the following:
<animateTransform attributeType="xml"
attributeName="transform"
type="scale"
from="0"
to="1"
dur="0.5s" fill="freeze" />
But without success, that just does a normal scale effect instead of the bottom to top . . ..
--EDIT--
Please fidn attach my svg on jsfiddle if it helps :)
https://jsfiddle.net/v3p9gLjx/3/
I want to create a keyframe simulation using SVG, the idea is that the objects in the animation/simulation have particular positions (or line lengths) at particular times. So for example, I may have divided the 1-minute simulation into 60 1-second intervals. I want to do three things:
(a) be able to play the 60-frame simulation frame by frame
(b) be able to select any frame by clicking on a frame button (imagine 60 small rectangles at the bottom of the screen, each representing a particular frame)
(c) be able to step forwards or backwards from a given frame
What would be good ways to do this using SVG?
For example, imagine I have two circles moving around. At each time T (from 1 to 60) each of the circles has a location and radius and visibility (it might be invisible during one or more frames). How do I structure the SVG file?
Note that I would like to avoid using Javascript (ECMA) to do this. I am hoping for a pure SVG solution.
I fear you might be out of luck doing this without JavaScript. In theory, it's perfectly possible to do with SMIL animation, unfortunately support is not so good or at least very inconsistent. If you want to try anyway or if you're happy to make it work in a specific browser, this might give you a starting point:
<svg xmlns="http://www.w3.org/2000/svg" width="110" height="230">
<!-- some moving circle -->
<circle cx="50" cy="50" r="50">
<set id="a0" attributeName="cy" to="50" begin="start.click; r0.click"/>
<set id="a1" attributeName="cy" to="75" begin="a0.begin+1s; r1.click"/>
<set id="a2" attributeName="cy" to="100" begin="a1.begin+1s; r2.click"/>
<set id="a3" attributeName="cy" to="125" begin="a2.begin+1s; r3.click"/>
</circle>
<!-- Rects to address certain frames -->
<g fill="#d44">
<rect id="r0" width="20" height="20" y="180"/>
<rect id="r1" width="20" height="20" y="180" x="30"/>
<rect id="r2" width="20" height="20" y="180" x="60"/>
<rect id="r3" width="20" height="20" y="180" x="90"/>
</g>
<!-- Play button-->
<polygon id="start" points="40,210 70,220 40,230" fill="#6d6"/>
</svg>
This attempts to solve your points (a) and (b), but I think it only works as intended in classic non-Blink Opera. I'm not sure whether FakeSmile can help you get more consistent behavior.
Hi everybody i need to animate an svg. It works perfectly in chrome, firefox and safari too, but naturally it don't work on Internet Explorer.
This is my code
<g>
<path fill="none" d="M254.587,356.68
c0-31.728,25.72-57.448,57.448-57.448c31.728,0,57.448,25.721,57.448,57.448c0,31.728-25.721,57.448-57.448,57.448
C280.307,414.128,254.587,388.408,254.587,356.68">
<animate id="cerchio" attributeName="stroke-dashoffset" from="0" to="0" dur="3s"
begin="startAnimation1.click+1.0s"
fill="freeze" keySplines="0 0 0 0" calcMode="linear"/>
</path>
</g>
I tried to use svgweb but it seems don't work with stroke-dashoffset attributeName.
Any ideas?
IE9 supports SVG. Use VML for IE8 and below.
To check if your browser supports SVG or VML take a look at this answer.
I recently created an animation with few images and now the full animation only shows in Firefox. In all other browsers (IE, Google Chrome, Safari), the parts of the animation are missing, basically I used movement and opacity attributes. Is there any way to solve these problems. Thanks.
EDIT:
I can't post the full code, but here's some of it. Hope this will help
<animateTransform
attributeName="opacity"
begin="3s"
dur="3s"
type="CSS"
from="100"
to="0"
repeatCount="1"
/>
<animateTransform
attributeName="transform"
begin="0s"
dur="3s"
type="translate"
from="0 -330"
to="0 0"
repeatCount="1"
/>
<animateTransform> is for animating transforms only, doesn't work with opacity. Just replace that one with <animate> instead and it should be fine. And remove type="CSS" while you're at it.