Page 1 of 1

Responsive SVG Pins on Country Map

Posted: Sun Dec 18, 2016 3:04 am
by pipingdesigner
Trying to modify the design seen at https://tympanus.net/codrops/2016/07/20/simple-interactive-points-effect/

I've added my own SVG country map and map markers ("pins"), done 'Object to Path' from Inkscape for one pin and obtained the d values for the pin from Inkscape's XML Editor and pasted those values into the HTML.

But the output from Inkscape for one map marker outputs to:

Code: Select all

d="m 184.859,1342.7258 a 29.977135,28.728088 0 0 1 -29.97713,28.7281 29.977135,28.728088 0 0 1 -29.97714,-28.7281 29.977135,28.728088 0 0 1 29.97714,-28.7281 29.977135,28.728088 0 0 1 29.97713,28.7281 z"

vs

The code in the demo:

Code: Select all

d="M409.2,195.4L409.2,195.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C416.3,213.8,415.6,201.8,409.2,195.4z"

Needless to say, it's not working. Theoretically, if I could just decipher the demo code I could simply move the existing pins to where I want them.

Can anyone see quickly what I'm doing wrong without spending much time digging into details?