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

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

SVG2为'pointer-events'添加了一个新的关键字bounding-box，以使此操作更容易。它既适用于组也适用于形状，在你的例子中，它将变成:

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

看到jsfiddle。现在应该可以在Chrome金丝雀或Opera Dev版本中工作。

这取决于形状，但它也可能在当前发布的浏览器中工作。例如，在最大的形状上使用pointer-events="all"，然后创造性地使用CSS选择器来应用你想要的笔画。这有点棘手，因为你可能希望描边应用到组中，尽管实际悬浮的元素是组内的形状。

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

现有的"指针事件"的答案帮助我得到了这个解决方案:

<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标签内，如果你有透明的区域，你想要点击，例如一个图标或(如上所述)一个logo，链接到一个网站的主页嵌入链接(定义为xlink:href)。

您可以在测试<g>和函数调用中包含pointer-events="visible"，其中函数位于父HTML中(此在IE/CH/FF中测试OK)，例如

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

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

我尝试了许多复杂的解决方案，最终找到了第一个问题的一个非常简单的解决方案。简单地设置一个fill(任何颜色都可以，只要不设置为fill: none)，并设置fill-opacity: 0。这保留了指针单击事件，同时保持svg透明。事后看来，这很有意义，但如果您使用的是预先制作的svg，其中fill可能已设置为none(适当地设置为none)，则可能会令人困惑。

下面是一个实际的例子:

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

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

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

既然我问了这个问题，svg中的<a>标签已经收到了更新，现在很容易将链接应用到svg的各个部分。它的工作原理完全像你想象的那样:<a href="" target="_blank">...Your SVG element here</a>，这不是以前的情况(或者至少我不明白它以前是如何工作的)。第二个问题解决了!

下面是一个代码沙箱，它显示了解决方案的工作，在svg的上下文中进行了解释，嵌入了<object>标记:working Demo

如果您最终想要一个有效的html文档。如果您计划将svg元素转换为链接，则用锚标记将其包围。

也不要忘记把链接变成一个块或内联块元素。(这取决于你的需要)

你可以通过使用过滤器来做一个hack。滤镜效果可以改变填充透明而不改变其可点击性。下面，你为你的图形添加了一个半透明的填充，但然后使用滤镜将其删除。

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

Edit:svg:hover .test { stroke: #555555}

忽略前面的答案(下面)，它是解决不同的问题。

创建一个空的透明对象-即<rect>，其大小和形状与<svg>相同，并将其放置在</a></svg>之前(不要换行!)

相关内容

最新更新

热门标签：