SVG工具提示相对

时间:2018-01-23 14:35:48

标签: javascript svg tooltip

我正在尝试相对于它的父组定位工具提示,但它只是将它放在画布的0,0处。我需要工具提示做的是相对(旁边)你悬停的建筑物。我删除了JSFiddle并希望下面的内容足以解决我的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080">
            <g xmlns="http://www.w3.org/2000/svg" class="building">
                <foreignObject>
                        <body xmlns="http://www.w3.org/1999/xhtml">
                          <div class="tooltip">
                            Tooltip
                          </div>
                        </body>      
                 </foreignObject>
                <path fill="#ECB81E" d="M1227.998 685.388l29.813-17.207-.044-44.4-29.738 17.225z"/>
                <path fill="#D2D3D4" d="M1164.619 678.682l-4.93-2.809v14.525l4.93 2.808z"/>
                <path fill="#989898" d="M1169.551 690.398l-4.932 2.808v-14.524l4.932-2.809z"/>
                <path fill="#ECB81E" d="M1164.619 673.368l-4.93-2.808v9.332l4.93 2.808z"/>
                <path fill="#E29225" d="M1169.551 679.892l-4.932 2.808v-9.332l4.932-2.808z"/>
                <path fill="#BDBEC0" d="M1163.314 675.741l-1.739-.989v14.528l1.739.987z"/>
                <path fill="#5EA69A" d="M1169.002 679.166l-3.834 2.186v-7.26l3.834-2.184z"/>
                <path fill="#393E41" d="M1143.73 654.004l-2.404-1.368v36.948l2.404 1.393z"/>
                <path fill="#252728" d="M1146.134 689.609l-2.404 1.368V654.03l2.404-1.394z"/>
                <path fill="#E29225" d="M1227.998 685.388l-45.041-25.504.435-43.598 44.637 25.815z"/>
                <path fill="#5EA69A" d="M1225.594 679.407l-38.272-21.656.369-37.017 37.903 21.919z"/>
                <defs>
                  <path id="a" d="M1225.594 679.407l-38.272-21.656.369-37.017 37.903 21.919z"/>
                </defs>
                <clipPath id="b">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a" overflow="visible"/>
                </clipPath>
                <path clip-path="url(#b)" fill="#E7E7E7" d="M1226.519 636.442l-2.617-2.271-21.698 36.945 2.645 2.222zM1209.799 677.5l21.617-36.807-2.209-1.918-21.643 36.847z"/>
                <path fill="#E29225" d="M1213.452 639.438l-2.003-1.16v37.019l2.003 1.133z"/>
                <path fill="#393E41" d="M1203.321 658.414l-2.404-1.367v36.946l2.404 1.395z"/>
                <path fill="#252728" d="M1205.725 694.021l-2.404 1.367V658.44l2.404-1.393z"/>
                <path fill="#FFCE35" d="M1172.017 663.442v1.025l6.296 3.709v-7.269z"/>
                <path fill="#E0B232" d="M1184.608 664.534v-1.024l-6.295-2.604V668.176l.001.001z"/>
                <path fill="#FFF" d="M1172.017 663.442l6.296 3.707v-7.265z"/>
                <path fill="#D2D3D4" d="M1184.608 663.51l-6.295-3.628V667.149l.001.004z"/>
                <path fill="#393E41" d="M1178.322 634.563l-2.403-1.368v30.314l2.403 1.393z"/>
                <path fill="#252728" d="M1180.727 663.534l-2.405 1.368V634.59l2.405-1.395z"/>
                <path fill="#393E41" d="M1164.619 667.824l4.932 2.736-4.932 2.808-4.93-2.685z"/>
                <path fill="#ECB81E" d="M1169.002 679.166l-.481-.341v-6.642l.481-.275z"/>
                <path fill="#BDBEC0" d="M1168.521 678.825l-3.353 1.866v.661l3.834-2.186zM1169.002 651.879l1.421-.81v10.535l-1.421 1.418z"/>
                <path fill="#E7E7E7" d="M1165.202 649.684l1.419-1.419 3.802 2.804-1.421.81z"/>
                <path fill="#BDBEC0" d="M1161.575 689.28l.337-.168.032-14.201-.369-.159z"/>
                <path fill="#393E41" d="M1162.555 676.033s-1.381 1.506-1.381 2.354v1.407h.592v-1.407c0-.538.202-.75.789-1.502v-.852z"/>
                <path fill="none" stroke="#393E41" stroke-width=".1659" stroke-miterlimit="10" d="M1161.561 678.183l.539.459.165 1.152"/>
                <path fill="#5EA69A" d="M1161.174 679.668h1.271v1.95h-1.271z"/>
                <path fill="none" stroke="#393E41" stroke-width=".1659" stroke-miterlimit="10" d="M1161.766 679.274s.146-.068.146.222"/>
                <path fill="#393E41" d="M1162.063 688.178v-6.56h-.596v6.56c0 .753-1.131.753-1.131 0v-13.116c0-.772-.58-1.16-1.16-1.16s-1.161.388-1.161 1.16l1.137 13.116c.055.639.538.788.538.788l.052-.788h-.052l-1.08-13.116c0-.377.283-.565.566-.565s.565.188.565.565v13.116c0 1.548 2.322 1.548 2.322 0z"/>
                <path fill="#BDBEC0" d="M1161.912 689.112l1.402.735v.42l-1.739-.987z"/>
                <path fill="#D2D3D4" d="M1181.563 668.838l-4.93-2.809v14.528l4.93 2.807z"/>
                <path fill="#989898" d="M1186.494 680.557l-4.931 2.807v-14.526l4.931-2.809z"/>
                <path fill="#ECB81E" d="M1181.563 663.525l-4.93-2.807v9.332l4.93 2.807z"/>
                <path fill="#E29225" d="M1186.494 670.05l-4.931 2.807v-9.332l4.931-2.807z"/>
                <path fill="#BDBEC0" d="M1180.258 665.899l-1.739-.989v14.527l1.739.988z"/>
                <path fill="#5EA69A" d="M1185.947 669.324l-3.837 2.186v-7.261l3.837-2.184z"/>
                <path fill="#393E41" d="M1181.563 657.981l4.931 2.737-4.931 2.807-4.93-2.684z"/>
                <path fill="#BDBEC0" d="M1185.947 669.324l-.482-.342v-6.642l.482-.275z"/>
                <path fill="#BDBEC0" d="M1185.465 668.982l-3.355 1.868v.66l3.837-2.186zM1178.519 679.437l.337-.169.033-14.199-.37-.159z"/>
                <path fill="#393E41" d="M1179.5 666.189s-1.383 1.507-1.383 2.354v1.407h.592v-1.407c0-.537.202-.75.791-1.502v-.852z"/>
                <path fill="none" stroke="#393E41" stroke-width=".1659" stroke-miterlimit="10" d="M1178.505 668.34l.539.46.164 1.151"/>
                <path fill="#5EA69A" d="M1178.117 669.824h1.271v1.951h-1.271z"/>
                <path fill="none" stroke="#393E41" stroke-width=".1659" stroke-miterlimit="10" d="M1178.709 669.432s.147-.068.147.221"/>
                <path fill="#393E41" d="M1179.006 678.334v-6.559h-.595v6.559c0 .755-1.132.755-1.132 0v-13.115c0-.773-.58-1.16-1.159-1.16-.581 0-1.162.387-1.162 1.16l1.137 13.115c.055.64.538.789.538.789l.053-.789h-.053l-1.08-13.115c0-.378.283-.566.567-.566.282 0 .564.188.564.566h.001v13.115c.001 1.549 2.321 1.549 2.321 0z"/>
                <path fill="#BDBEC0" d="M1178.856 679.268l1.402.736v.421l-1.739-.988z"/>
                <path fill="#393E41" d="M1177.417 673.44l-2.402-1.368v36.949l2.402 1.393z"/>
                <path fill="#252728" d="M1179.82 709.047l-2.403 1.367v-36.947l2.403-1.395z"/>
                <path fill="#FFF" d="M1177.422 668.033l-42.717-24.797v5.452l42.717 24.795z"/>
                <path fill="#BDBEC0" d="M1261.172 625.104l-83.76 48.379v-5.451l83.76-48.803z"/>
                <path fill="#FFF" d="M1134.705 643.236l42.707 24.796 83.76-48.803-41.88-24.591z"/>
                <path fill="#D2D3D4" d="M1139.906 643.558l37.03 21.499 78.254-45.536-35.898-21.958z"/>
                <path fill="#BDBEC0" d="M1219.292 597.563v2.433l33.887 20.695 2.011-1.17z"/>
                <path fill="#E7E7E7" d="M1219.292 599.996l-76.765 45.084-2.621-1.522 79.386-45.995z"/>
              </g>

        </svg>

    <style>
    svg{
        max-width: 100%;
    }

    .building:hover .tooltip{
        opacity: 1;
        visibility: visible;
    }
    .tooltip{
        opacity: 0;
        visibility: hidden;
    }

    </style>
</body>
</html>

有人能指出我正确的方向吗?

由于

0 个答案:

没有答案