Linked Questions

Popular Questions

calculation of svg path in mm unit

Asked by At

line_100mm_300dpi

png to svg conversion gives me below output:

<svg xmlns="http://www.w3.org/2000/svg" id="svg" version="1.1" width="963" height="694" x="0mm"><path id="svgpath" d="M488.000
339.563 C 228.675 525.701,12.725 680.731,8.112 684.074 C 0.525 689.571,-0.128 690.300,1.278 691.706 C 2.684 693.112,19.064 681.613,172.681 571.380 C 266.098 504.346,482.081 349.375,652.642 227.000 C 918.240 36.439,962.624 4.249,961.842 2.750 C 961.340 1.788,960.608 1.029,960.215 1.065 C 959.822 1.101,747.325 153.425,488.000 339.563 " stroke="none" fill="black" fill-rule="evenodd"/></svg>

In browser console:

var svgimg = document.getElementById("svg");
var val  = svgimg.x.baseVal;  
console.log(val);

This gives me below SVGLength object:

SVGLength {unitType: 7, value: 0, valueInSpecifiedUnits: 0, valueAsString: "0mm"}
unitType: 7
value: 2367.94482421875
valueAsString: "626.519mm"
valueInSpecifiedUnits: 626.5187377929688
__proto__: SVGLength
SVG_LENGTHTYPE_CM: 6
SVG_LENGTHTYPE_EMS: 3
SVG_LENGTHTYPE_EXS: 4
SVG_LENGTHTYPE_IN: 8
SVG_LENGTHTYPE_MM: 7
SVG_LENGTHTYPE_NUMBER: 1
SVG_LENGTHTYPE_PC: 10
SVG_LENGTHTYPE_PERCENTAGE: 2
SVG_LENGTHTYPE_PT: 9
SVG_LENGTHTYPE_PX: 5

This calculation tell me that length of the line in image is 626.519mm which is not correct. it's 100mm in length.

My question is : Is this calculation correct? if yes, then what area it covers for calculation ? if this calculation is correct then what should the correct calculation to calculate the svg path length in unit mm or cm ?

var myPath = document.getElementById("svgpath");
var length = myPath.getTotalLength(); 
console.log(length);

this length doesn't gives me length in desired unit. it only gives me some number which doesn't have any unit associated with it.

Related Questions