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/
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 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.
No matter what I try, I can't get this SVG gradient to work properly in the most recent Safari (5.1.7) on Windows:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 200">
<linearGradient id="g186" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0" y2="200">
<stop stop-color="#0A306A" offset="0"/><stop stop-color="#030C1B" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="1920" height="200" fill="url(#g186)" />
</svg>`
JSFiddle:
http://jsfiddle.net/wumnb/1/ (Note that the browser may throw an XSS warning because of the base64-encoded SVG)
When I include -webkit-background-size: 100% 200px; with and/or without the -webkit-, it re-sizes the SVG, but it looks significantly lighter than every other browser; almost as if it was cropping a full-page version of the SVG from the top to 200px from the top.
I've tried both answers from the other two questions I could find, but neither is working.
It turns out that preserveAspectRatio="none" needs to be preserveAspectRatio="xMidYMax meet" with viewbox set to the wanted dimensions. Sadly, this doesn't allow for percentages, but it's better than nothing.
W3 documentation for preserveAspectRatio.
EDIT: Upon playing with this more, I've discovered that background position is really weird in Safari. The xM(in|id|ax)yM(in|id|ax) part of the preserveAspectRatio seem to determine where the SVG will go on the page, rather than do what's described on W3.
It appears (to me at least) that xMidYMax is the equivalent of background-position: center bottom; and xMinyMin is the equivalent of background-position: center top;
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.