Элемент SVG, находящийся частично под другим элементом SVG

Я рисую карту, используя d3.js и файл geojson. Карта формируется правильно, а также карта рисуется с использованием большого количества путей для каждого района этой страны. Используя длинный лат города, я рисую круг в проецируемой точке, потому что я хочу применить преобразование, например масштабирование и панорамирование карты.Элемент SVG, находящийся частично под другим элементом SVG

Проблема в том, что круг частично находится под дорогой.

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

svg 
    g 
    path d=..... 
    circle...some attributes 
    g 
    path 
    circle 
    g 
    path 
    g 
    path 
    g 
    path 
    circle

Как решить проблему или есть ли какое-либо другое решение?

источник

2013-12-13 user3074097

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

- g.zoom 
    - g.paths 
     - path 
     - path 
     - ... 
    - g.circles 
     - circle 
     - ... 
    - g.labels 
     - text...

Вы можете связать поведение трансфокатора в g.zoom группы. С уважением,

источник

2013-12-13 12:30:27

Это то, что я делаю. Сначала я создаю карту, как только она визуализируется, я рисую круги. Но проблема все еще идет. – user3074097

Структура SVG говорит иначе. Элементы будут отображаться, так как они находятся в структуре SVG, не следуя порядку визуализации. Например, путь второй группы будет нарисован над кругом первой группы, независимо от того, какой из них был сделан первым. –

@ Pablo..One more thing.I хочу, чтобы поведение наведения курсора мыши на кругах, в которых на мыши наводится радиус круга, увеличивается. Дело в том, что для кругов, которые близки друг к другу, когда я навис над ними, тот, который нарисован ранее, переносится на новый радиус, но затем он оказывается ниже другого круга. Я хочу, чтобы на мышином курсе какой-либо конкретный круг всегда должен быть над другим кругом, независимо от позиционирования на странице HTML. – user3074097

Элемент SVG, находящийся частично под другим элементом SVG

ответ

Смежные вопросы