Simplify SVG (Vector Graphics) Path - javascript

Input is below:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600">
<g enable-background="new">
<path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 110.949219 265.421875 L 109.730469 265.691406 L 108.699219 266.410156 L 108.011719 267.460938 L 107.78125 268.679688 " transform="matrix(1,0,0,-1,0,600)"/>
<path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 111.050781 268.679688 L 111.050781 265.421875 " transform="matrix(1,0,0,-1,0,600)"/>
<path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 110.949219 268.679688 L 110.949219 265.421875 " transform="matrix(1,0,0,-1,0,600)"/>
</g>
</svg>
Expected Output is below:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600">
<g enable-background="new">
<path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 110.95 265.42 L 109.73 265.69 L 108.7 266.41 L 108.01 267.46 L 107.78 268.68 "/>
<path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 111.05 268.68 L 111.05 265.42 "/>
<path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 110.95 268.68 L 110.95 265.42 "/>
</g>
</svg>
This is about simplifying and beautifying SVG path. I would like the expected output to have the elements of path transform, stroke-width, stroke-linecap, stroke-linejoin, fill stroke and d (rounded to 2 decimals for simplicity).
I have tried let svg_object_alt=document.querySelector('svg').outerHTML;, to convert svg as a string to be read and I am not sure how to extract all the information from it, to be formatted to the expected output? I would really appreciate any help I can obtain :)
I think that the stroke-colour can just hardcode the code number (#929292) into it instead of using the rgb colour :)


you can use that...
const mySvg_Paths = document.querySelectorAll('#my-svg > g > path');
for ( let attr of mySvg_Paths[2].attributes )
{
console.log(attr.name,'-->\n', attr.value);
}
// or
// console.log( 'outerHTML -->\n', mySvg_Paths[2].outerHTML );
// console.log( 'path.d -->\n', mySvg_Paths[2].getAttribute('d'));
#my-svg {
width : 800pt;
height : 600pt;
background : lightgreen;
}
#my-svg path {
fill : none;
stroke-width : 0.074;
stroke-linecap : round;
stroke-linejoin : round;
stroke : rgb(50.19989%, 50.19989%, 50.19989%);
stroke-opacity : 1;
stroke-miterlimit : 10;
}
<svg id="my-svg" viewBox="0 0 800 600">
<g enable-background="new">
<path
d="M 110.949219 265.421875 L 109.730469 265.691406 L 108.699219 266.410156 L 108.011719 267.460938 L 107.78125 268.679688 "
transform="matrix(1,0,0,-1,0,600)"/>
<path
d="M 111.050781 268.679688 L 111.050781 265.421875 "
transform="matrix(1,0,0,-1,0,600)" />
<path
style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;"
d="M 110.949219 268.679688 L 110.949219 265.421875 "
transform="matrix(1,0,0,-1,0,600)"/>
</g>
</svg>
then, you can have a look to -> Use RegEx to parse a string with complicated delimiting
specialy this function:
function parseData(pathData)
{
var pieces = pathData.match(/([a-z]+[-.,\d ]*)/gi), i;
/* now parse each piece into its own array */
for (i=0; i<pieces.length; i++)
pieces[i] = pieces[i].match(/([a-z]+|-?[.\d]*\d)/gi);
return pieces;
}

Related

How to do morphing in SVG

I am working with svg animation right now. I want to setup morph animation on this svg. For example the vibe icon will be morph with Wibe on hover of the image. I try few examples from the stackoverflow. But that is not working. Right now the current animation on this image is rotating E of wibe and floating vibe icon.
Please help me regarding this issue. How can I use morph animation in this.
Thanks
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1491.3333 803.33069"
height="500"
width="700"
xml:space="preserve"
id="svg2"
version="1.1" style="
background-color: #000;
"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs6"><clipPath
id="clipPath18"
clipPathUnits="userSpaceOnUse"><path
id="path16"
d="M 0,602.498 H 1118.496 V 0 H 0 Z" /></clipPath></defs><g
transform="matrix(1.3333333,0,0,-1.3333333,0,803.33067)"
id="g10"><g
id="g12"><g
clip-path="url(#clipPath18)"
id="g14"><g
transform="translate(665.3598,379.7295)"
id="g20"><path
id="path22"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="m 0,0 h 26.962 c 13.938,0 23.293,3.023 28.064,9.077 4.763,6.046 7.149,12.378 7.149,18.979 0,6.235 -2.475,12.003 -7.427,17.33 C 49.789,50.705 40.72,53.36 27.517,53.36 23.481,53.36 18.8,53.262 13.481,53.083 8.17,52.902 3.676,52.625 0,52.265 Z m 0,-57.764 v -56.668 c 1.111,0 4.044,-0.18 8.807,-0.548 4.772,-0.367 11.193,-0.547 19.257,-0.547 15.409,0 26.407,2.566 33.001,7.696 6.609,5.139 9.91,12.296 9.91,21.456 0,3.675 -0.638,7.246 -1.921,10.727 -1.29,3.481 -3.578,6.512 -6.879,9.085 -3.301,2.565 -7.891,4.673 -13.758,6.316 -5.859,1.658 -13.563,2.483 -23.098,2.483 z m -91.859,165.587 c 7.337,1.095 15.769,2.108 25.303,3.023 9.535,0.923 19.25,1.74 29.152,2.483 9.911,0.728 19.535,1.276 28.882,1.643 9.355,0.368 17.509,0.548 24.486,0.548 45.843,0 80.134,-6.504 102.872,-19.527 22.738,-13.016 34.103,-33.278 34.103,-60.787 0,-13.931 -3.203,-25.761 -9.625,-35.483 -6.414,-9.715 -15.131,-18.057 -26.129,-25.034 15.402,-5.506 28.057,-13.383 37.959,-23.645 9.91,-10.278 14.854,-24.756 14.854,-43.473 0,-33.728 -12.468,-57.104 -37.411,-70.134 -24.937,-13.016 -61.793,-19.528 -110.569,-19.528 -12.836,0 -29.617,0.458 -50.337,1.373 -20.727,0.923 -41.898,2.851 -63.54,5.784 z m -25.049,-282.757 c -9.535,-1.47 -18.154,-2.573 -25.859,-3.3 -7.697,-0.743 -14.666,-1.111 -20.9,-1.111 -6.233,0 -13.21,0.368 -20.907,1.111 -7.704,0.727 -16.129,1.83 -25.296,3.3 v 283.852 c 8.057,1.838 16.031,3.121 23.923,3.848 7.892,0.743 15.491,1.111 22.828,1.111 6.969,0 14.494,-0.368 22.55,-1.111 8.072,-0.727 15.957,-2.01 23.661,-3.848 z m -237.89,119.924 34.102,163.928 c 2.941,0.735 8.62,1.463 17.06,2.206 8.439,0.727 17.426,1.095 26.961,1.095 12.1,0 22.828,-0.368 32.182,-1.095 9.348,-0.743 16.039,-1.471 20.076,-2.206 l -89.129,-283.304 c -6.234,-1.838 -13.016,-3.031 -20.345,-3.578 -7.344,-0.548 -14.674,-0.818 -22.003,-0.818 -7.344,0 -14.771,0.27 -22.287,0.818 -7.51,0.547 -15.304,1.74 -23.376,3.578 l -40.157,154.034 c -6.969,-24.576 -14.028,-50.427 -21.184,-77.569 -7.15,-27.141 -14.029,-52.625 -20.631,-76.465 -7.697,-1.838 -15.311,-3.031 -22.827,-3.578 -7.518,-0.548 -14.944,-0.818 -22.273,-0.818 -7.344,0 -14.674,0.27 -22.011,0.818 -7.336,0.547 -14.118,1.74 -20.352,3.578 l -86.368,283.304 c 4.029,0.735 11.095,1.463 21.178,2.206 10.083,0.727 21.177,1.095 33.278,1.095 9.535,0 18.799,-0.368 27.786,-1.095 8.987,-0.743 14.936,-1.471 17.877,-2.206 l 35.761,-168.332 39.609,168.332 c 6.234,1.838 13.113,3.031 20.63,3.586 7.509,0.54 14.936,0.825 22.273,0.825 7.336,0 14.763,-0.285 22.287,-0.825 7.517,-0.555 15.124,-1.748 22.821,-3.586 z" /></g><g
transform="translate(220.8446,208.5321)"
id="g24"><path
id="path26"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="M 0,0 C 62.399,-4.247 111.294,-96.425 205.706,-86.576 172.84,-130.659 92.497,-208.532 24.911,-208.532 -117.925,-208.532 -130.651,8.887 0,0" /> <animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="g10.mouseover" dur="10s" repeatCount="indefinite" end="g10.mouseout"
/></g><g
transform="translate(580.4182,121.9514)"
id="g28"><path
id="path30"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="M 0,0 C -85.441,36.938 -117.17,22.297 -153.931,0 -105.978,83.683 -54.72,98.899 0,0" /> <animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="g10.mouseover" dur="10s" repeatCount="indefinite" end="g10.mouseout"
/></g><g
transform="translate(653.5858,147.7134)"
id="g32"><path
id="path34"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="M 0,0 C -13.413,-15.054 -31.372,-29.682 -73.072,-25.757 -16.196,-124.558 53.294,-118.125 91.542,-83.726 164.849,-17.787 68.09,76.417 0,0" /> <animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="g10.mouseover" dur="10s" repeatCount="indefinite" end="g10.mouseout"
/></g><g
transform="translate(925.3088,392.7031)"
id="g36"><path
id="path38"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="m 0,0 c 0,0 0,41.564 40.817,43.368 40.271,1.78 44.37,-43.33 44.37,-43.33 z M 81.95,103.607 C -68.673,133.163 -111.656,-7.91 -72.935,-117.879 c 0,0 48.014,-94.48 168.825,-63.503 l -1.549,75.894 c 0,0 -80.541,-21.684 -86.736,37.172 l 159.346,2.403 c 0,0 34.441,146.082 -85.001,169.52" /><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" begin="g10.mouseover" repeatCount="1" end="g10.mouseout" /></g></g></g></g>
</svg>

CSS JS animate image along path and make dashes afterwards

I would like to animate an image on a path and show the route of the object (e.g a plane flying over a map). It should look like on this image:
But the dashes should apply after the object has reached the position, so the dashes were shown after the object.
I have tried multiple times, but I can do only once. Dash animation or plane on path . Does someone knows a solution.

animate a mask over the dashed path
move the plane along the same path
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" height="200" width="400">
<defs>
<path id="basePath" d="M 50,150 A 280 500 0 0 1 350,150" />
<mask id="mask">
<use xlink:href="#basePath" stroke-width="3" stroke="white"
stroke-dasharray="1000,0" fill="none">
<animate attributeName="stroke-dasharray" from="0,348.5" to="348.5,0"
begin="0s" dur="5s" fill="freeze" />
</use>
</mask>
</defs>
<circle r="4" cx="50" cy="150" fill="grey" />
<circle r="4" cx="350" cy="150" fill="grey" />
<use xlink:href="#basePath" stroke-width="2" stroke-dasharray="10"
stroke="grey" fill="none" mask="url(#mask)"/>
<path d="M 27,3 H 21 L 13,15 H 9 L 12,3 H 5 L 3,7 H -1 L 1,0 -1,-7 H 3 L 5,-3 H 12 L 9,-15 H 13 L 21,-3 H 27 C 33,-3 33,3 27,3 Z"
fill="white" stroke="black" stroke-width="1.5">
<animateMotion rotate="auto" begin="0s" dur="5s" fill="freeze">
<mpath xlink:href="#basePath"/>
</animateMotion>
</path>
</svg>
The main thing to do is to calculate the length of the path, so you can set the stroke-dasharray values for the mask animation such that they keep pace with the animated plane. You can get that length in Javascript with
document.querySelector('#basePath').getTotalLength()

jquery svg shift color animation

I'm trying to make an svg animation where the color of the svg slides to an other color. My goal is to make kind of a running light.
I'm not trying to fade the fill color of the whole svg as seen in a lot of examples.
Here is an example photo with a few frames of the animation. svg animation
I've tried a few different technics but couldn't find a good one.
This is how i did it with css keyframes:
$.keyframe.define([{
name: 'shift',
'0%': {'background-position':'0px'},
'2%': {'background-position':'6px'},
'4%': {'background-position':'12px'},
'6%': {'background-position':'18px'},
'8%': {'background-position':'24px'},
'10%': {'background-position':'30px'},
'12%': {'background-position':'36px'},
'14%': {'background-position':'42px'},
'16%': {'background-position':'48px'},
'18%': {'background-position':'54px'},
'20%': {'background-position':'60px'},
'22%': {'background-position':'66px'},
'24%': {'background-position':'72px'},
'26%': {'background-position':'78px'},
'28%': {'background-position':'84px'},
'30%': {'background-position':'90px'},
'32%': {'background-position':'96px'},
'34%': {'background-position':'102px'},
'36%': {'background-position':'108px'},
'38%': {'background-position':'114px'},
'40%': {'background-position':'120px'},
'42%': {'background-position':'126px'},
'44%': {'background-position':'132px'},
'46%': {'background-position':'138px'},
'48%': {'background-position':'144px'},
'50%': {'background-position':'150px'},
'52%': {'background-position':'156px'},
'54%': {'background-position':'162px'},
'56%': {'background-position':'168px'},
'58%': {'background-position':'174px'},
'60%': {'background-position':'180px'},
'62%': {'background-position':'186px'},
'64%': {'background-position':'192px'},
'66%': {'background-position':'198px'},
'68%': {'background-position':'204px'},
'70%': {'background-position':'210px'},
'72%': {'background-position':'216px'},
'74%': {'background-position':'222px'},
'76%': {'background-position':'228px'},
'78%': {'background-position':'234px'},
'80%': {'background-position':'240px'},
'82%': {'background-position':'246px'},
'84%': {'background-position':'252px'},
'86%': {'background-position':'258px'},
'88%': {'background-position':'264px'},
'90%': {'background-position':'270px'},
'92%': {'background-position':'276px'},
'94%': {'background-position':'282px'},
'96%': {'background-position':'288px'},
'98%': {'background-position':'294px'},
'100%': {'background-position':'300px'}
}]);
$('.ledbar').playKeyframe({
name: 'shift',
duration: "4s",
timingFunction: 'linear',
delay: 0,
direction: 'reverse',
fillMode: 'forwards',
});
The oranje part moves over the green. The svg was drawn so that every rectangle was just 6px further than the other one.
this didn't work becouse of the smooth transition between two keyframes. This made the animation flicker. Maybe if the animation was in steps it would work but i don't know how this works and i thing there has to be a better way.
So i'm wondering how i could liniear shift the color of the svg in to an other color. I've looked at svg masks etc. but couldn't figuer it out.
This is the svg file, maybe its useful:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve">
<g id="Button_2_-_Green">
</g>
<g>
<path fill="#80A993" d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/>
<path fill="#80A993" d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/>
<path fill="#80A993" d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/>
<path fill="#80A993" d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/>
<path fill="#80A993" d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/>
<path fill="#80A993" d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/>
<path fill="#80A993" d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/>
<path fill="#80A993" d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/>
<path fill="#80A993" d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/>
<path fill="#80A993" d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/>
<path fill="#80A993" d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/>
<path fill="#80A993" d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/>
<path fill="#80A993" d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/>
<path fill="#80A993" d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/>
<path fill="#80A993" d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/>
<path fill="#80A993" d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/>
<path fill="#80A993" d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/>
<path fill="#80A993" d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/>
<path fill="#80A993" d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/>
<path fill="#80A993" d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/>
<path fill="#80A993" d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/>
<path fill="#80A993" d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/>
<path fill="#80A993" d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/>
<path fill="#80A993" d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/>
<path fill="#80A993" d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/>
<path fill="#80A993" d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/>
<path fill="#80A993" d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/>
<path fill="#80A993" d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/>
<path fill="#80A993" d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/>
<path fill="#80A993" d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/>
<path fill="#80A993" d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/>
<path fill="#80A993" d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/>
<path fill="#80A993" d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/>
<path fill="#80A993" d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/>
<path fill="#80A993" d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/>
<path fill="#80A993" d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/>
<path fill="#80A993" d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/>
<path fill="#80A993" d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/>
<path fill="#80A993" d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/>
<path fill="#80A993" d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/>
<path fill="#80A993" d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/>
<path fill="#80A993" d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/>
<path fill="#80A993" d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/>
<path fill="#80A993" d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/>
<path fill="#80A993" d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/>
<path fill="#80A993" d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/>
<path fill="#80A993" d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/>
<path fill="#80A993" d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/>
<path fill="#80A993" d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/>
<path fill="#80A993" d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/>
<path fill="#80A993" d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/>
<path fill="#80A993" d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/>
<path fill="#80A993" d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/>
<path fill="#80A993" d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/>
<path fill="#80A993" d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/>
<path fill="#80A993" d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/>
<path fill="#80A993" d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/>
<path fill="#80A993" d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/>
<path fill="#80A993" d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/>
<path fill="#80A993" d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/>
<path fill="#80A993" d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/>
<path fill="#80A993" d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/>
<path fill="#80A993" d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/>
<path fill="#80A993" d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/>
<path fill="#80A993" d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/>
<path fill="#80A993" d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/>
<path fill="#80A993" d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/>
<path fill="#80A993" d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/>
</g>
</svg>

Here is one way to do it: with an animated linear gradient.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve">
<defs>
<linearGradient id="orange-grad" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="orange"/>
<stop offset="0" stop-color="orange">
<animate attributeName="offset" attributeType="XML"
begin="0s" dur="5s" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#80A993">
<animate attributeName="offset" attributeType="XML"
begin="0s" dur="5s" fill="freeze" from="0" to="1" />
</stop>
<stop offset="1" stop-color="#80A993"/>
</linearGradient>
</defs>
<g fill="url(#orange-grad)">
<path d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/>
<path d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/>
<path d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/>
<path d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/>
<path d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/>
<path d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/>
<path d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/>
<path d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/>
<path d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/>
<path d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/>
<path d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/>
<path d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/>
<path d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/>
<path d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/>
<path d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/>
<path d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/>
<path d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/>
<path d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/>
<path d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/>
<path d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/>
<path d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/>
<path d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/>
<path d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/>
<path d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/>
<path d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/>
<path d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/>
<path d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/>
<path d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/>
<path d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/>
<path d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/>
<path d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/>
<path d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/>
<path d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/>
<path d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/>
<path d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/>
<path d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/>
<path d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/>
<path d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/>
<path d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/>
<path d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/>
<path d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/>
<path d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/>
<path d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/>
<path d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/>
<path d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/>
<path d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/>
<path d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/>
<path d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/>
<path d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/>
<path d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/>
<path d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/>
<path d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/>
<path d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/>
<path d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/>
<path d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/>
<path d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/>
<path d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/>
<path d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/>
<path d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/>
<path d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/>
<path d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/>
<path d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/>
<path d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/>
<path d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/>
<path d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/>
<path d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/>
<path d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/>
<path d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/>
</g>
</svg>
Update: How to manually trigger and reverse direction
Here I've used a different way of creating the graph. This variant uses a clipping path and slides an orange rect back and forth behind the clip. As requested by OP, I have added the ability to trigger the animation and switch directions by mousing over a couple of buttons.
This example uses vanilla Javascript and a timeout function for basic animation. If you wanted, you could switch to using a window.requestAnimationFrame() approach if there is a lot going on on your page and the animation doesn't run smoothly.
var graphPosition = 0;
var graphStep = 6;
var graphRunning = false;
var orangeRect = document.getElementById("orange");
document.getElementById("forwards").addEventListener("mouseenter", function() {
graphStep = 6;
startGraphRunning();
});
document.getElementById("backwards").addEventListener("mouseenter", function() {
graphStep = -6;
startGraphRunning();
});
function startGraphRunning()
{
// If already running, do nothing
if (graphRunning) return;
graphRunning = true;
// Perform the first step in the animation
animationStep();
}
function animationStep()
{
// Calculate new position of orang rectangle
var newPos = graphPosition += graphStep;
if (newPos < 0 || newPos > 408)
{
// Stop animation if we have reach min or max position
graphRunning = false;
}
else
{
// Update x position of orange rect
graphPosition = newPos;
// We want right hand edge of rectangle to be at "graphPosition",
// so we position rect at (graphPosition - rectangle-width)
orangeRect.setAttribute("x", graphPosition - orangeRect.width.baseVal.value);
}
// If animation is still running, call this function again in 50mS
if (graphRunning)
setTimeout(animationStep, 50);
}
div {
display: inline-block;
padding: 10px;
background-color: #eee;
border: solid 1px black;
margin: 20px 20px 0 0;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve">
<defs>
<clipPath id="graph">
<path d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/>
<path d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/>
<path d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/>
<path d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/>
<path d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/>
<path d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/>
<path d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/>
<path d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/>
<path d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/>
<path d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/>
<path d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/>
<path d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/>
<path d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/>
<path d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/>
<path d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/>
<path d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/>
<path d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/>
<path d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/>
<path d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/>
<path d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/>
<path d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/>
<path d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/>
<path d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/>
<path d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/>
<path d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/>
<path d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/>
<path d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/>
<path d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/>
<path d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/>
<path d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/>
<path d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/>
<path d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/>
<path d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/>
<path d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/>
<path d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/>
<path d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/>
<path d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/>
<path d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/>
<path d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/>
<path d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/>
<path d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/>
<path d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/>
<path d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/>
<path d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/>
<path d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/>
<path d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/>
<path d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/>
<path d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/>
<path d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/>
<path d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/>
<path d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/>
<path d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/>
<path d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/>
<path d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/>
<path d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/>
<path d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/>
<path d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/>
<path d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/>
<path d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/>
<path d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/>
<path d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/>
<path d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/>
<path d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/>
<path d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/>
<path d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/>
<path d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/>
<path d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/>
<path d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/>
</mask>
</defs>
<g clip-path="url(#graph)">
<rect x="0" y="0" width="408" height="13" fill="green"/>
<rect x="-408" y="0" width="408" height="13" fill="orange" id="orange"/>
</g>
</svg>
<br />
<div id="forwards">Forwards</div>
<div id="backwards">Backwards</div>

SVG Patch is not cleared

Thanks for advance,
i have used the below code with (MoveTo Lineto),
<svg height="200" width="500">
<path fill='none' stroke-width="30" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 L 418 117.5"/>
</svg>
it's shown fine but when i use same with(MoveTo Lineto MoveTo)
<svg height="200" width="500">
<path fill='none' stroke-width="30" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 M 254 117.5 L 418 117.5">
</svg>
.5 pixel is vary check the attached image.
Why that difference? and how to solve?
Sample:
http://jsfiddle.net/3t8rspd1/1/

Please minus the half the stroke width from x position.
you will get the correct path.
eg. if stroke width is 20 mean minus the 10 from second MoveTo.
calculation 254-(storkeWidth/2) = 244. if strokeWidth is 20.
<svg height="200" width="500">
<path fill='none' stroke-width="20" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 M 244 117.5 L 418 117.5"/>
</svg>
Fiddle

stroke-linejoin
<svg height="200" width="500">
<path fill='none' stroke-width="30" stroke-linejoin="round" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 L 418 117.5"/>
</svg>

How to animate changing path lengths (line) with markers in svg

I have this svg path:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='500' height='500'>
<defs id="def">
<marker orient="auto" refY="0.0" refX="-3" id="Arrow2Mend" style="overflow:visible;">
<path id="path3900" style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" d="M -15 -5 L 0 0 L -15 5 z" transform="scale(0.5)"></path>
</marker>
</defs>
<path style="fill:none;stroke:#000000;stroke-width:2.58384609;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;marker-end:url(#Arrow2Mend)" d="m 189,100.09448 200,0" id="arrowline"></path></svg>
I want to be able to increase and decrease the length of the "#arrowline" path, with an animation, keeping the arrowhead also in the correct place while animating. I tried various methods but they were either too complicated for implementing or didn't work. Probably I am missing something. Any help appreciated. Thank you.

I don't know what you mean by "correct" - do you mean the following?
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='500px' height='500px'>
<defs id="def">
<marker orient="auto" refY="0.0" refX="-3" id="Arrow2Mend" style="overflow:visible;">
<path id="path3900" style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" d="M -15 -5 L 0 0 L -15 5 z" transform="scale(0.5)"></path>
</marker>
</defs>
<path style="fill:none;stroke:#000000;stroke-width:2.58384609;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;marker-end:url(#Arrow2Mend)" d="m 10 10 l200,0" id="arrowline">
<animate attributeName="d" from="m 10 10 l200,0" to="m 10 10 l400,0" dur="1s" repeatCount="indefinite"/>
</path>
</svg>

Categories

Resources