Question

我想在svg地图中添加轻松进出悬停效果。我通过路径的笔画宽度创建悬停。这有可能吗？任何其他建议在svg地图中使用缓动创建此类悬停是值得欢迎的。谢谢！

<!DOCTYPE html>
<html>
<head xmlns="http://www.w3.org/1999/xlink">
<meta charset="UTF-8">
<title>SVG Hover</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" height="56mm" width="56mm" version="1.1" viewBox="0 0 200  200">
<g id="layer1" transform="translate(-277.14 -332.36)">
    <rect id="rect3336" height="200" width="200" y="332.36" x="277.14" fill="#cecece"/>
    <circle id="path4138" cx="380" cy="430" r="15"
        onmouseover="this.style.stroke = '#3f27dd'; this.style['stroke-width'] = 50; this.style['stroke-opacity'] = 0.7;"
        onmouseout="this.style.stroke = '#3f27dd'; this.style['stroke-width'] = 0;"/>
</g>
</body>
</html>

Answer 1

我不知道如何使用JavaScript，但我能够用CSS做到这一点。编辑：我知道但CSS看起来更干净。

JSfiddle

这是我的代码：

OnResume()

和CSS：

<body>
  <svg xmlns="http://www.w3.org/2000/svg" height="56mm" width="56mm" version="1.1" viewBox="0 0 200  200">
  <g id="layer1" transform="translate(-277.14 -332.36)">
    <rect id="rect3336" height="200" width="200" y="332.36" x="277.14" fill="#cecece"/>
    <circle id="path4138" cx="380" cy="430" r="15"
        />
  </g>

在SVG悬停笔划宽度中添加缓入和缓出

1 个答案: