“中风破折号数组：x，y；”搞乱svg路径？（铬合金）答案

【问题标题】："stroke-dasharray:x,y;" mess up svg path? (Chrome)“中风破折号数组：x，y；”搞乱svg路径？（铬合金）
【发布时间】：2015-03-30 04:20:39
【问题描述】：

编辑 > 修正：https://bugs.chromium.org/p/chromium/issues/detail?id=364866

作品

我通过 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 接壤）。如果我在海岸线生成中添加类似的stroke-dasharray，同样会出现蓝线。

编辑：好的。首先，我很困惑，因为 topojson.mesh() 总是返回一个 MultiLineString，而后者又会生成一个路径。但是为什么“dasharray：none”工作正常！？？

任何想法？我认为这些 dasharray 使路径的一部分没有关闭。（检查中）。

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

【问题讨论】：

好的：首先，我很紧张，因为 topojson.mesh() 返回一个 MultiLineString，它反过来生成一个路径。但是为什么"dasharray:none" 工作正常！？？
您似乎在使用 Chrome。其他浏览器也会发生同样的事情吗？
@PaulLeBeau：在 FF 上运行良好。 24 小时，我与这个战斗。
你能提供一个最小的、功能齐全的测试用例来重现这个问题吗？
目前已修复：crbug.com/438390

标签： google-chrome svg d3.js chromium topojson

【解决方案1】：

这是 Chrome 中的一个已知错误：

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

编辑 > 修正：https://bugs.chromium.org/p/chromium/issues/detail?id=364866

【讨论】：

【解决方案2】：

报告：（测试进行中）

“dasharray:none”：总是可以正常工作。
"dasharray:x,y" : Chrome，唯一多行路径<path d="...."></path>（打开路径）= BUG
"dasharray:x,y" : FF，唯一多行路径 <path d="...."></path>（开放路径）= 有效
"dasharray:x,y" : Chrome, path <path d="....Z"></path> (closed path) = works
"dasharray:x,y" : FF，路径 <path d="....Z"></path>（封闭路径）= 有效

快照

1) topojson.mesh() => 一个多行路径

1a) Chrome（失败）：

1b) FF（有效！）：

2) topojson.feature().features => 多个多边形（路径）

注意：因为多边形接受了 dasharray 样式，所以边界会被虚线两次，在这种情况下会产生非虚实线的错觉（印度/巴基斯坦边界）。

2a) Chrome（有效！）：

2b) FF（有效！）：

路径svg代码

D3 topojson.mesh() 生成单个、大量多线路径：

从质量上讲，代码就是这样的快照和 sn-p，要大得多：

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>

在我们的数据可视化中，在<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 文本编辑器以使用一些正则表达式并寻找一些可能的手臂 Z 或其他。它崩溃了gedit。不允许更深入的视图。

演示

最小演示：我尝试使用最小的手写 xml（包括 stroke-dasharray）来重现该错误，但到目前为止没有成功。 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=Mozilla Firefox for Ubuntu：36.0

【讨论】：