来自多边形经度和纬度的 SVG 路径 - 问题

Question

我已经使用this post 中的逐字代码从 Lats 和 Lngs 动态创建 SVG 路径，并且在 80% 的时间里它工作得非常好，但是我有几个多边形在 SVG 中无法正确渲染

我在JSFiddle 中准备了一个示例，其中 1 个有效，1 个无效...

<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>

如果有人能指出我的问题，我将不胜感激。 ALSO - 我想知道如何以及在何处在此 html 中包含笔触颜色和宽度。谢谢！！

Answer 1

我认为第一个 SVG 存在一些问题：

1. viewBox 不正确。它与形状不匹配。它应该更像：

   viewBox="227.125 154.881 0.007 0.005"
   

   前两个值（minX 和 minY）是错误的。这怎么发生的？我不知道。该问题中的代码乍一看还不错，但我没有尝试调试它。

2. 其次，我认为可能存在浮点问题。形状的x 和y 偏移与其大小之间存在五个数量级的差异。您似乎遇到了一些浮点舍入问题，或类似的问题。

   如果减少x 和y 坐标，则形状会正确渲染。

<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>

为避免其他形状出现此问题，您可以修改代码以从所有坐标中减去 minX 和 minY 值。当然，在您解决问题 #1 之后！

Answer 2

第一个SVG 位于绘图区域/视图框之外，但是您可以在包裹图形的<g> 标记内添加笔触，如第二个SVG 有两个形状，我将笔触添加到一个只要。

检查此代码：

<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>