如何在点击SVG后显示工具提示？

Question

我有一个SVG圆，它内部有一个小的svg圆，小圆内有一个多边形，当我点击它应该旋转的多边形时，它的工作正常，但旋转后，工具提示应该出现在多边形的上方我不知道如何表达，我把它放在我上面的SVG一个div，这里是我的代码：

document.querySelector('polygon').addEventListener('click', function() { 
 
    this.classList.toggle('rotated'); 
 
});

.rotated { 
 
    transform: rotate(-90deg); 
 
} 
 
polygon { 
 
    transition: all 1s; 
 
}

<div class="marker marker-index-0" style="display: none;"> 
 
    <h3>I should be a tooltip</h3> 
 
    </div> 
 
<svg> 
 
<circle cx="40" cy="122.5" r="26" fill="red"></circle> 
 
<g class="markerG" transform="matrix(1,0,0,1,40,122.5)"><circle cx="0" cy="0" r="14" fill="#000000" style="cursor: pointer;"></circle><polygon points="1 -1 1 -7 -1 -7 -1 -1 -7 -1 -7 1 -1 1 -1 7 1 7 1 1 7 1 7 -1" fill="#ffffff"></polygon></g> 
 
</svg>

Answer 1

单独的转换不会这样做，因为完成后您无法执行任何操作。

相反，它将是您学习CSS动画的好时机。

请注意，我将这些类应用于包含多边形和工具提示的容器，以避免同步错误。

document.querySelector('polygon').addEventListener('click', function() { 
 
    if(!document.getElementById('animationContainer').classList.contains("animated")) { 
 
    document.getElementById('animationContainer').classList.add("animated"); 
 
document.getElementById('animationContainer').classList.add("rotated"); 
 
    } else { 
 
    document.getElementById('animationContainer').classList.toggle('rotated'); 
 
    document.getElementById('animationContainer').classList.toggle('faded'); 
 
    } 
 
});

@keyframes polygonAnimation { 
 
0% { transform: rotate(0deg); } 
 
50% { transform: rotate(-90deg); } 
 
100% { transform: rotate(-90deg); } 
 
} 
 
@keyframes polygonReverseAnimation { 
 
0% { transform: rotate(-90deg); } 
 
50% { transform: rotate(0deg); } 
 
100% { transform: rotate(0deg); } 
 
} 
 
@keyframes markerAnimation { 
 
0% { display: none; opacity: 0; } 
 
50% { display: block; opacity: 0; } 
 
100% { display: block; opacity: 1; } 
 
} 
 
@keyframes markerReverseAnimation { 
 
0% { display: block; opacity: 1; } 
 
50% { display: block; opacity: 0; } 
 
100% { display: none; opacity: 0; } 
 
} 
 
#animationContainer .marker { 
 
    opacity: 0; 
 
    position: absolute; 
 
    z-index: 10; 
 
} 
 
.rotated polygon { 
 
    animation-name: polygonAnimation; 
 
    animation-duration: 2s; 
 
    animation-fill-mode: both; 
 
} 
 
.rotated .marker { 
 
    animation-name: markerAnimation; 
 
    animation-duration: 2s; 
 
    animation-fill-mode: both; 
 
} 
 
.faded polygon { 
 
    animation-name: polygonReverseAnimation; 
 
    animation-duration: 2s; 
 
    animation-fill-mode: both; 
 
} 
 
.faded .marker { 
 
    animation-name: markerReverseAnimation; 
 
    animation-duration: 2s; 
 
    animation-fill-mode: both; 
 
}

<div id="animationContainer"> 
 
<div class="marker marker-index-0"> 
 
    <h3>I should be a tooltip</h3> 
 
</div> 
 
<svg> 
 
<circle cx="40" cy="122.5" r="26" fill="red"></circle> 
 
<g class="markerG" transform="matrix(1,0,0,1,40,122.5)"><circle cx="0" cy="0" r="14" fill="#000000" style="cursor: pointer;"></circle><polygon points="1 -1 1 -7 -1 -7 -1 -1 -7 -1 -7 1 -1 1 -1 7 1 7 1 1 7 1 7 -1" fill="#ffffff"></polygon></g> 
 
</svg> 
 
</div>

Answer 2

就以下内容添加到您的事件侦听器的旋转SVG。其余的只是CSS。

$('.marker-index-0').show(); 

顺便说一句，你有光标指针在内圈，但它只适用于点击多边形。这不是直观的设计。

Answer 3

在我看来就像你从来没有指定显示工具提示;）

document.querySelector('svg').addEventListener('click', function() { 
 
    document.querySelector('polygon').classList.toggle('rotated'); 
 
    document.getElementById('marker').classList.toggle('show'); 
 
});

.rotated { 
 
    transform: rotate(-90deg); 
 
} 
 
polygon { 
 
    transition: all 1s; 
 
} 
 
.show { 
 
    display: block !important; 
 
}

<div class="marker marker-index-0" id="marker" style="display: none;"> 
 
    <h3>I should be a tooltip</h3> 
 
    </div> 
 
<svg> 
 
<circle cx="40" cy="122.5" r="26" fill="red"></circle> 
 
<g class="markerG" transform="matrix(1,0,0,1,40,122.5)"><circle cx="0" cy="0" r="14" fill="#000000" style="cursor: pointer;"></circle><polygon points="1 -1 1 -7 -1 -7 -1 -1 -7 -1 -7 1 -1 1 -1 7 1 7 1 1 7 1 7 -1" fill="#ffffff"></polygon></g> 
 
</svg>

希望这有助于！