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?

Re: Responsive SVG Pins on Country Map

Posted: Mon Jan 30, 2017 1:50 am
by hulf2012
Hello

I think it's related to relative and absolute positioning of the commands
Take a look to this information. (But You can find more googling it):
http://tutorials.jenkov.com/svg/path-el ... h-commands

I think You have use the commands with absolute coordinates.

Inkscape has a preferences dialog to set up that beaviour. I'll try to post a screenshot.

outputpath.jpg
outputpath.jpg (49.96 KiB) Viewed 511 times


Or press Shift+Ctrl+p and go to Input/output, and then select absolut coordinates.

Or Maybe there is another thin in Your code that is affecting the rendering. If You are testing your Code in Chrome, go to Inspect element, and from there You can get more info about what is happening.

Or if You could share Your code or part of Your code...

Good luck

Re: Responsive SVG Pins on Country Map

Posted: Thu Feb 16, 2017 3:45 am
by pipingdesigner
Oops, I hadn't seen this reply yet. I'll have to change my profile settings so that I get email notifications.

Thank you very much for the reply - as it happens, we decided against this presentation but I'm going to keep this for future reference.

Paul