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.
Related
I've run into an issue on older versions of firefox, (in particular 38.2.1)
where a D3 animation of and SVG component results in rendering issues ( looks like its just not repainting the background).
a Minimal example below
https://jsfiddle.net/4n2f9g81/2/
<svg width="600" height="600">
<g transform="translate(36, 24)">
<g class="group" transform="translate(200)" >
<circle class="circle" fill="white" r="20" stroke-width="2" stroke="#7ab800"></circle>
<g class="label" >
<line y1="-25" y2="-40" stroke="#7ab800" stroke-width="1" shape-rendering="crispEdges"></line>
<text text-anchor="middle" class="peer-label position" y="-45" style="-moz-opacity:0">label text</text>
</g>
</g>
</g>
</svg>
d3.select('.group').transition().duration(5000).attr("transform", "translate(0,100)");
It only occurs when the g element with the class label has some content.. if it's empty or hidden there's no corruption and the animation works fine. since it works in more recent version (and in other browsers) I assume I've hit a firefox bug which has since been resolved.
I'd like to know if there's a workaround for this on these older versions. I've tried a couple of things like forcing a background fill or forcing opacity, but not had any success as yet.
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/
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"/>
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.