1

I have a svg file that is a sign and I want to draw that sign like a person singe it with hand to show in html page and repeat draw multiple times.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="929.000000pt" height="683.000000pt" viewBox="0 0 929.000000 683.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,683.000000) scale(0.100000,-0.100000)"
fill="#600178" stroke="none">
<path d="M5645 6816 c-35 -15 -54 -51 -62 -117 -5 -40 -3 -48 18 -63 28 -20
69 -21 112 -3 45 19 58 38 64 99 4 44 2 56 -13 69 -27 23 -84 31 -119 15z">
</path>

<path d="M4845 6504 c-44 -36 -123 -107 -175 -158 -52 -51 -140 -131 -195
-179 -170 -147 -535 -514 -711 -717 -31 -36 -81 -101 -111 -145 -30 -44 -73
-103 -96 -132 -23 -28 -98 -122 -166 -207 -68 -85 -131 -158 -139 -161 -7 -3
and more path drawing code ....
66 20 125 38 130 40 20 7 55 5 55 -3z">
</path>
</g>
</svg>

the full svg file: https://svgshare.com/i/cht.svg

Thanks for helping and sorry for my english.

STATICMAN
  • 13
  • 5
  • Only if you convert the outlined SVG path to a single path: https://stackoverflow.com/questions/65975967/how-to-animate-shape-or-image-file-along-svg-paths-with-the-vivus-js – Danny '365CSI' Engelman Dec 11 '21 at 15:41
  • thanks @danny-365csi-engelman for your time and answer I convert to one path and try that but as I said to below answer its make path hole blink not draw peace step to step. ------- and the first path is not necessary only second path needed. – STATICMAN Dec 11 '21 at 17:42
  • There is a way to do this but it's really complicated because you have intersecting lines and your shape is a filled path. I would advise doing this in Canvas - it's going to be a better option. – Michael Mullany Dec 12 '21 at 14:08

1 Answers1

0

You can insert the svg into the DOM when user clicks to print or submit like in the anwser.

var svg = document.getElementsByTagName('svg')[0]; //Get svg element
var newElement = document.createElementNS("http://www.w3.org/2000/svg",'path'); //Create a path in SVG's namespace
newElement.setAttribute("d","M 0 0 L 10 10"); //Set path's data
newElement.style.stroke = "#000"; //Set stroke colour
newElement.style.strokeWidth = "5px"; //Set stroke width
svg.appendChild(newElement);
Omer Ali
  • 52
  • 3
  • thank for your time; But this code draw hole svg in one peace like blink animation i want to draw like humane sign. – STATICMAN Dec 11 '21 at 13:28