Ответ 1

SVG2 добавляет новое ключевое слово bounding-box в 'pointer-events', чтобы сделать это проще. Это относится как к группам, так и к формам, в вашем примере это будет выглядеть:

.test {
  pointer-events: bounding-box;
  stroke: #5ff6ff;
}
.test:hover {
  stroke: #555555;
}

См. jsfiddle. Прямо сейчас, что должно работать в сборниках Chrome Canary или Opera Dev.

Это зависит от форм, но можно заставить его работать и в браузерах, которые в настоящее время отправляются. Например, используя pointer-events="all" в самой большой форме, а затем с помощью CSS-селекторов творчески, чтобы получить штрих, применяемый там, где вы хотите. Это немного сложно, так как вы, вероятно, хотите, чтобы штрих применился к группе, хотя фактически зависающий элемент является формой внутри группы.

Другой альтернативой является script, используя mouseenter и mouseleave события в элементе <g> .

Ответ 2

Вы можете включить pointer-events = "visible" в test <g> и вызов функции, где функция находится в родительском HTML (это проверено OK в IE/CH/FF), например

<svg xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg3036" version="1.1" inkscape:version="0.48.2 r9819" width="58" height="58">
         <g pointer-events="visible" onclick="parent.testHover()" class="test" fill="none" stroke="black" stroke-width="2">
  <path d="M 8.1 32.8 C 7.1 30.1 0.3 -4.6 11.1 4.9 21.9 14.5 15.9 12.8 29 12.8 42.1 12.9 36.1 14.6 46.9 5.1 57.7 -4.5 50.9 30.3 49.9 32.9 48.9 35.6 37.6 54.8 29 54.7 20.4 54.6 9.1 35.4 8.1 32.8 z" id="path3119" inkscape:connector-curvature="0" sodipodi:nodetypes="zzzzzzz" class="wolf"/>
  <path d="M 31.5 23.3 46.6 21" id="path5212" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="eyes"/>
  <path d="M 33 23 C 32.3 33.9 45 22 45.2 21" id="path5260" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="eyes"/>
  <path sodipodi:nodetypes="cc" inkscape:connector-curvature="0" id="path5262" d="M 26.5 23.3 11.4 21" class="eyes"/>
  <path sodipodi:nodetypes="cc" inkscape:connector-curvature="0" id="path5264" d="M 25 23 C 25.7 33.9 13 22 12.8 21" class="eyes"/>
  </g>
</svg>

EDIT - добавлено.

Я тестировал ваш svg как src для <img>, а не <object> и поместил его в ссылку. Это работает, доступно во всех браузерах. Нет необходимости добавлять указатели-события или вызов функции. Поэтому вы можете использовать img, а не объект.

Ответ 3

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

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

Ответ 4

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

.wolf{
    fill:   blue;
     fill-opacity:  0.09;
    stroke-width:   3.672px;
    stroke-linejoin:    round;
} /*.wolf:hover {
    stroke: #777777;
}*/

.eyes{
    fill:   none;
    fill-opacity: 0;
    stroke-width:   1.26708329px;
}

    <defs>
        <filter id="greenscreen">
        <feComponentTransfer>
            <feFuncA type="table" tableValues="0 0 .2 .3 .4 .5 .6 .7 .8 .9 1"/>
        </feComponentTransfer>
    </filter>
    </defs>
  <g class="test" filter="url(#greenscreen)">

etc.

Ответ 5

Edit: svg:hover .test { stroke: #555555}

Игнорировать предыдущий ответ (см. ниже), он затрагивал другую проблему.

Создайте пустой прозрачный объект, т.е. <rect>, размер и форму <svg> и поместите его непосредственно перед </a></svg> (не оберните!).

Ответ 6

Существующие ответы "указатель событий" на этот вопрос помогли мне найти решение:

<svg id="example" pointer-events="bounding-box" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 300">

pointer-events="bounding-box" лучше всего размещать в теге SVG, если у вас есть прозрачные области, на которые вы хотите нажимать, например, со значком или (как указано выше) логотипом, который ссылается на домашнюю страницу веб-сайта со встроенной ссылкой ( определяется как xlink: href).