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

在我看来，你从未指定过显示工具提示;）

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>

希望这有帮助！

Answer 2

只需将以下内容添加到旋转svg的事件侦听器即可。其余的只是css。

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

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

Answer 3

单独过渡不会成功，因为在完成之后你无法做任何事情。

相反，现在是学习CSS动画的好时机。

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

＆＃13;

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');
  }
});

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

单击SVG后如何显示工具提示？

3 个答案: