Ролловеры с SVG - PullRequest
Новая
       54

Ролловеры с SVG

4 голосов
/ 05 мая 2011

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

То, чего я хочу достичь, - это то же самое с SVG, но без возни с созданиемзагружать PNG, чтобы при наведении мыши на область прозрачная фигура (со ссылкой на нее) появлялась сверху.Форма SVG будет построена из набора координат точно так же, как полигональная точка доступа на карте изображения.

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

Заранее спасибо.

Ответы [ 2 ]

6 голосов
/ 05 мая 2011

Есть несколько способов получить этот эффект с помощью старого доброго SVG. Вероятно, самое простое - использовать CSS в SVG. Например: 

<style>
  .overlay:hover
  {
    opacity: 0.5;
  }
</style>

<svg>
  <a xlink:href="http://www.wherever/you/want/to/link/to.com">
    <path class="overlay" d="Coordinates of your shape..." />
  </a>
</svg>

Я писал о различных других методах по адресу: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

3 голосов
/ 05 мая 2011

Да, это может быть сделано только с SVG, с или без javascript.

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

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

...