Im new to SVG animation i have made a cloud using inkscape and i am trying to animate its color.
This is my code :
<path
style="fill:#ffffff"
d="m 134.34587,283.69862 c -7.8945,0 -14.35932,6.03786 -15.0625,13.75 -0.63922,-0.0822 -1.27593,-0.12508 -1.9375,-0.125 -8.365,0 -15.15625,6.76 -15.15625,15.125 0,4.0237 1.59649,7.66271 4.15625,10.375 -0.097,0.69271 -0.1875,1.40555 -0.1875,2.125 0,8.365 6.79125,15.125 15.15625,15.125 1.12553,0 2.22565,-0.14207 3.28125,-0.375 1.33966,6.99425 7.4892,12.28125 14.875,12.28125 8.366,0 15.15625,-6.76 15.15625,-15.125 0,-3.73995 -1.3785,-7.17028 -3.625,-9.8125 7.08612,-1.26528 12.46875,-7.45578 12.46875,-14.90625 0,-7.9992 -6.20608,-14.53612 -14.0625,-15.09375 -0.89029,-7.51611 -7.305,-13.34375 -15.0625,-13.34375 z m -1.9375,30.15625 c 0.29122,0.0376 0.57885,0.0729 0.875,0.0937 0.0969,0.81792 0.24679,1.60238 0.46875,2.375 -0.43597,-0.62744 -0.91401,-1.2278 -1.4375,-1.78125 0.0317,-0.22937 0.0725,-0.45498 0.0937,-0.6875 z m 3.46875,6.90625 c 0.28226,0.40629 0.58657,0.8115 0.90625,1.1875 -0.20082,0.0359 -0.39575,0.0813 -0.59375,0.125 -0.0845,-0.44086 -0.19069,-0.88611 -0.3125,-1.3125 z"
id="top_cloud"
inkscape:connector-curvature="0"
<animate xlink:href="#top_cloud"
dur="12s" begin="1s"
to="#000000" from="#CC9933"
repeatCount="indefinite"
calcMode="linear" attributeName="fill"/>
</path>
Im getting an error while i preview it...
Can anyone correct me where am i wrong?
Add a > after inkscape:connector-curvature="0".
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>
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 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...
I have SVG values in an XML file like 209499.728041:
<path id="dwg-object-136" d="M 209499.728041,19994.245007 209499.728041,27254.245007" style="fill:none;stroke:blue;strok e-width:4px" />
<path id="dwg-object-137" d="M 220719.728041,27254.245007 220719.728041,18564.245007" style="fill:none;stroke:blue;strok e-width:4px" />
<path id="dwg-object-138" d="M 220719.728041,19994.245007 209499.728041,19994.245007" style="fill:none;stroke:blue;strok e-width:4px" />
<path id="dwg-object-209" d="M 214304.728041,35614.245007 A 2000.000000,2000.000000 0 0 0 212304.728041,37614.245007" fi ll="none" stroke="blue" stroke-width="0.100000" />
<path id="dwg-object-210" d="M 230819.728041,37614.245007 A 2000.000000,2000.000000 0 0 0 228819.728041,35614.245007" fi ll="none" stroke="blue" stroke-width="0.100000" />
<path id="dwg-object-211" d="M 216007.728041,39574.245007 216007.728041,35614.245007" style="fill:none;stroke:blue;strok e-width:4px" />
Is there a way to divide all these values by 1000 so that it would be 209.499728041?
If you just want to cause your SVG content to display within the file at 1/100 scale, the easiest way to do this is wrap them in a common transform:
<g transform="scale(0.01)">
<!-- all your paths here -->
</g>
But, if you really want to modify the path data, you can do so using the SVG DOM:
// Untested code
function scalePath( path, scaleFactor ){
var scalable = ['x','y','x1','y1','x2','y2','r1','r2'];
for (var i=0,segs=path.pathSegList,len=segs.numberOfItems;i<len;++i){
var seg = segs.getItem(i);
for (var j=scalable.length;j--;){
var prop = scalable[j];
if (prop in seg) seg[prop] *= scaleFactor;
}
}
}
Note that this (desirably) will not touch the angle, largeArcFlag, or sweepFlag properties of an arc-to command.
You could make the above code slightly more performant by switching on the pathSegTypeAsLetter property of the segment and scaling the correct properties per segment type, but I'm too lazy to do so, and computers are fast.
If you are doing this in order to save bytes in the serialization, you probably want to round the values:
if (prop in seg) seg[prop] = Math.round(seg[prop]*scaleFactor);
I made a logo in Inkscape. For learning I wanted to make a wheel shape in the logo rotate by the animation support in SVG.
It was easy to implement the rotation, but it was difficult for me to be able to specify the correct axis of rotation. The shape was a cog wheel and I wanted it to rotate around its center. Trial and error gave that the xy-coordinate (47.1275, 1004.17) (whose components are strangely asymmetric, but I guess that has to do with the transformation matrices Inkscape applies) was a good approximation (see animateTransform tag below), but how would I get that from first principles?
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 321.281 150.799" xmlns:dc="http://purl.org/dc/elements/1.1/">
<g transform="translate(-9.9178912,-891.57237)">
<g transform="matrix(1.9522781,0,0,1.9522781,4.6434311,-1008.1558)">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 47.1275 1004.17" to="45 47.1275 1004.17" dur="2s" fill="freeze" additive="sum" repeatCount="indefinite" />
<g transform="matrix(0.65043772,0,0,0.65043772,-143.67477,980.4256)" stroke="#666" stroke-miterlimit="4" stroke-dasharray="none" stroke-width="7.68713093" fill="none">
<path stroke-linejoin="miter" d="m293.404-3.51576c-2.73916,0-5.41514,0.287192-8,0.8125v6.1875c-3.47484,0.838872-6.7198,2.18462-9.6875,4l-4.375-4.375c-2.24264,1.48612-4.29226,3.22977-6.1875,5.125s-3.63888,3.94486-5.125,6.1875l4.375,4.375c-1.81538,2.9677-3.16112,6.21265-4,9.6875h-6.1875c-0.5253,2.58486-0.8125,5.26083-0.8125,8s0.2872,5.41515,0.8125,8h6.1875c0.83888,3.47485,2.18462,6.7198,4,9.6875l-4.375,4.375c1.48612,2.24264,3.22976,4.29227,5.125,6.1875s3.94486,3.63888,6.1875,5.125l4.375-4.375c2.9677,1.81538,6.21266,3.16113,9.6875,4v6.1875c2.58486,0.525308,5.26082,0.8125,8,0.8125,2.73916,0,5.41514-0.287192,8-0.8125v-6.1875c3.47484-0.838872,6.7198-2.18462,9.6875-4l4.375,4.375c2.24264-1.48612,4.29226-3.22977,6.1875-5.125s3.63888-3.94486,5.125-6.1875l-4.375-4.375c1.81538-2.9677,3.16112-6.21266,4-9.6875h6.1875c0.5253-2.58485,0.8125-5.26083,0.8125-8s-0.2872-5.41515-0.8125-8h-6.1875c-0.83888-3.47485-2.18462-6.7198-4-9.6875l4.375-4.375c-1.48612-2.24264-3.22976-4.29227-5.125-6.1875s-3.94486-3.63888-6.1875-5.125l-4.375,4.375c-2.9677-1.81538-6.21266-3.16113-9.6875-4v-6.1875c-2.58486-0.525308-5.26084-0.8125-8-0.8125z" stroke-dashoffset="162" stroke="#666" stroke-linecap="butt" stroke-miterlimit="4" stroke-dasharray="none" stroke-width="7.68713093" fill="none"/>
</g>
</g>
</g>
</svg>
From what I've read in the specification I would say the transformation matrices applied are
1.9522781 0 4.6434311
0 1.9522781 -1008.1558
0 0 1
and
0.65043772 0 -143.67477
0 0.65043772 980.4256
0 0 1
Are they applied on the xyz-coordinate (-9.9178912,-891.57237,0) after the translation transformation?
I guess a correct analysis above would get me the top left point of the path described, or maybe the coordinate for the first handle. After that, does one have to parse the path to decide the bounding-box and thereby the center (since it concerns a somewhat circular object) of the path?
Is it all a lesson in not trying to manually do animation on freely created shapes?
I think the transformations will be applied from the innermost outward, so transform="translate(-9.9178912,-891.57237)" will be done last. But you can ignore the other transformations if you put your animation in the innermost region, i.e. within the path itself:
<g transform1>
<g transform2>
<g transform3>
<path d="coordinates">
<animateTransform your transformation here>
</path>
</g>
</g>
</g>
Then you just need to find the centre of your path, which is easy to do in Inkscape, but tricky to do on-the-fly (related question here: programmatically How to get shape width in SVG document using java).
Personally, I'd use a script within the svg so you can use getBBox to find the bounding box of your shape. If you add the following element into your SVG you can make any element with the id="cog" turn about its centre:
<script type="text/ecmascript"><![CDATA[
var svgNS = "http://www.w3.org/2000/svg";
function init(evt)
{
if ( window.svgDocument == null )
{
svgDocument = evt.target.ownerDocument;
}
addRotateTransform('cog');
}
function addRotateTransform(target_id)
{
var element_to_rotate = svgDocument.getElementById(target_id);
var my_transform = svgDocument.createElementNS(svgNS, "animateTransform");
var bb = element_to_rotate.getBBox();
var cx = bb.x + bb.width/2;
var cy = bb.y + bb.height/2;
my_transform.setAttributeNS(null, "attributeName", "transform");
my_transform.setAttributeNS(null, "attributeType", "XML");
my_transform.setAttributeNS(null, "type", "rotate");
my_transform.setAttributeNS(null, "dur", "4s");
my_transform.setAttributeNS(null, "repeatCount", "indefinite");
my_transform.setAttributeNS(null, "from", "0 "+cx+" "+cy);
my_transform.setAttributeNS(null, "to", "360 "+cx+" "+cy);
element_to_rotate.appendChild(my_transform);
my_transform.beginElement();
}
]]></script>
You also need to add onload="init(evt)" as an attribute to the SVG tag. e.g.
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 321.281 150.799"
xmlns:dc="http://purl.org/dc/elements/1.1/"
onload="init(evt)">
This will call the init() function when the SVG is first loaded. The init() function calls addRotateTransform() which find the element with a given id. It then finds the centre of that object using getBBox() and adds an animateTransform method with the relevant centres. You can change the dur attribute which determines the speed of a full rotation.
It might seem like a lot of code, but I think it's the easiest way to determine the centre of a path. It also means to can easily add other rotating elements by add addRotateTransform('whatever-id'); to the init() function.