#javascript #svg #map #raphael
#javascript #svg #словарь #raphael
Вопрос:
Я просто экспериментирую с with raphael.js для создания интерактивной svg-карты, ну, то, чего я хотел добиться, чем-то похоже на этот пример с картой Индии, которую я скачал из wikimedia , рабочий пример JS fiddle , ну, все идет хорошо, но я не могу понять, почему «to.front()» искажает карту при наведении курсора мыши на любое состояние. Это из-за неисправного SVg или как-то связано с моими кодами
МОЯ проблемная скрипка, искаженная при наведении курсора мыши
Что ж, вот мой небольшой фрагмент кода
regions[i].mouseover(function (e) {
this.node.style.fill = 'grey';
//this.glow({ color: "#555", width: 10 });
//document.getElementById('region-name').innerHTML = this.data('region');
this.toFront();
this.attr({
cursor: 'pointer',
fill: '#990000',
stroke: '#fff',
'stroke-width': '2'
});
});
Ответ №1:
Метод toFront() ничего не искажает.
Происходит то, что базовые «регионы» созданы подобным образом, и это просто то, что другой материал перекрывает его. Если вы удалите другие элементы, вы получите что-то вроде…
Вы действительно хотите..
regions[i].mouseover(function (e) {...
Или есть наведение курсора мыши на какой-то другой элемент?
Таким образом, он делает именно то, что должен. Если вы не хотите, чтобы это произошло, вам нужно будет либо присоединить обработчик не к области, а вместо этого к элементу, с которым вы хотите, чтобы это произошло. Или создайте другой соответствующий путь к региону.
Комментарии:
1. Спасибо за ответ, но я хотел что-то вроде этого jsfiddle.net/allankiezel/FJrNN . Итак, что мне нужно сделать, изменить мой SVG или что-то в этом роде? Извините, я не совсем вас понимаю
2. Посмотрите, что происходит, когда он просто сжимается jsfiddle.net/3sDDM/2 Вы увидите, что форма не такая, как вы думаете (предполагая, что мы говорим об одном и том же!). У вас должен быть путь с заливкой именно для той формы, которую вы хотите увеличить, или что-то еще.
3. хм, так что программно я не могу этого добиться, мне нужно спроектировать path : ( или что-то в этом роде..
4. Да, но если вы умны, возможно, части пути (границы) уже выполнены (другие элементы, которые покрывают его), которые можно было бы объединить. Нетривиально, но я полагаю, что это возможно. Или, может быть, есть другие бесплатные svg-карты.
5. На самом деле у Raphael есть метод getSubpath(from,to) , поэтому мне интересно, сможете ли вы настроить find the neighbor и настроить from / to, сможете ли вы в значительной степени использовать пограничный подпуть из этого.