“笔划dasharray：X，Y;”乱搞svg路径？ （铬）

Question

作品

我通过d3js生成svg路径。 data() + mesh()或datum() + mesh()工作。

svg.append("g").attr("id","border")
        .attr("style", "fill: none; stroke:#646464;")
    .selectAll("path")
    .data([topojson.mesh(json, L0, function(a, b) { return a !== b; })])
    .enter().append("path")
        .attr("d", path);

或：

//inland borders lines
svg.append("g").attr("id","coast")
        .attr("style", "fill: none; stroke:#646464;")
    .append("path")
    .datum(topojson.mesh(json, json.objects.admin_0, function(a,b){return a===b;}))
        .attr("d", path);

符

将 stroke-dasharray: 8,4 结果添加到：

将其更改为 stroke-dasharray: 6,3,3,3 会导致：

出现一些文物，一半的笔画缺失/不可见（与Ind / Pakistan，Ind / Nepal，Ind / Myamar，Myamar / Cambodia的边界）。如果我在海岸线生成中添加类似的笔划 - 达哈哈，那么同样的混乱会出现蓝线。

---

编辑：好的。首先，由于topojson.mesh（）总是返回一个MultiLineString，因此我会被捣碎，而MultiLineString又生成一个路径。但是为什么＆＃34; dasharray：none＆＃34;工作良好 ！？？

任何想法？我认为这些dasharray使路径的一部分未关闭。 （检查正在进行中）。

链接到实时代码：https://rugger-demast.codio.io/2_zoom/index.html

Answer 1

这是Chrome中的已知错误：

https://code.google.com/p/chromium/issues/detail?id=364866

Answer 2

报告:(正在进行测试）

• “dasharray：none”：一切正常。
• “dasharray：x，y”：Chrome，独特的多线路径<path d="...."></path>（开放路径）= BUG
• “dasharray：x，y”：FF，唯一多线路径<path d="...."></path>（开放路径）=工作
• “dasharray：x，y”：Chrome，路径<path d="....Z"></path>（封闭路径）=工作
• “dasharray：x，y”：FF，路径<path d="....Z"></path>（封闭路径）=工程

快照

1）topojson.mesh（）=＆gt; 一个多行路径

1a）Chrome（失败）：

1b）FF（有效！）：

2）topojson.feature（）。features =＆gt; 多个多边形（路径）

注意：由于多边形接收到了dasharray样式，因此边框会破折两次，从而产生非虚线实线（Ind / Pakistani边界）的错觉。

2a）Chrome（有效！）：

2b）FF（有效！）：

路径svg代码

D3 topojson.mesh（）生成单个，大​​规模多线路径：

从定性上讲，代码就像这样的snapshoot和snippet，更大一些：

svg { border: 3px solid #6688CC;}

<svg width="300px" height="200px" style="fill:#AAEEBB;" >
  <g transform="translate(25,25)" style="fill:none;stroke:#AABBEE;stroke-linejoin:round;stroke-width:4px;stroke-dasharray:8,8,4,4;">
    <path d="M 0,0 L100,0 L100,45
             M0,100 L50,50 L100,125
             "></path>
  </g>
</svg>

在我们的dataviz中，在<g id="border" style="...;stroke-dasharray:8,4;"></g>中，这个唯一的<path d="..."></path>包含了我们世界上所有边界的数据。根据svg规范的要求，每个弧线都以M x,y开头，并连续L x,y，因此我们最终得到的结果是：

<path d="M 0,0 L100,0 L100,45                  <!-- arc 1-->
         M0,100 L50,50 L100,125                <!-- arc 2-->
         ..."                                  <!-- many more-->
></path>

这些弧的末端没有Z，这会错误地说“连接回你的弧头”。一般来说，一切看起来都不错。

我将该路径复制粘贴到我的gedit文本编辑器中以使用一些正则表达式并查找一些可能的arm Z或其他。它崩溃了gedit。不允许更深入的观点。

演示

最小的演示：我试图用最小的手写xml包括stroke-dasharray来重现这个bug，但到目前为止还没有成功。 Minimal svg demo with basic svg path MLZ explanation

巨大的演示：在比例的另一端，我的演示意味着生成10MB svg并且无法轻松移植到jsfiddle。几天，它可以直播there

秘

为什么，stroke-dasharray中的工件实体笔划？

浏览器

Chrome：版本39.0.2171.65 Ubuntu 14.04（64位）;

FF = Ubuntu的Mozilla Firefox：36.0