SVG 按钮会影响外部 div 显示

Question

我正在尝试实现

http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG

满足我的需求

问题是我希望 Ive 创建的按钮在图形标签之外更改div 的样式。我找不到办法做到这一点。

我所需要的只是将鼠标悬停在 .my-1 按钮上，以显示 .y1div

这是到目前为止的代码。

<style type="text/css">
#burj-imagemap {
    overflow: hidden;
    padding-bottom: 75%;
    vertical-align: middle;
    width: 100%;
}
#burj-imagemap svg {
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0;
}
.my-1:hover {background:#fff; z-index:100; opacity:0.3; filter: alpha(opacity=30); border:1px solid #000;
}
.my-1 {cursor: pointer;}
.y1 {
    display: none;
}
.my-1:hover .y1 {
    display: block;
    background-color: #F00;
    height: 250px;
    width: 250px;
    z-index:1000;
}
</style>
<figure id="burj-imagemap">
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1200 808" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<image xlink:href="http://demosthenes.info/assets/images/burj-khalifa.jpg" height="808" width="1200">
</image>
<a class="my-1" >
<g>
    <defs>
        <polygon id="SVGID_1_" points="322,131 62,240 79,346 274,250 412,405 501,250"/>
    </defs>
    <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_"  overflow="visible"/>
    </clipPath>
    <g clip-path="url(#SVGID_2_)">
        <image overflow="visible" width="1200" height="808" xlink:href="http://demosthenes.info/assets/images/burj-khalifa.jpg"  transform="matrix(1 0 0 1 -33.5 -301)">
        </image>
    </g>
</g></a>
</svg>
</figure>
<div class="y1">Hi!</div>

有什么想法吗？

Answer 1

你可以在 svg 中包含这样的事件处理程序。

<g clip-path="url(#SVGID_2_)" onmouseover="document.getElementById('y1').style['display'] = 'inline';">
<div id="y1" class="y1">Hi!</div>

在这里摆弄 http://jsfiddle.net/9mDur/