Question

我已经使用this post中的代码逐字地从Lats＆amp;动态创建SVG路径。 Lngs和80％的时间它工作得非常好，但我有几个多边形在SVG中无法正确呈现

我在JSFiddle中准备了一个示例，其中显示了1个可行的＆amp; 1没有......

＆＃13;

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

＆＃13;

如果有人可以指出我的问题，我会很感激。另外 - 我想知道如何以及在哪里包含笔触颜色和这个html中的宽度。谢谢！

Answer 1

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

viewBox不正确。它与形状不匹配。它应该更像是：
```
viewBox="227.125 154.881 0.007 0.005"
```
前两个值（minX和minY）是错误的。这怎么发生的？我不知道。该问题中的代码乍一看似乎没问题，但我还没有尝试调试它。
其次，我认为可能存在浮点问题。形状的x和y偏移量及其大小之间存在五个数量级的差异。看起来你可能会遇到一些浮点问题，或类似问题。

如果您缩小x和y坐标，则形状会正确呈现。

＆＃13;

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

＆＃13;

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

Answer 2

第一个SVG位于绘图区域/ viewBox之外，但是您可以在包裹图形的<g>标记内添加笔划，如第二个{{1}}两个形状我只给了一个笔画。

检查此代码：

SVG

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

2 个答案: