SVG悬停

Question

SVG新手。 我使用Illustrator创建了一个SVG形状，并在该剃刮中插入了一个图像标签。在svg标记之后，添加了一些html，默认情况下隐藏，并在用户将鼠标悬停在svg上时显示。 但这样做，我面临图像/颜色闪烁。尝试将鼠标悬停在SVG上。

并建议一些更好的方法来实现这一目标。

.svg-parent {
  position: relative;
}
.svg-parent svg {
  position: relative;
  z-index: 5;
}
.svg-parent svg:hover + .svg-child {
  display: block;
}
.svg-parent path:hover {
  fill: #fff802;
}
.svg-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: none;
  color: #fff;
}

<div class="svg-parent">
  <svg x="0px" y="0px" viewBox="0 0 302 395" xml:space="preserve" width="302" height="395">
    <defs>
      <pattern id="america" patternUnits="userSpaceOnUse" width="302" height="395">
        <image xlink:href="http://i.stack.imgur.com/LNQ3H.png" width="100%" height="100%" x="0" y="0" />
      </pattern>
    </defs>
    <g>
      <path d="M0,0h302l-1,330L0,395V0z" fill="url(#america)" />
    </g>
  </svg>
  <div class="svg-child">This text and image flicker, when you move your mouse cursor around this svg shape</div>
</div>

Answer 1

您的svg-child与svg重叠。它以z-index堆叠在图像上方，而其显示完全取决于悬停在svg上方。这就是您的鼠标事件在状态之间切换的原因。

当指针第一次进入元素时，悬停会触发显示和路径填充。但是当你移动时，它不再指向svg，而是指向svg-child，因为它位于z-index之上。这种情况会多次发生，从而导致闪烁。

剪辑路径方法：对于浏览器支持，请检查Caniuse = css-clip-path

＆＃13;

＆＃13;

.svg-parent {
  position: relative;
  display: inline-block;
 -webkit-clip-path: url(#clip);
  clip-path: url(#clip);
}

.svg-child {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.svg-child a {
  visibility: hidden;
}

.svg-child:hover a {
  visibility: visible;
}

.svg-child:hover + svg path {
  fill: #fff802;
}

＆＃13;

<div class="svg-parent">
  <div class="svg-child">
    <a href>Your Link</a>
  </div>
  <svg x="0px" y="0px" viewBox="0 0 302 395" xml:space="preserve" width="302" height="395">
    <defs>
      <pattern id="america" patternUnits="userSpaceOnUse" width="302" height="395">
        <image xlink:href="http://i.stack.imgur.com/LNQ3H.png" width="100%" height="100%" x="0" y="0" />
      </pattern>
    </defs>
    <g>
      <path d="M0,0h302l-1,330L0,395V0z" fill="url(#america)" />
    </g>
    <defs>
      <clipPath id="clip">
        <path d="M0,0h302l-1,330L0,395V0z"/>
      </clipPath>
    </defs>
  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;

您也可以这样使用SVG Anchor Element <a>在svg上添加链接。

<a xlink:href="https://www.example.org"
 target="_blank">
  <path d="M0,0h302l-1,330L0,395V0z" fill="url(#america)" />      
  <text x="20" y="20">Click On This SVG</text>
</a>

这是一个有效的例子。 JSFiddle

添加CSS以根据需要定位链接文本。