SVG 中悬停时的平滑工具提示

问题描述 投票:0回答:0

我有一个 SVG,我想在悬停时显示工具提示。该功能正在运行(使用鼠标悬停、鼠标移出),但是悬停状态有点不稳定。光标设置为“a”标签上的指针,但在某些悬停点处,样式被删除,导致它有点跳动。 'g' 是否以某种方式覆盖了它?

SVG:

<g id="_x32_5" title="Violet Hill Park">
                                <title>Violet Hill Park</title>


                                <use xlink:href="#PARKS" id="Violet Hill Park" width="33.6" height="33.6" x="-16.8" y="-16.8" transform="matrix(1 0 0 -1 1589.7333 471.4247)" style="overflow:visible;" title="Violet Hill Park"/>
                                <g class="pointer-off">
                                    <rect x="1579.64" y="464" class="st5" width="31.68" height="16.48" />
                                    <path class="st6" d="M1580.29,477.19c0.01-0.9,0.18-1.73,0.49-2.48c0.32-0.75,0.69-1.41,1.13-1.98s1-1.21,1.68-1.93
                c0.72-0.76,1.25-1.39,1.59-1.88c0.34-0.49,0.5-1,0.5-1.52c0-1.04-0.38-1.56-1.14-1.56c-0.38,0-0.69,0.15-0.92,0.46
                s-0.35,0.68-0.35,1.12c0,0.06-0.03,0.09-0.09,0.09l-2.77-0.65c-0.06-0.03-0.09-0.06-0.09-0.1c0-0.7,0.21-1.28,0.63-1.75
                c0.42-0.47,0.95-0.81,1.6-1.03c0.65-0.22,1.32-0.32,2.01-0.32c1.23,0,2.24,0.29,3.05,0.88s1.21,1.54,1.21,2.84
                c0,0.62-0.12,1.21-0.37,1.76s-0.55,1.05-0.91,1.49c-0.36,0.44-0.85,0.99-1.45,1.63c-0.52,0.54-0.94,1-1.25,1.38
                c-0.32,0.37-0.6,0.76-0.84,1.17h4.71c0.08,0,0.11,0.04,0.11,0.11v2.24c0,0.08-0.04,0.11-0.11,0.11h-8.28
                C1580.33,477.3,1580.29,477.26,1580.29,477.19z"/>
                                    <path class="st6" d="M1590.62,474.56c0-0.08,0.03-0.12,0.1-0.13l2.79-0.63c0.06,0,0.09,0.03,0.09,0.08
                c0.01,1.05,0.43,1.58,1.25,1.58c0.38,0,0.67-0.12,0.86-0.35s0.29-0.64,0.29-1.21v-1.65c0-0.57-0.1-0.97-0.29-1.21
                s-0.48-0.35-0.86-0.35c-0.29,0-0.53,0.07-0.7,0.21c-0.18,0.14-0.3,0.37-0.38,0.7c-0.01,0.05-0.04,0.08-0.09,0.08l-2.98-0.68
                c-0.06-0.01-0.09-0.06-0.09-0.13l0.47-6.74c0-0.08,0.04-0.11,0.13-0.11h7.12c0.08,0,0.11,0.04,0.11,0.11v1.94
                c0,0.08-0.04,0.11-0.11,0.11h-4.33l-0.15,2.96c0.52-0.3,1.15-0.46,1.88-0.46c1.05,0,1.88,0.26,2.49,0.79
                c0.61,0.53,0.91,1.35,0.91,2.46v1.98c0,1.33-0.39,2.28-1.16,2.86c-0.77,0.58-1.81,0.86-3.12,0.86
                C1592.29,477.62,1590.88,476.6,1590.62,474.56z"/>
                                </g>
                            </g>

CSS:

#tooltip2 {
    background-color: white;
    color: $dark_blue;
    padding: 8px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    top: 0;
    left: 0;
  }

  #mainImage switch g{
    cursor: pointer;
  }
  #mainImage switch .pointer-off{
    pointer-events:none;
  }
html css svg hover onmouseover
© www.soinside.com 2019 - 2024. All rights reserved.