Перекрывающиеся списка / пунктирные удары на соседних путях в SVG

Question

Я строю карту нескольких округов, которые делятся границами.Каждый графство - это собственный закрытый путь, и, следовательно, границы соседних округов сложены друг над другом.

Я хотел бы дать каждому округлому пунктирным ударом.Однако при применении пересекающиеся границы выглядят уродливыми в качестве пунктирных границ каждого перекрытия округа, создавая неровный приборной вид.

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

Решения?

Answer 1

Я закончил решить это по-разному, чем любое из предложений.Я опубликовал другой, большеСпецифический вопрос здесь .(См. Мой ответ)

После того как я завершил шаги, которые я изложенными в другом вопросе, я обратно в WhereFile обратно в Geojson и загрузил его на мою карту.Я не удалил Geojson, который включал все полигоны, но просто выключил стиль границы на этом слое.Затем я применил один и тот же стильный слой для растворенного геоизона, и на этот раз с пунктирным ходом.

Изображение результата здесь.

Answer 2

Да, прилагаемые пути требуются.Тем не менее, пунктирные удары всегда будут неравномерными, потому что приборной массив связан с длиной пути, который будет отклонен для каждого пути.Было бы лучше всего отбросить ход, либо он останется одинаковой шириной, без тире, для каждого пути.Стратегия, которую я использовал, чтобы показать мышь, состоит в том, чтобы уменьшить непрозрачность на Mouseover, а затем вернуть его до 1.00 на мышке.

Answer 3

Если вы используете <pattern> для ударов, вы можете определить Узор на основе общей системы координат, а не на основе измерений любой формы. Таким образом, шаблон для разных форм будет отлично выстроен.

Нижняя сторона - это то, что узоры не будут выровняться с направлением линии: шаблон останется неизменным, является ли линия вертикальной, горизонтальной или изогнутой. Как будто у вас есть лист с рисунком обоев размером с вашей графикой, и вырезают полоску по ее контуру своей формы. Поэтому трюк, чтобы выяснить рисунок, который выглядит хорошо, независимо от того, как она порезается через него.

см. Пример: http://fiddle.jshell.net/lyue4/2/

Основной внешний вид является результатом использования перекрывающихся свойств приборных массивов. Наведите курсор на изображение, и он переключится на шахматную доску; Если вы держите мышь на изображении, он переключится на диагональную картину линии.

Оба выглядят хорошо, но не здорово, в зависимости от углов линии пути. Вам придется проверить его на своей карте, чтобы увидеть, если это улучшение или нет.

Код для шаблонов:

<defs>
    <pattern id="checkerboard" patternUnits="userSpaceOnUse" width="2" height="2">
        <rect width="1" height="1"/>
        <rect width="1" height="1" x="1" y="1"/>
    </pattern>
    <pattern id="diagonals" patternUnits="userSpaceOnUse" width="2" height="2">
        <line x1="-1" y1="0" x2="2" y2="3" />
        <line x1="0" y1="-1" x2="3" y2="2" />
    </pattern>
</defs>

.

CSS:

svg path{
    fill:lightblue;
    stroke: black;
    stroke-dasharray: 2 2;
}
svg:hover path{ 
    stroke: url(#checkerboard);
    stroke-dasharray: none;
}
svg:active path{ 
    stroke: url(#diagonals);
    stroke-dasharray: none;
}
pattern line {
    stroke-width:0.8;
    stroke:black;
}

.

Вы можете, конечно, быть, конечно, играть в размере плитки с рисунком и толщиной диагональных линий, но я обнаружил, что линии должны быть длиннее, чем плитка шаблона, чтобы они были плавно перекрываются.