We Keep Coding

move image using java script and html css

I want to move a image in a path using js and html.
is that doable?
please check the image to get better idea about my question. are there any example codes or libraries? so I can study and edit to match into my case.

There are multiple ways to approach this problem.
Modify html image css styling via javascript.
add css styling via javascript.
styling to move/rotate : transform: translate(20px,10px) rotate(0.5turn);
change styling using pure css animations #keyframes more here
Display stuff on <canvas> element via javascript more here
Animated svg, or svg with css animation.
Inline svg animated via javascript or css.
I am for now just going to demonstrate the svg approach.
SVG approach (no javascript)
My preferred approach would be to create a svg containing multiple images, and then animate it. The bellow example is just using circle objects, but images should work too using <image href="">.
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="movepath" d="M 5 5 C 10 10, 20 10, 25 5" stroke="#aaa" stroke-width="1" fill="none" />
<circle cx=5 cy=5 r=2 fill="#aaa"/>
<circle cx=25 cy=5 r=2 fill="#aaa"/>
<circle r=1.5 fill="#000">
<animateMotion dur="1s" repeatCount="indefinite">
<mpath xlink:href="#movepath"/>
</animateMotion>
</circle>
</svg>

I don't know if I had understood your question, but I try to answer you.
If I should to do this, "move rocket from earth to sun" I would do it like this:
I'll create 3 img.
img rocket;
img earth;
img sun;
With CSS I will set the Rocket img movement from img earth to sun. Html is not request.

SVG: Export for mophing Animation

When I create a SVG Path in Illustrator and change the position of the points for a morphing animation the points are totally different!
For example:
<path d="M 355.077,300c-31.017,0-31.017-200-62.034-200 s-31.017,200-62.034,200c-31.015,0-31.015-200-62.031-200c-31.014,0-31.014,200-62.029,200c-31.013,0-31.013-200-62.026-200"/>
and
<path d="M355.077,217.635 c-31.017,0-31.017-64.507-62.034-64.507s-31.017,185.701-62.034,185.701c-31.015,0-31.015-274.316-62.031-274.316 c-31.014,0-31.014,175.276-62.029,175.276c-31.013,0-31.013-97.737-62.026-97.737"/>
are the same path (with moved points obviously). However, the order in which they occur is totally different and therefore the animation pushes the points all around the SVG element.
I have tried all export scripts Illustrator offers.
Is there a trick for getting a consistent result when exporting? So that the points are at the right place? Perhaps a plug-in I can use?
Thanks!

This is not an answer. This is just to say that the paths can be used for morphing since the commands and the number of the commands is the same. However if the paths you have are different a solution would be to change all the commands to C
<svg viewBox="0 0 400 400" width="300">
<path fill="gold" d="M 355.077,300
c-31.017,0-31.017-200-62.034-200
s-31.017,200-62.034,200
c-31.015,0-31.015-200-62.031-200
c-31.014,0-31.014,200-62.029,200
c-31.013,0-31.013-200-62.026-200">
<animate
attributeName="d"
attributeType="XML"
values="M 355.077,300
c-31.017,0-31.017-200-62.034-200
s-31.017,200-62.034,200
c-31.015,0-31.015-200-62.031-200
c-31.014,0-31.014,200-62.029,200
c-31.013,0-31.013-200-62.026-200;
M355.077,217.635
c-31.017,0-31.017-64.507-62.034-64.507
s-31.017,185.701-62.034,185.701
c-31.015,0-31.015-274.316-62.031-274.316
c-31.014,0-31.014,175.276-62.029,175.276
c-31.013,0-31.013-97.737-62.026-97.737;
M 355.077,300
c-31.017,0-31.017-200-62.034-200
s-31.017,200-62.034,200
c-31.015,0-31.015-200-62.031-200
c-31.014,0-31.014,200-62.029,200
c-31.013,0-31.013-200-62.026-200"
dur="5s"
repeatCount="indefinite"/>
</path>
</svg>

SVG line animation not working in IE

I am using a carousel that animates the stroke-dasharray but it doesnt work in IE.
my SVG:
<svg class="facts__svgs" viewBox="-10 -10 220 220" data-facts-stoke-svg="">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="651"></path>
</svg>
My JS that changes the stroke:
function calculateDashArray(percentage) {
return (dashOffset * 2) - (segmentOfDashOffset * percentage) - 20;
}
function animateFactsSVG(percentage) {
elPath.style.strokeDasharray = calculateDashArray(percentage);
}
In everything apart from IE this works. In IE the dasharray style is applied but the svg does not change.

I have taken your example and placed it in Internet Explorer and it didn't work. Then I started playing with the various properties to see how I could get to your desired effect. The only way I could make the change in the dasharray reflect graphically was to reset the 'd' attribute: elPath.setAttribute('d',elPath.getAttribute('d')); which made the dasharray show as required, but destroyed the animation. Another way to make the changes appear was to add a second comma separated parameter to dasharray, like '1008.58,100%', but it wouldn't create the desired effect either.
I have to conclude that Internet Explorer doesn't deal well with one value stroke-dasharray and you should probably look for another solution.
I actually made it work with a circle instead of a path like this:
<svg xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%" >
<circle cx="100" cy="100" r="100" stroke="green" stroke-width="1" fill="none" style="stroke-dasharray:228,628;transition: all .6s ease;" ></circle>
</svg>
<script>
var el=document.getElementsByTagName('circle')[0];
var circumference=2*Math.PI*(+el.getAttribute('r'));
function animatePercentage(per) {
el.style.strokeDasharray=(per/100*circumference)+','+((1-per/100)*circumference);
}
setInterval(function() {
animatePercentage(70);
},2000);
</script>
No animation, though. The value changes instantly on IE. Apparently this doesn't work in Internet Explorer, only Edge (see SVG animation is not working on IE11)
Updated the code and saved it in a CodePen here: http://codepen.io/anon/pen/wGPwYq

Is it possible to animate SVG path without use of stroke ? [duplicate]

This question already has answers here:
How to animate handwriting text on the web page using SVG?
(2 answers)
Closed 6 years ago.
There is my svg:
<svg class="num-frame" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="326.229px" height="242.623px" viewBox="0 0 326.229 242.623" enable-background="new 0 0 326.229 242.623" xml:space="preserve">
<g id="Layer_1">
<g id="Layer_1_1_">
<path class="pathe" stroke-width="4" d="M268.971,60.112c-82.83-148.908-248.519,111.12-145.339,150.875c80.484,30.996,200.946-39.396,168.728-132.591
C261.292-11.486,94.387,6.078,87.437,102.417c-7.715,106.967,139.807,153.589,213.991,93.134c0.709-0.575-0.242-1.804-0.982-1.27
c-59.93,43.702-153.784,28.327-194.988-34.033c-36.732-55.58,0.429-114.795,58.131-131.517
C223.1,11.48,289.667,41.227,294.159,107.434c4.34,63.967-59.375,93.766-112.195,103.209
c-33.778,6.039-74.836,1.325-84.991-36.949c-7.695-28.985,5.878-62.127,19.867-86.895c34.6-61.241,105.552-97.912,150.95-26
C268.258,61.552,269.403,60.889,268.971,60.112L268.971,60.112z" />
</g>
</g>
</svg>
I need to make an animation, that will look like hand drawing this circle (line animation), I know have to make it with help of stroke but than the path will lost it's orginal shape, so I want animate orginal shape (path) in way like with stroke.

You could make put a simpler path on top of that one with a white stroke, and use the 2nd path's stroke-dasharray to do the animation that reveals the path underneath.
By simpler, I mean that the 2nd path would have a single stroke and no fill. Just make sure the stroke-width is wide enough to cover the widest part of the path underneath.

SVG Scaling and Coordinates

This is my first SVG project, and I’m not a programmer, but I dabble in interactive infographics. My previous experience in this area comes from working with ActionScript.
I’m using plain SVG (no Raphael, D3, etc.) and trying to create an interactive barchart. After some initial difficulty with the SVG coordinate system and scaling, I found some code online that handles the postscaling translation:
<text x="x_coord0" y="y_coord0" transform="scale(x_scale, y_scale) translate(-x_coord0*(x_scale-1)/x_scale, -y_coord0*(y_scale-1)/y_scale)" …>text</text>
And I converted it into this JavaScript:
var translationfactor = ((0 - y_position)*(y_scalefactor - 1) / y_scalefactor);
var matrix = "scale(1," + y_scalefactor + ") translate(0," + Number(translationfactor) + ")";
targetbar.setAttribute("transform", matrix);
The problem is that I need the bars “translated” back to the chart’s baseline, not the original locations of their topmost points. Currently the correctly scaled bars are hugging the top of the chart:
http://billgregg.net/miscellany/upsidedown-barchart.png
I’ve tried several fixes, including plugging the bars’ ”missing height” into translationfactor (the bars start out the full height of the chart and get scaled down dynamically). Nothing has worked. Part of my problem is that, besides being new to SVGs, I can stare at that code all day and my brain still can’t parse it. Multiplying negative numbers is too abstract and at a fundamental level I just don’t “get” the math, which of course makes modifying the code difficult.
My questions:
(1) What’s the fix for the code above to position the bars back on the baseline of the chart?
(2) Is there a more transparent, more pedestrian way of accomplishing the translation? My first thought along these lines was that if a bar’s height is reduced to 40% of its original value, then multiplying the original Y coordinate value by 250% should reset the bar to its original location (at least its topmost point), but that doesn’t seem to work.
(3) Is there a way to set a bar’s point of origin to its bottom? In Flash it’s possible, though as far as I know it’s a manual, not a programmatic task.
(4) Is there a method similar to .localToGlobal() in ActionScript that would allow me to avoid having to mess with the local coordinate system at all?

Behind the scenes there is matrix math going on and it can be hard to get your head around the pre and post multiplication of arrays.
It's not entirely clear what you are trying to achieve, but reading between the lines, it sounds like you are wanting to provide graph coordinates in their raw(ish) form and have the SVG scale and position them for you(?)
If that's the case, then I think the solution is simpler than what you think.
Assuming I'm right, we'll start with something that looks like this:
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="">
<rect x="0" width="1" height="5" fill="red"/>
<rect x="1" width="1" height="11" fill="green"/>
<rect x="2" width="1" height="12" fill="orange"/>
<rect x="3" width="1" height="8" fill="blue"/>
</g>
</svg>
Where x is obvious and the bar length is in height. y defaults to 0, so we don't need it here.
You basically want to know what goes in the transform to scale and position the bars on your page. The fact that your graph is "upside-down" helps a little. Because the origin in an SVG is at the top left.
First apply a scale. Let's make the bars 20 pixels wide, and scale the lengths up by 10.
<g transform="scale(20,10)">
Next you want to position the graph on the page. Let's put the top-left corner at (40,40).
In SVG the transformations are concatenated in order (post-multiplied) so in order for the translation to be what you specify and not be multiplied by the scale, you should put it first.
<g transform="translate(40,40) scale(20,10)">
So the final SVG looks like this:
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="translate(40,40) scale(20,10)">
<rect x="0" width="1" height="5" fill="red"/>
<rect x="1" width="1" height="11" fill="green"/>
<rect x="2" width="1" height="12" fill="orange"/>
<rect x="3" width="1" height="8" fill="blue"/>
</g>
</svg>
The above has been simplified by assuming you have already subtracted the values from your base 20%. If you wanted to keep the pure raw values, it's possible, but things get a bit trickier. You would need to either tinker with both the y and height value of each bar, or use clipping to hide the part of the bar above 20%.
For "right way up"/normal graphs. All you need to do is make the y scale negative and translate the graph so that the bottom-left is where you want it.
<g transform="translate(40,140) scale(20,-10)">
Hope this helps.