如何使SVG的透明部分可点击？

我有一个SVG使用:悬停改变颜色.它只适用于我将鼠标悬停在SVG的实体部分上,而不是透明部分.我想知道如何让SVG与鼠标悬停在整个SVG上的任何地方进行交互.这一点的目的是使SVG成为链接,并且链接只能在SVG的某些部分上单击.我不仅想要一个解决这个特定实例的解决方案,而是一个适用于许多实例的解决方案(如果我想要SVG的不同部分可点击.)我的SVG中的元素直接连接到CSS并与<g>标签分组对可点击元素进行分组.

编辑:SVG位于对象标记中

SVG

<?xml-stylesheet type="text/css" href="svg.css" ?>
<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 class="test">
  <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"/> …

Run Code Online (Sandbox Code Playgroud)

html css svg transparency clickable

use*_*179

2014 03-17

14
推荐指数

3
解决办法

8997
查看次数