Question

我使用SVG画了一颗星，我希望在多个点上有不同的悬停效果，例如在星的每个点上。

我使用普通的CSS做了一个基本的悬停效果，但显然当你将鼠标悬停在我想要的整个元素上时它会起作用。

这是我的html和css：

<svg height="210" width="200" class="test">
  <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
  Sorry, your browser does not support inline SVG.
</svg>

.test:hover { background: red; }

小提琴： http://jsfiddle.net/WhhAg/

Answer 1

你必须使用多个多边形来制作星星，每个多边形都有自己的悬停状态。

以下是Codepen

的简单示例

<强> HTML

<div class="svg-wrap">
  <svg viewBox="0 0 600 400"
       xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g>
      <polygon class="line-1 point" points="350,75  379,161 321,161" />
      <polygon class="line-2 point" points="379,161 469,161 397,215" />
      <polygon class="line-3 point" points="397,215 423,301 350,250" />
      <polygon class="line-4 point" points="350,250 277,301 303,215" />
      <polygon class="line-5 point" points="303,215 231,161 321,161" />

      <polygon class="line-6 center" points="321,161 379,161 397,215 350,250 303,215" />      
    </g>
  </svg>
</div>

<强> CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.svg-wrap {
  border:1px solid grey;
  margin: 10px auto 0;
  width:600px;
}

svg {
  width:600px;
  height:400px;
  fill: red;
  stroke:blue;
  stroke-width:1;
}

.line-1 {
  fill: green;
}

.line-2 {
  fill:blue;
}

.line-3 {
  fill:pink;
}

.line-4 {
  fill:orange;
}

.line-5 {
  fill:lime;
}

.line-6 {
  fill:lightblue;
}

.point:hover,
.center:hover {
  fill:red;
}

SVG上有多个悬停点

1 个答案: