如何在點擊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>

希望這有助於！