【问题标题】：How to make transparent part of SVG clickable?如何使 SVG 的透明部分可点击？
【发布时间】：2014-04-20 12:45:47
【问题描述】：

我有一个使用 :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

【问题讨论】：

把 :hover 放在 svg 元素上？（除非我遗漏了什么）
对不起，我忘记在对象标签中添加它
活的例子，jsfiddle什么的？
设置高度和宽度。
用包装 div 包围它并将鼠标悬停在上面？

标签： html css svg transparency clickable

【解决方案1】：

SVG2 为“指针事件”添加了一个新关键字 bounding-box 以简化此操作。它适用于组以及形状，在您的示例中它将变为：

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

见jsfiddle。现在应该可以在 Chrome Canary 或 Opera Dev 构建中使用。

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

另一种选择是在元素上使用 mouseenter 和 mouseleave 事件编写脚本。

【讨论】：

【解决方案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)。

【讨论】：

【解决方案3】：

您可以在测试<g> 中包含 pointer-events="visible" 以及该函数位于父 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> 的 src 进行了测试，并将其放在链接中。这行得通，在所有浏览器中都是可点击的。无需添加指针事件或函数调用。因此，您可以使用 img 而不是 object。

【讨论】：

这确实使内部可点击，但它是否适用于我希望可点击的任何区域？这也可以通过向“狼”元素添加透明填充来实现。我需要这是一个链接，但如何实现，将其包装在标记中不起作用。

【解决方案4】：

如果你想要一个有效的 html 文档。如果您打算将 svg 元素转换为链接，请在 svg 元素周围加上锚标记。

也不要忘记将链接变成块或内联块元素。（这取决于你的需要）

【讨论】：

我的 SVG 已经链接到一个对象标签内。我不想更改它，否则我将不得不为 SVG 使用内联 CSS。现在 SVG 通过外部样式表连接到 CSS。
嗯，然后我邀请您将您的 svg 转换为字体。这似乎比你想做的更有效。检查fortawesome.github.io/Font-Awesome 以供参考，检查fontastic.me 以创建您自己的。创建您自己的 svg 库，并以模块化方式在您的网站中反复使用它。
这是一个很好的解决方案，但无论如何我都想知道如何做到这一点。

【解决方案5】：

您可以通过使用过滤器来进行破解。滤镜效果可以将填充更改为透明而不更改其可点击性。下面，您向图形添加半透明填充，然后使用过滤器将其移除。

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

【讨论】：

如果你有一个透明的填充，这有什么关系呢？

【解决方案6】：

编辑： svg:hover .test { stroke: #555555}

忽略先前的答案（如下）它正在解决不同的问题。

创建一个空的透明对象 - 即 <rect>，这是 <svg> 的大小和形状，并将其放在 </a></svg> 之前（不要换行！）。

【讨论】：