我有一个使用:hover更改颜色的SVG。仅当我将鼠标悬停在SVG的固定部分而不是透明部分上时,它才起作用。我想知道如何使SVG与鼠标悬停在整个SVG上的任意位置进行交互。这样做的目的是使SVG成为链接,并且该链接只能在SVG的某些部分上单击。我不仅想要针对该特定实例的解决方案,而且想要一种适用于许多实例的解决方案(如果我希望SVG的不同部分都可单击。)我的SVG中的元素直接连接到CSS并用标签分组对可点击元素进行分组。

编辑: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"/>
  <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>

的CSS
.wolf{
    fill:   none;
    fill-opacity:   0;
    stroke-width:   3.672px;
    stroke-linejoin:    round;
} /*.wolf:hover {
    stroke: #777777;
}*/

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

.test {
    stroke: #5ff6ff;
} .test:hover {
    stroke: #555555;
}

JSfiddle

最佳答案

SVG2在'pointer-events'中添加了一个新的关键字 bounding-box 来简化此操作。它适用于组以及形状,在您的示例中将变为:

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

参见jsfiddle。现在,它应该可以在Chrome Canary或Opera Dev版本中使用。

它取决于形状,但是也可以使它在当前发布的浏览器中运行。例如,通过在最大形状上使用pointer-events="all",然后创造性地使用CSS选择器,将笔触应用于所需的位置。这有点棘手,因为您可能希望将笔触应用于组,尽管实际上悬停的元素是组内的形状。

另一种选择是使用元素上的mouseentermouseleave事件编写脚本。

07-24 09:50
查看更多