+ 5
I can't animate a polygon?
Search my code to help but pease answer here caus I can't read comments on my codes
12 Answers
+ 4
For modifying the list of points from the <polygon> element, you can access it via JS and the node methods getProperty and setProperty:
var points = getElementById('myPoly').getProperty('points');
getElementById('otherPoly').setProperty('points',points);
Dynamics changes of attributes seems to be difficult to combine with <animate>, but if I good understand, you need only to animate your svg by js, so it doesn't really matter?
But, if your purpose is to make 3D shapes animations, you'll be advice to look at WebGL... or a framework for it, because it's hardly to handle from scratch :P
Anyway, even if handle SVG animations is more easy, you can look at frameworks for handle them: it seems to be useful, as what I see of poor documentation around svg animations... ( except if you love to code from scratch, but you need love to dive into references and documentations too ^^ )
+ 3
You can animate a polygon... but I can't see a code about that?
+ 3
sorry i forgot to make it public, the name is: first 3d game
+ 3
( see previous post )
Now, your JS part:
document.onkeydown = function(event) {
var key_press = String.fromCharCode(event.keyCode); // keyCode is deprecated, and by using 'key' instead, you get directly the corresponding char
/* here a mistake: you close your function declaration, but the next 'if' statement need to be inside -->
}
if (key_press="'") {
var animate=document.getElementByClassName=("animate") // you forgot the semi-colon at line end
// and you try to get from className, instead of tagName...
// in addition, it is 'getElements' and not 'getElement' like in case of byId querying. So itreturn a list, so we need to select the first ( only ) animation element
// ( with your html, you need to target the second 'animate' element, the first being this of the <rect>
animate.innerHTML=("<animate attributeName='x' from='0' to='25' fill='freeze' dur='1s' repeatCount='1'></animate>")
// SVG elements don't have a innerHTML ( or a innerSVG ) property. Anyway, you try to add an <animate> inside the existing <animate> in your html
// one possibility to do same kind of behaviour, is to use parse functions of xml js api, but for your needs, we can do simpliest -->
// here also missing semi-colon, but not required, because of the closing bracket just next
}
( to be continued... )
+ 3
( see previous posts )
So, my html modifications:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body><div class="position_fixed"><B>By TheProgrammers</B></div>
<div id="div1"></div>
<svg width="1000" height="1000" id="svg">
<!-- declaration of <polygon> as generic to be later use -->
<def>
<!-- the shape need an id to be referenced when use it -->
<polygon id="poly" points="25 25, 35 15, 35 -9, 25 0" stroke="green" fill="transparent"/>
</def>
<!-- here i keep the <rect> not in defs, and reduce it ( no animation needed -->
<rect width="25px" height="25px" stroke=green fill="transparent"/>
<!-- here I use the <polygon> declarated previously: use has attributes 'x' and 'y', so we can animate them -->
<use x="0" y="0" xlink:href="#poly">
<!-- here I add the attribute 'begin=indefinite', to not play the animation, but wait for JS ask -->
<animate attributeName="x" from="0" to="25" fill="freeze" dur="1s" repeatCount="1" begin="indefinite"/>
</use>
</svg>
</body>
</html>
And my JS modifications:
document.onkeydown = function(event) {
if (event.key=="'") { // test direct on event.key
var anim=document.getElementsByTagName("animate")[0];
// getElementsByTagName, first element, because in my html version I remove the <animate> element of <rect>
anim.beginElement(); // and simply ask for play animation
}
}
I hope to not forgot too much things, and that's all understandable... but don't hesitate to go deeper in SVG and JS API references :P ( I do it for you this time ;) )
+ 3
Thank you, but please could you give me a code that shows how to animate a polygon?
+ 3
You mean to animate its vertices? with <animate> svg element, or with JS?
( I will not necessarly do it quickly, but I do it when I will have some time and energy: I'm a little sick since few days :P )
+ 3
What i precisely want to code is an animation of a polygon. i want to animate the movement of it just like the rectangle and the circle and also change it's shape for th3ee animation of a box
+ 3
i don't see any code about animating a polygon !
+ 2
Well... I have the soluce, but your code is particulary buggy :P
So, let me try to tell you the max...
Post seems too long: I cut it in many parts ^^
Starting with your HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body><div class="position_fixed"><B>By TheProgrammers</B></div>
<div id="div1"></div>
<svg width="1000" height="1000" id="svg">
<rect width="25px" height="25px" stroke=green fill="transparent">
<animate></animate>
<!-- here is an unnecessary <animate> tag, but don't be troublesome itself -->
</rect>
<polygon points="25 25, 35 15, 35 -9, 25 0" stroke="green" fill="transparent"/>
<!-- here you implicitly close the <polygon> element, so the next <animate> has no parent to apply -->
<!-- you can use it without embeding in the shape, but you need to reference the element to be animate -->
<animate attributeName="x" from="0" to="25" fill="freeze" dur="1s" repeatCount="1"></animate>
<!-- here you have a mistake too: you apply a animation to parameter 'x' of the target shape, but <polygon> don't have -->
</svg>
</body>
</html>
( to be continued... )
+ 2
so please can any one say this, while animating a circle, rect, line in svg in html,we have coordinates to move like cx/cy,x/y,x1/x2,y1/y2 directions respectively. BUT the major doubt is can polyline,polygon can animate as like before case but there are points no coordinates. so then what might be the solutions to do???
+ 1
@HamZa BouRouissa:
Open your eyes: question date from four days, and was resolved about 3...
And my multi-post answer quote the code that question talk about, and correct it: that'is code to animate polygon ^^
Often have questions like this?
Learn more efficiently, for free:
Hot today
Sticky position
3 Votes
Help please?
3 Votes
Ejercicio Pytho
0 Votes
Online voting system
2 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
SQL practice
2 Votes