"行程dasharray：X，Y;"弄糟svg路径？ （铬） [英] "stroke-dasharray:x,y;" mess up svg path? (Chrome)

问题描述

Works

我通过d3js生成svg路径。或者 data（） + mesh（）或 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，路径）; 
  

或：

  //内陆边界线
 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）; 
  

$ b

休息

添加 stroke-dasharray：8,4 导致：

更改为 stroke-dasharray：6,3 ，3,3 导致：

---

编辑：好的。首先，由于topojson.mesh（）总是返回一个单一的MultiLineString，而这又反过来产生一个单一的路径，但是为什么dasharray：none工作正常！

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

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

解决方案

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

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

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

解决方案

This is a known bug in Chrome:

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

这篇关于"行程dasharray：X，Y;"弄糟svg路径？ （铬）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！