SVG

Question

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

编辑：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为'pointer-events'添加了一个新的关键字bounding-box，以简化这一过程。它适用于组和形状，在您的示例中它将变为：

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

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

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

另一种方法是使用＆lt; g＆gt;上的mouseenter和mouseleave事件对其进行编写脚本。元件。

Answer 2

你可以在测试<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。

Answer 3

该问题的现有“指针事件”答案帮助我获得了以下解决方案：

const Doc = ({ doc }) => (
<li>
    <p>{doc.id} - {doc.documentCode} - {doc.documentName} - {doc.issuedDate}</p>
    <a onClick={this.deleteHandle(doc.id)}>Delete</a>
</li>);export default Doc;

如果您有想要单击的透明区域，则<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">最好放在SVG标签内，例如，带有图标或（如上）徽标的链接到带有嵌入式链接的网站首页（已定义）作为xlink：href）。

Answer 4

如果你想要一个有效的HTML文档。如果您打算将其转换为链接，请使用锚标记环绕svg元素。

另外，不要忘记将链接转换为块或内联块元素。（这取决于您的需求）

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

Answer 6

修改 svg:hover .test { stroke: #555555}

忽略之前的答案（如下），它正在解决另一个问题。

创建一个空的透明对象 - 即<rect>，其大小和形状与<svg>相同，并将其放在</a></svg>之前（不要...包裹！）。

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

SVG

CSS

6 个答案: