штрих-дашаррай: х, у; испортить путь svg? (Хром)

Изменить › Исправлено: https://bugs.chromium.org/p/chromium/issues/detail?id=364866

Работает

Я генерирую пути svg через d3js. Работают либо 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);

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

введите здесь описание изображения

Перерывы

Добавление результата stroke-dasharray: 8,4 в:

введите здесь описание изображения

Изменение его на stroke-dasharray: 6,3,3,3 приводит к следующему результату:

введите здесь описание изображения

Появляются некоторые артефакты, а половина штрихов отсутствует/невидима (граничит с Индией/Пакистаном, Индией/Непалом, Индией/Мьямаром, Мьямаром/Камбоджей). Если я добавлю аналогичный штрих-dasharray к генерации береговой линии, такой же беспорядок появится с синими линиями.

Изменить: Хорошо. Во-первых, меня смущает, потому что topojson.mesh() всегда возвращает одну MultiLineString, которая, в свою очередь, генерирует один путь. Но почему то дашаррай: ни один нормально не работает!???

введите здесь описание изображения

Есть идеи? Я думаю, что эти dasharray делают части пути незакрытыми. (проверка продолжается).

Ссылка на активный код: https://rugger-demast.codio.io/2_zoom/index.html


svg google-chrome chromium d3.js topojson
person Hugolpz    schedule 30.01.2015    source источник
comment
Хорошо: во-первых, я сжат, потому что topojson.mesh() возвращает мне одну MultiLineString, которая, в свою очередь, генерирует один путь. Но почему "dasharray:none" работает нормально!???   -  person Hugolpz    schedule 30.01.2015
comment
Похоже, вы используете Chrome. В других браузерах происходит то же самое?   -  person Paul LeBeau    schedule 30.01.2015
comment
@PaulLeBeau: отлично работает на FF. 24 часа, что я сражаюсь с этим.   -  person Hugolpz    schedule 30.01.2015
comment
Можете ли вы предоставить минимальный полнофункциональный тестовый пример, который воспроизводит эту проблему?   -  person Phrogz    schedule 30.01.2015
comment
@Phrogz rugger-demast.codio.io/2_zoom/index.html ( живое кодирование, завтра изменится).   -  person Hugolpz    schedule 30.01.2015
comment
Тем временем исправлено: crbug.com/438390   -  person phk    schedule 26.08.2020

Ответы (2)


arrow_upward
7
arrow_downward

Это известная ошибка в Chrome:

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

Изменить › Исправлено: https://bugs.chromium.org/p/chromium/issues/detail?id=364866

person mbostock    schedule 01.02.2015

arrow_upward
1
arrow_downward

Отчет: (испытания продолжаются)

  • "dasharray:none": всегда работает нормально.
  • "dasharray:x,y": Chrome, уникальный многострочный путь <path d="...."></path> (открытый путь) = ОШИБКА
  • "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() => one multiline path

1а) Хром (сбой):

введите здесь описание изображения

1б) ФФ (работает!):

введите здесь описание изображения

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

Примечание: поскольку многоугольники получили стиль dasharray, границы дважды отмечены пунктиром, что в некоторых случаях создает иллюзию непрерывистой сплошной линии (индийско-пакистанская граница).

2а) Хром (работает!):

введите здесь описание изображения

2б) ФФ (работает!):

введите здесь описание изображения

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, что ошибочно означало бы «подключиться обратно к голове вашей дуги». С общим видом вроде все хорошо.

Я скопировал и вставил этот путь в свой текстовый редактор gedit, чтобы использовать какое-то регулярное выражение и искать какую-то возможную охапку Z или что-то еще. Это разбило gedit. Не допускается более глубокий просмотр.

Демо

Минимальная демонстрация: я пытался воспроизвести ошибку с помощью минимального рукописного XML-файла, включая stroke-dasharray, но пока безуспешно. Минимальная демонстрация svg с основным объяснением пути svg MLZ.

Огромная демонстрация: с другой стороны, моя демонстрация подразумевает создание 10-мегабайтного svg и не может быть легко перенесена на jsfiddle. В течение нескольких дней он доступен здесь

Тайны

Почему из stroke-dasharray артефактов сплошной штрих?

Браузеры

Chrome: версия 39.0.2171.65 Ubuntu 14.04 (64-разрядная версия);

FF=Mozilla Firefox для Ubuntu: 36.0

person Hugolpz    schedule 31.01.2015