"stroke-dasharray:x,y;" 弄乱 svg 路径？ (Chrome)

Question

编辑 > 修正：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 结果为：

出现了一些瑕疵，一半的笔画是missing/invisible（边界为Ind/Pakistan、Ind/Nepal、Ind/Myamar、Myamar/Cambodia）。如果我在海岸线生成中添加一个类似的 stroke-dasharray，同样的乱七八糟的东西会出现蓝线。

编辑： 好的。首先，我很困惑，因为 topojson.mesh() 总是 return 一个单一的 MultiLineString，它反过来生成一个单一的路径。但为什么“dasharray:none”可以正常工作！？？

有什么想法吗？ 我认为这些 dasharray 使部分路径没有闭合。（正在进行检查）。

Link 直播代码：https://rugger-demast.codio.io/2_zoom/index.html

Answer 1

报告：（正在进行测试）

"dasharray:none"：工作正常，总是。
"dasharray:x,y" : Chrome, 独特的多行路径 <path d="...."></path> (open path) = BUG
"dasharray:x,y" : FF, 独特的多行路径 <path d="...."></path> (open path) = works
"dasharray:x,y" : Chrome, 路径 <path d="....Z"></path> (闭合路径) = works
"dasharray:x,y" : FF，路径 <path d="....Z"></path>（封闭路径）= 有效

快照

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

1a) Chrome（失败）：

1b) FF（有效！）：

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

注意： 因为多边形接受了 dasharray 样式，所以边界被虚线两次，在某些情况下产生 non-dashed 实线的错觉（Ind/Pakistani 边界).

2a) Chrome（有效！）：

2b) FF（有效！）：

路径svg代码

D3 topojson.mesh() 生成一个单，大量的多行路径：

从质量上讲，代码就是这样的快照和片段，在更大的范围内：

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，这会错误地表示 "connect back to your arc's head"。总的来说，一切似乎都很好。

我 copied-pasted 我的 gedit 文本编辑器的路径使用一些正则表达式并寻找一些可能的 armful 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=Ubuntu 的 Mozilla Firefox：36.0

Answer 2

这是 Chrome 中的已知错误：

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

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

"stroke-dasharray:x,y;" 弄乱 svg 路径？ (Chrome)

"stroke-dasharray:x,y;" mess up svg path? (Chrome)

google-chrome

svg

d3.js

chromium

topojson

有效

休息

报告：（正在进行测试）

快照

路径svg代码

演示

谜团

浏览器