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

问题

Works

I generate svg paths via d3js. Either data() + mesh() or datum() + mesh() work.

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

or :

//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);

Breaks

Adding stroke-dasharray: 8,4 result into:

Changing it to stroke-dasharray: 6,3,3,3 result into:

Some artifacts appears, and half of the strokes are missing/invisible (borders with Ind/Pakistan, Ind/Nepal, Ind/Myamar, Myamar/Cambodia). If I add a similar stroke-dasharray to the coastline generation, same mess appear with blue lines.

Edit: Ok. First, i'am squizzed because the topojson.mesh() always return a single MultiLineString which, in turn, generate a single path. But why is it that the "dasharray:none" works fine !??

Any idea ? I think these dasharray makes a portions of the path not closed. (check up ongoing).

Link to live code: https://rugger-demast.codio.io/2_zoom/index.html

回答1:

This is a known bug in Chrome:

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

回答2:

Report: (tests ongoing)

"dasharray:none": works fine, always.
"dasharray:x,y" : Chrome, unique multilines path <path d="...."></path> (open path) = BUG
"dasharray:x,y" : FF, unique multilines path <path d="...."></path> (open path) = works
"dasharray:x,y" : Chrome, path <path d="....Z"></path> (closed path) = works
"dasharray:x,y" : FF, path <path d="....Z"></path> (closed path) = works

Snapshots

1) topojson.mesh() => one multiline path

1a) Chrome (fails):

1b) FF (works!):

2) topojson.feature().features => multiple polygons (paths)

Note: since polygons received the dasharray styling, borders are dashed twice, generating in cases the illusion of a non-dashed solid line (Ind/Pakistani border).

2a) Chrome (works!):

2b) FF (works!):

Path svg code

D3 topojson.mesh() generate a single, massive multilines path :

Qualitatively, code is something such this snapshoot and snippet, in much much bigger:

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>

In our dataviz, in <g id="border" style="...;stroke-dasharray:8,4;"></g>, this unique <path d="..."></path> contains as data all our world's borders arcs at once. As required by svg specs, each arc starts by M x,y and chain a succession of L x,y, so we end up with something such :

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

There is no Z at these arcs' end, which would wrongly say "connect back to your arc's head". With a general view, all seems good.

I copied-pasted that path to my gedit text editor to use some regex and look for some possible armful Z or other. It crashed gedit. No deeper view allowed.

Demo

Minimal demo: I tried to reproduce the bug with a minimal hand written xml including stroke-dasharray but unsuccessfully so far. Minimal svg demo with basic svg path MLZ explanation.

Huge demo: On the other end of the scale, my demo implies the generation of a 10MB svg and cannot be ported to jsfiddle easily. For few days, it's available live there