Question

我在foreignObject标记内有一个div，当将鼠标悬停在其上时，我想将其颜色更改为与六边形的填充颜色相同。将鼠标悬停在六边形上效果很好，但是当您将鼠标悬停在div上时，什么也不会发生。有什么想法吗？

.hex {
    stroke: red;
    stroke-width: 1px;
    fill: transparent;
}

.hex:hover {
    fill: blue;
}
#div1 {
    border: 1px solid green;
    text-align: center;
}
#div1:hover {
  fill: blue;
}

    <svg id="viewBox" viewBox="0 0 3000 1000"  width="3000" height="1000">
      <g>
      <use class="hex" xlink:href="#hexshape"/>
        <foreignObject id="h0" x="0" y="120" width="300">
          <div id="div1">div inside SVG.</div>
        </foreignObject>>

      </g>
      <defs>
        <polygon id="hexshape" width="300" height="260" points="300,130 225,260 75,260 0,130 75,0 225,0"></polygon>
      </defs>
    </svg>

jsfiddle： http://jsfiddle.net/0asLzwjv/28/

Answer 1

您的代码看起来很不错，除了两件事：

foreignObject未随height提供。因此，这就是在代码中未呈现div的原因。
div花费background-colour而不是fill。

我已根据上述更改更新了您的代码。

.hex {
  stroke: red;
  stroke-width: 1px;
  fill: transparent;
}

.hex:hover {
  fill: yellow;
}

#div1 {
  border: 1px solid green;
  text-align: center;
}

#div1:hover {
  background-color: #999;
}

<svg id="viewBox" viewBox="0 0 3000 1000" width="3000" height="1000">
      <g>
      <use class="hex" xlink:href="#hexshape"/>
        <foreignObject id="h0" x="0" y="120" width="300" height="300">
          <div id="div1">div inside SVG.</div>
        </foreignObject>>

      </g>
      <defs>
        <polygon id="hexshape" width="300" height="260" points="300,130 225,260 75,260 0,130 75,0 225,0"></polygon>
      </defs>
    </svg>

悬停状态不适用于异物

1 个答案: