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, чтобы нанести обводку там, где вы хотите. Это немного сложно, поскольку вы, вероятно, хотите, чтобы обводка применялась к группе, хотя на самом деле зависший элемент — это фигура внутри группы.

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

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

<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).

Вы можете включить pointer-events="visible" в тест <g> и вызов функции, где функция находится в родительском HTML (это проверено в 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>

РЕДАКТИРОВАТЬ - Добавлено.

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

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

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

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

.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.

Изменить: svg:hover .test { stroke: #555555}

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

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