Related
I'm trying to figure out why it wont morph this path data to another path data, I need to make it look like an real animation.
This is my SMIL code:
<animate xlink:href="#Barra3"
repeatCount="indefinite"
attributeName="d"
dur="5s"
values="M52,346L56,346C61.523,346 66,350.477 66,356L42,356C42,350.477 46.477,346 52,346Z;
M54,225C60.627,225 66,230.373 66,237L66,356L42,356L42,237C42,230.373 47.373,225 54,225Z;"/>
Here is my codepen:
https://codepen.io/joannesalfa/pen/mdPBJxq
and go line 181. I'm using SMIL.
The most important when trying to morph a path in svg is thast the d attribute hes to have the same number of commands and the same commands. I've rewritten the short path so that the lines drawing the sides of the shape have a length = 0.
M54,346
C60.627,346,66,351.373,66,358
L66,358L42,358L42,358
C42,351.373,47.373,346,54,346Z
Please take a look:
svg{border:solid}
<svg viewBox="5 200 100 200" width="100">
<path d="M54,346
C60.627,346,66,351.373,66,358
L66,358L42,358L42,358
C42,351.373,47.373,346,54,346Z" stroke="red" fill="gold" >
<animate dur='5s'
attributeType="XML"
attributeName='d'
repeatCount='indefinite'
values="M54,225
C60.627,225 66,230.373 66,236
L66,356L42,356L42,236
C42,230.373 47.373,225 54,225Z;
M54,346
C60.627,346,66,351.373,66,356
L66,356L42,356L42,356
C42,351.373,47.373,346,54,346Z;
M54,225
C60.627,225 66,230.373 66,236
L66,356L42,356L42,236
C42,230.373 47.373,225 54,225Z" />
</path>
</svg>
Update
The OP is commenting:
Would you mind how to rewrite the short path step by step? I find it's very confusing to me
I'm taking both those paths and I'm breaking them in 5 paths of different colors, one for every command. Please note that I had to add a move to command (M) at the beginning of each path. The value for the move to is the last point of the previous path. The lines, are the blue paths.
For the short path you can see those blue paths in the code but not in the svg because their length is 0. I needed those 0 length lines because you have lines in the long path.
svg{width:200px;border:solid;overflow:visible; fill:none}
<svg viewBox="40 220 28 140" >
<desc>The short path</desc>
<path d="M54,346 C60.627,346,66,351.373,66,356" stroke="red" />
<path d="M66,356 L66,356" stroke="blue" />
<path d="M66,356 L42,356" stroke="green" />
<path d="M42,356 L42,356" stroke="blue" />
<path d="M42,356 C42,351.373,47.373,346,54,346" stroke="gold"/>
</svg>
<svg viewBox="40 220 28 140" >
<desc>The long path</desc>
<path d="M54,225 C60.627,225 66,230.373 66,237" stroke="red"/>
<path d="M66,237 L66,356" stroke="blue" />
<path d="M66,356 L42,356" stroke="green" />
<path d="M42,356 L42,237" stroke="blue"/>
<path d="M42,237 C42,230.373 47.373,225 54,225;" stroke="gold"/>
</svg>
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>
im trying to make a pulsing SVG animation. You can see it here:
http://jsfiddle.net/z2Cm9/
<g transform="translate(0,0)">
<polyline fill="none" stroke="#000000" stroke-miterlimit="10" points="9.5,9.583 24.5,36 39.5,9.75"/>
<animateMotion path="M 0,0 0,10 z" fill="freeze" dur="1s" repeatCount="indefinite"></animateMotion>
</g>
<g>
<polyline fill="none" stroke="#000000" stroke-miterlimit="10" points="0,48.5 24.75,48.5 50,48.5 " >
<animate
id="animation1"
attributeName="points"
from="0,48.5 24.75,48.5 50,48.5"
to="20,48.5 24.75,48.5 30,48.5"
dur="0.5s"
/>
<animate
id="animation2"
attributeName="points"
from="20,48.5 24.75,48.5 30,48.5"
to="0,48.5 24.75,48.5 50,48.5"
begin="animation1.end"
dur="0.5s"
/>
<animate
id="animation3"
attributeName="points"
from="0,48.5 24.75,48.5 50,48.5"
to="20,48.5 24.75,48.5 30,48.5"
begin="animation2.end"
dur="0.5s"
/>
</polyline>
</g>
As you can see it pulsates only once now. I want the movement of the line on the bottom to repeat. But cant seem to find a way to do this nicely. Is it for instance possible to add more then one stage. Like from, to, to etc?
Hope I asked the right way this time.
greetings!
Like so?
<animate
id="animation1"
attributeName="points"
from="0,48.5 24.75,48.5 50,48.5"
to="20,48.5 24.75,48.5 30,48.5"
begin="0s;animation3.end;"
dur="0.5s"
/>
The initial animation is triggered both by the beginning of time and the last animation finishing so it all repeats.
I'm using an inline svg that fills an area with a lined pattern. The svg displays correctly Chrome and Safari but on Firefox there are gaps in between the vertical repetitions of the pattern as shown below:
<svg version="1.1" id="clouds" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 744.9 203" preserveAspectRatio="xMinYMin meet ">
<pattern x="66.95" y="122" width="24" height="24" patternUnits="userSpaceOnUse" id="line-fill" viewBox="0 -24 24 24" overflow="visible">
<polygon fill="none" points="0,0 24,0 24,-24 0,-24"/>
<g>
<polygon fill="#D83D96" points="4.4,-9.5 0,-5.1 0,-6.9 9.5,-16.4 9.5,-16.4 17.1,-24 18.9,-24 16.7,-21.5 16.7,-21.5"/>
<polygon fill="#D83D96" points="4.4,-21.5 0,-17.1 0,-18.9 5.1,-24 6.9,-24"/>
<polygon fill="#D83D96" points="24,-6.9 24,-5.1 18.9,0 17.1,0 21.8,-4.4"/>
<polygon fill="#D83D96" points="24,-18.9 24,-17.1 16.7,-9.5 16.7,-9.5 6.9,0 5.1,0 9.5,-4.4 9.5,-4.4 21.8,-16.4"/>
</g>
</pattern>
<g fill="url(#line-fill)">
<circle cx="12.5" cy="22.5" r="12.5"/>
<path d="M180.5,54.5c-10.1,0-19.6,2.3-28.1,6.5c6.3-6.5,10.1-15.3,10.1-25c0-19.9-16.1-36-36-36
c-18.9,0-34.4,14.6-35.9,33.1c-4.2-4.1-9.9-6.6-16.2-6.6C61.5,26.5,51,37,51,49.9c0,12.7,10.1,23,22.6,23.4
C64.7,79.9,59,90.5,59,102.5c0,20.2,16.3,36.5,36.5,36.5c8.4,0,16.1-2.8,22.3-7.6c6,29.2,31.8,51.1,62.7,51.1c35.3,0,64-28.7,64-64
C244.5,83.2,215.8,54.5,180.5,54.5z M126.8,83.7c-6.4-10.6-18-17.7-31.3-17.7c-1.5,0-2.9,0.1-4.4,0.3c2.7-2.7,4.7-6.1,5.8-9.8
c6.5,9.4,17.3,15.6,29.6,15.6c4.4,0,8.7-0.8,12.6-2.3C134.3,73.8,130.2,78.5,126.8,83.7z"/>
<path d="M702.8,87.9v-0.3h0c-0.2-18.3-15-33.1-33.4-33.1S636.2,69.3,636,87.6h-2.2
c1.4-3.9,2.1-8.2,2.1-12.6c0-21-17-38-38-38c-16.7,0-30.8,10.7-35.9,25.7c-4.2-17.5-20.4-30.6-39.8-30.6c-18.4,0-33.9,11.7-39,27.8
V41h0c0-0.3,0-0.7,0-1c0-15.1-12.3-27.4-27.4-27.4c-15.1,0-27.4,12.3-27.4,27.4c0,0.3,0,0.7,0,1h-3.9
c-1.4-12.1-11.7-21.5-24.2-21.5c-12.5,0-22.8,9.4-24.2,21.5H376v81.3h107.3v-0.1h219.5V87.9C702.8,87.9,702.8,87.9,702.8,87.9
C702.8,87.9,702.8,87.9,702.8,87.9z M562.1,87.6h-2.6c0.6-1.2,1.1-2.5,1.5-3.8C561.4,85.1,561.7,86.4,562.1,87.6z M483.3,83.1
c0.5,1.5,1.1,3,1.8,4.5h-1.8V83.1z"/>
<circle cx="642" cy="172.6" r="30.4"/>
<circle cx="732.6" cy="173.6" r="12.2"/>
</g>
</svg>
Here is a fiddle to fiddle with: http://jsfiddle.net/Qs3Y9/
It seems to possibly be a rounding issue since the gaps disappear and reappear as the bounding box is resized but I am fairly new to svg patterns so I'm at a loss as to where to even start looking for the solution.
It happens on Webkit and other browsers also. It is just not as obvious. It is just to do with antialiasing where the pattern squares touch. You can mitigate it by not having your hatch lines terminate exactly at the pattern boundary. Have them extend past it a bit. The extensions won't be drawn but it will mean the that antialiasing will be invisible (or almost invisible).
<pattern x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse" id="line-fill" viewBox="0 0 24 24" overflow="visible" stroke="#D83D96" stroke-width="1.5">
<line x1="-2" y1="8" x2="8" y2="-2"/>
<line x1="-2" y1="20" x2="20" y2="-2"/>
<line x1="4" y1="26" x2="26" y2="4"/>
<line x1="16" y1="26" x2="26" y2="16"/>
</pattern>
Demo here: http://jsfiddle.net/Qs3Y9/2/
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...