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

Question

我有一个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"/>
  <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

Answer 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选择器来将笔画应用到您想要的位置.这有点棘手,因为您可能希望将笔划应用于组,尽管实际上悬停的元素是组内的形状.

另一种方法是使用<g>元素上的事件mouseenter和mouseleave事件编写脚本.

Answer 2

这个问题的现有“指针事件”答案帮助我找到了这个解决方案：

<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）的网站主页的徽标。

Answer 3

我早在 2014 年就发布了这个问题。本质上我试图解决两个问题，如何使 svg 在 svg 的透明部分保留悬停效果（特别是在对象标记中使用 svg，这样我就可以轻松使用悬停效果），以​​及如何制作以便 svg 的各个方面可以用作独立链接。

我尝试了很多复杂的解决方案，最终找到了一个非常简单的解决第一个问题的方法。只需设置 a fill（任何颜色都可以，只要它没有设置为fill: none），然后设置fill-opacity: 0。这会保留指针单击事件，同时保持 svg 透明。事后看来，这是完全有道理的，但如果您使用的是预制的 svg，其中可能fill已设置为无（适当地如此），则可能会令人困惑。

下面是实际情况的示例：

<circle cx="100" cy="75" r="50" style="fill: green; fill-opacity: 0;" />

这将创建一个圆圈，该圆圈将保留任何指针事件（例如悬停），尽管是完全透明的。

我当时可能应该用这个解决方案发布一个答案，因为我认为这就是大多数发现这个问题的人可能正在寻找解决方案的问题。但当时我觉得答案还没有完成。我忘记了这个问题，以及我对第一个问题的解决方案。但我决定我应该重新审视这个问题并给出一些急需的结论。

自从我问这个问题以来，<a>svg 中的标签已收到更新，现在将链接应用到 svg 的各个部分非常简单。它的工作原理与您想象的完全一样：<a href="" target="_blank">...Your SVG element here</a>以前的情况并非如此（或者至少我以前不明白它是如何工作的）。第二个问题解决了！

这是一个代码沙箱，显示了解决方案的工作原理，在 svg 的上下文中进行了解释，嵌入了标签<object>：工作演示