SVG Path From Polygon Longitudes and Latitudes - issue

Question

I have used the code verbatim from this post to dynamically create SVG paths from Lats & Lngs and for 80% of the time it's working very nicely but I have several polygons that are not rendering correctly in SVG

I have prepared an example in JSFiddle showing 1 that works & 1 that doesn't ...

<div style="padding:20px;">
  <div>
  Top SVG = NOT Working
  <svg width="200" height="200" viewBox="227.131 154.886 0.007 0.006">
      <path d="M227.125,154.881 227.125,154.881 227.131,154.881 227.132,154.881 227.132,154.882 227.132,154.886 227.132,154.886 227.131,154.886 227.131,154.886 227.129,154.884 227.126,154.881z"> </path>
    </svg>
  </div>

  <div>
  Bottom SVG = Working 
  <svg width="200" height="200" viewBox="227.136 154.905 0.009 0.014">
      <path d="M227.145,154.907 227.140,154.905 227.141,154.910 227.138,154.914 227.136,154.919 227.141,154.919 227.145,154.919 227.145,154.916 227.145,154.912z M227.139,154.914 227.140,154.913 227.141,154.913 227.141,154.913 227.141,154.914 227.140,154.914 227.139,154.914z"> </path>
    </svg>
  </div>
</div>

I'd appreciate it if someone could point out my issue. ALSO - I would like to know how and where to include a stroke color & width in this html. Thanks!!

define "not working" what do you expect to see? what do you actually see? — Robert Longson, Jun 01 '18 at 06:04

Paul LeBeau · Accepted Answer · 2018-06-05T13:15:33.347

I think there are a couple of problems with the first SVG:

The viewBox is incorrect. It doesn't match the shape. It should be more like:
```
viewBox="227.125 154.881 0.007 0.005"
```
The first two values (minX and minY) were wrong. How did this happen? I don't know. The code in that question looks alright at first glance, but I haven't attempted to debug it.
Secondly, I think there is likely a floating point issue. There are five orders of magnitude difference between the x and y offset of the shape, and its size. It seems you may be striking some floating point rounding issues, or something like that.

If you reduce the x and y coordinates, the shape renders correctly.

<div style="padding:20px;">
  <div>
  Top SVG = NOT Working
  <svg width="200" height="200" viewBox="7.125 4.881 0.007 0.005">
      <path d="M7.125,4.881 7.125,4.881 7.131,4.881 7.132,4.881 7.132,4.882 7.132,4.886 7.132,4.886 7.131,4.886 7.131,4.886 7.129,4.884 7.126,4.881z"
            stroke="red" stroke-width=".0002"/>
    </svg>
  </div>

  <div>
  Bottom SVG = Working 
  <svg width="200" height="200" viewBox="227.136 154.905 0.009 0.014">
      <path d="M227.145,154.907 227.140,154.905 227.141,154.910 227.138,154.914 227.136,154.919 227.141,154.919 227.145,154.919 227.145,154.916 227.145,154.912z M227.139,154.914 227.140,154.913 227.141,154.913 227.141,154.913 227.141,154.914 227.140,154.914 227.139,154.914z"> </path>
    </svg>
  </div>
</div>

To avoid this problem with other shapes, you could modify the code to subtract the minX and minY value from all the coordinates. After you fix issue #1, though, of course!

It was probably my trimming decimals back to 3.. That was the change I made to the original code. And .. are you also able to assist with the stroke color and width issue. All I ever get is the entire viewBox filled with the stroke color. I've tried a few different ideas, none worked. — RW-Fairport, Jun 05 '18 at 07:35
You can just add it to your `` element. I have updated my snippet to include a stroke on the first SVG. — Paul LeBeau, Jun 05 '18 at 13:16
I was setting the scale of the stroke-width **way** too high obviously .. as if it were a pixel width setting. Great help. — RW-Fairport, Jun 12 '18 at 02:59

score -1 · Answer 2 · answered Jun 01 '18 at 07:33

The first SVG is located outside the drawing area/viewBox, however You can add the stroke inside the <g> tag that wraps the graphic, as in the second SVG theres two shapes and I added stroke to one only.

Check this code:

<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" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g stroke-width="3" stroke="#00CF00">
 <polygon points="15,81 113,9 170,172 52,189  "/>
</g>
</svg>

<br />

<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" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<circle cx="96.3" cy="93" r="62.3"/>
<g stroke-width="3" stroke="#FFFFFF">
 <polygon  style="fill:#00CF00;" points="71.7,56 144,92 71.7,128.3 "/></g>
</svg>

Why do you post code that has nothing to do with the question? — ccprog, Jun 01 '18 at 09:51

SVG Path From Polygon Longitudes and Latitudes - issue

2 Answers2