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(); 

Btw内円にカーソルポインタがありますが、ポリゴンをクリックしたときにのみ機能します。それは直感的なデザインではありません。

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>

！