Question

我试图在每次鼠标与动画svg碰撞时显示一些文本，当鼠标不在svg上时我不希望文本显示，如果有人可以帮助我，我做了一个codepen。谢谢：） https://codepen.io/o-sewell/pen/mBOPzR

var svg = document.getElementById('svg');
var fly = document.getElementById('fly');
var text = document.getElementById('text');



var angleX = 0;
var angleY = 0;
var range = 100;
var xspeed = 0.06;
var yspeed = 0.08;

var transY = 0;
var transX = 0;

var flyPos;

function drawFrame() {
 window.requestAnimationFrame(drawFrame);
 transX = Math.sin(angleX) * range;
 transY = Math.sin(angleY) * range;
 fly.style.transform = `translate3d(${transX}px,${transY}px,0)`
 angleX += xspeed;
 angleY += yspeed;
 flyPos = fly.getBoundingClientRect();
}


 fly.addEventListener('mousemove', function(e) {

  var x = e.offsetX;
  var y = e.offsetY;

 /* if the mouse x position collides with the fly i want to display the 
 message */
  if (x > flyPos.left && x < flyPos.right || y > flyPos.top && y < 
   flyPos.bottom) {

    text.style.display = "block";
    } else {
    text.style.display = "none";
    }
 });


window.requestAnimationFrame(drawFrame);

Answer 1

在mousemove处理程序中记录鼠标位置更改。然后将碰撞测试移至drawFrame()函数，以便每次飞行时都会对其进行测试。

var mouseX = 0;
var mouseY = 0;

function drawFrame() {
  window.requestAnimationFrame(drawFrame);
  ...

  /* if the mouse x position collides with the fly i want to display the message */
  flyPos = fly.getBoundingClientRect();
  if (mouseX > flyPos.left && mouseX < flyPos.right && mouseY > flyPos.top && mouseY < flyPos.bottom) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

...

svgContainer.addEventListener('mousemove', function(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

＆＃13;

var svg = document.getElementById('svg');
var fly = document.getElementById('fly');
var text = document.getElementById('text');
var svgContainer = document.getElementById('svg-container');



var angleX = 0;
var angleY = 0;
var range = 100;
var xspeed = 0.06;
var yspeed = 0.08;

var transY = 0;
var transX = 0;

var flyPos;
var mouseX = 0;
var mouseY = 0;

function drawFrame() {
  window.requestAnimationFrame(drawFrame);
  transX = Math.sin(angleX) * range;
  transY = Math.sin(angleY) * range;
  fly.style.transform = `translate3d(${transX}px,${transY}px,0)`
  angleX += xspeed;
  angleY += yspeed;

  /* if the mouse x position collides with the fly i want to display the message */
  flyPos = fly.getBoundingClientRect();
  if (mouseX > flyPos.left && mouseX < flyPos.right && mouseY > flyPos.top && mouseY < flyPos.bottom) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}


window.requestAnimationFrame(drawFrame);

svgContainer.addEventListener('mousemove', function(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

＆＃13;

body {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 cursor:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTAiIGhlaWdodD0iMTEwIiB2aWV3Qm94PSIwIDAgMTA0LjM4IDE3MS4yMyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtpc29sYXRpb246aXNvbGF0ZTt9LmNscy0yLC5jbHMtMywuY2xzLTR7ZmlsbDpub25lO30uY2xzLTIsLmNscy00LC5jbHMtNXtzdHJva2U6IzA3OGVhZDt9LmNscy0yLC5jbHMtMywuY2xzLTQsLmNscy01e3N0cm9rZS1taXRlcmxpbWl0OjEwO30uY2xzLTJ7c3Ryb2tlLXdpZHRoOjAuNzVweDt9LmNscy0ze3N0cm9rZTojMDAwO30uY2xzLTQsLmNscy01e3N0cm9rZS13aWR0aDowLjVweDt9LmNscy01e2ZpbGw6IzA1N2ZhMDt9LmNscy02e2ZpbGw6IzA2MGY3YztvcGFjaXR5OjAuMzk7bWl4LWJsZW5kLW1vZGU6bXVsdGlwbHk7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5mbHlzd2F0PC90aXRsZT48ZyBjbGFzcz0iY2xzLTEiPjxnIGlkPSJ0b3AiPjxyZWN0IGNsYXNzPSJjbHMtMiIgeD0iMTg1LjUiIHk9IjMyLjUiIHdpZHRoPSI2MCIgaGVpZ2h0PSI3MiIgcng9IjEyIiByeT0iMTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xODQuNTQgNzUuMjkpIHJvdGF0ZSgtMjYuMTQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMjQxLjQ0LDk1Ljg3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTc2LjQgLTI2LjY2KSIvPjxwb2x5bGluZSBjbGFzcz0iY2xzLTQiIHBvaW50cz0iMzIuNTkgODMuMjYgMS4zMSAyMy42MyA0OS45OSAxLjYzIi8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iNC4zMSIgeTE9IjE5LjYzIiB4Mj0iMzYuNiIgeTI9IjgzLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iOC4zMSIgeTE9IjE3LjYzIiB4Mj0iNDAuNiIgeTI9IjgxLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTIuMzEiIHkxPSIxNS42MyIgeDI9IjQ0LjYiIHkyPSI3OS4zNCIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjE2LjMxIiB5MT0iMTMuNjMiIHgyPSI0OC42IiB5Mj0iNzcuMzQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIyMC4zMSIgeTE9IjExLjYzIiB4Mj0iNTIuNiIgeTI9Ijc1LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjMuMzEiIHkxPSI5LjYzIiB4Mj0iNTUuNiIgeTI9IjczLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjcuMzEiIHkxPSI3LjYzIiB4Mj0iNTkuNiIgeTI9IjcxLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMzEuMzEiIHkxPSI1LjYzIiB4Mj0iNjMuNiIgeTI9IjY5LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMzUuMzEiIHkxPSIzLjYzIiB4Mj0iNjcuNiIgeTI9IjY3LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMzkuMzEiIHkxPSIxLjYzIiB4Mj0iNzEuNiIgeTI9IjY1LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iNDMuNiIgeTE9IjAuMzQiIHgyPSI3NS42IiB5Mj0iNjIuMzQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI3Ny41MyIgeTE9IjU3LjM0IiB4Mj0iNDguNiIgeTI9IjEuMzQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIwLjM5IiB5MT0iMjguNjgiIHgyPSI1My42OSIgeTI9IjQuNDQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIyOS44NyIgeTE9IjgyLjczIiB4Mj0iNzcuNiIgeTI9IjU5LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjUuNjUiIHkxPSI4MC4zOCIgeDI9Ijc3LjgyIiB5Mj0iNTUuNjciLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIyMy4xIiB5MT0iNzcuODQiIHgyPSI3Ny4xNSIgeTI9IjUyLjQ5Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjEuNjMiIHkxPSI3NC4zMyIgeDI9Ijc1Ljg4IiB5Mj0iNDguNyIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjE5LjkxIiB5MT0iNzAuODQiIHgyPSI3NC4zMSIgeTI9IjQ1LjQ5Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTguMiIgeTE9IjY3LjM0IiB4Mj0iNzIuODEiIHkyPSI0Mi40NSIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjE2LjMxIiB5MT0iNjMuNSIgeDI9IjcwLjg2IiB5Mj0iMzguNDYiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIxNC42NyIgeTE9IjYwLjE1IiB4Mj0iNjkuNCIgeTI9IjM1LjQ5Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTIuODMiIHkxPSI1Ni40IiB4Mj0iNjcuNiIgeTI9IjMxLjgyIi8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTAuOTEiIHkxPSI1Mi40OSIgeDI9IjY2LjA2IiB5Mj0iMjguNjgiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI5LjA1IiB5MT0iNDguNyIgeDI9IjY0LjE5IiB5Mj0iMjQuODgiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI3LjQ3IiB5MT0iNDUuNDkiIHgyPSI2Mi42NSIgeTI9IjIxLjc0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iNS42OCIgeTE9IjQxLjg0IiB4Mj0iNjAuOTQiIHkyPSIxOC4yNSIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjQuMDIiIHkxPSIzOC40NiIgeDI9IjU5LjYiIHkyPSIxNC41MSIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjIuNTYiIHkxPSIzNS40OSIgeDI9IjU4LjEiIHkyPSIxMS42MyIvPjxwYXRoIGNsYXNzPSJjbHMtNCIgZD0iTTE3Ni43OSw1OC40OCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE3Ni40IC0yNi42NikiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI1Ni4xIiB5MT0iNy44NCIgeDI9IjEuMSIgeTI9IjMxLjg0Ii8+PC9nPjxnIGlkPSJoYW5kbGUiPjxwYXRoIGNsYXNzPSJjbHMtNSIgZD0iTTIyNy41LDEwMi41bDQ0LDk0czUsNCw5LTNsLTQzLTk2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTc2LjQgLTI2LjY2KSIvPjwvZz48ZyBpZD0ic2hhZG93cyI+PHBvbHlnb24gY2xhc3M9ImNscy02IiBwb2ludHM9IjYxLjEgNzAuODQgNTguMSA3Mi44NCAxMDIuMSAxNjguODQgMTA0LjEgMTY2Ljg0IDYxLjEgNzAuODQiLz48L2c+PC9nPjwvc3ZnPg=='),auto;

}

.svg-container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

#svg {	
  width: 7em;
  height: auto;
  padding: 8em;
  margin: auto;
}


#back_wing {
  animation: backwing .2s linear reverse infinite;
}

#forward_wing {
  animation: frontwing .2s linear reverse infinite;
}

@keyframes backwing {
  0% {
    transform: rotate(0deg);
  }
  
  50% {
    transform: rotate(12deg);
  }
  
}

@keyframes frontwing {
  0% {
    transform: rotate(0);
  }
  
  50% {
    transform: rotate(7deg);
  }
}

h1 {
  text-align: center;
}

#text {
  display: none;
  color: red;
}

＆＃13;

<h1> Flies have feelings </h1>

<div id="svg-container" class="svg-container">

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165.32 126.08"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:#f4f4f4;}.cls-11,.cls-12,.cls-2,.cls-5,.cls-7{stroke:#000;}.cls-10,.cls-11,.cls-12,.cls-13,.cls-17,.cls-18,.cls-19,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{stroke-miterlimit:10;}.cls-18,.cls-19,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{fill:none;}.cls-3,.cls-4{stroke:#73e4ef;}.cls-10,.cls-17,.cls-18,.cls-3,.cls-6{stroke-width:0.25px;}.cls-5{stroke-width:2px;}.cls-6{stroke:#189cb2;}.cls-12,.cls-17,.cls-8{fill:#4d727b;}.cls-9{fill:#d40000;}.cls-10{fill:#5a9761;}.cls-10,.cls-13,.cls-17,.cls-18,.cls-19{stroke:#000202;}.cls-11{fill:#0b8e9b;}.cls-11,.cls-12,.cls-13{stroke-width:0.5px;}.cls-13{fill:#3d595e;}.cls-14{fill:#0f1c59;opacity:0.4;mix-blend-mode:multiply;}.cls-15,.cls-16{fill:#f2f970;}.cls-16{opacity:0.5;mix-blend-mode:overlay;}.cls-19{stroke-width:0.75px;}.cls-20{fill:#fff;}</style></defs><title>fly</title><g id="fly" class="cls-1"><g id="back_wing"><path class="cls-2" d="M94.49 57.12s14.44-78 39-50.92-33 49.66-33 49.66z"/><g id="back_wing_pattern"><path class="cls-3" d="M113.33 49.67l-12.41-17.56M117.06 2.74l-8.77 39.81M113.33 22.65l23.93 6.16"/></g></g><g id="legs"><path class="cls-5" d="M105.73 105.18l-9.79 9.21 3.94 11.36"/><path class="cls-5" d="M114.69 121.74l-11.63-11.75 7.82-13.71 17.9 3.66 6.98 20.26"/><path class="cls-5" d="M110.21 100.47l14.34 5.82 4.74 10.98"/></g><g id="forward_wing"><path class="cls-2" d="M97.31 64.03S53.63 11.71 23.67 11.39s-32 38.31.4 46 66.74 8.92 66.74 8.92z"/><g id="forward_wing_pattern"><path class="cls-3" d="M61.82 63.86l10.39-25.59M17.79 11.89l16.14 47.62M19.12 15.83l45.44 41.29"/></g></g><g id="body"><path class="cls-8" d="M156.12 79.68a30.58 30.58 0 0 1-23.22 11.85h-2.76l-5.3-6.38c2.47-3.76 3.52-9.29 2.71-15.25a31.51 31.51 0 0 0-.84-4.06c-3-10.85-11.12-18.14-18.42-16.69a30.85 30.85 0 0 1 22.23-10.62 32.18 32.18 0 0 1 11.86 1.67c-5.88 3.41-8.42 13-5.67 23 3.08 11.18 11.62 18.58 19.08 16.53z"/><path class="cls-9" d="M163.71 55.81c3 11-.37 21.59-7.59 23.87l-.33.1c-7.46 2-16-5.35-19.08-16.53-2.75-10-.21-19.61 5.67-23a9.33 9.33 0 0 1 2.25-1c7.46-2.02 16 5.38 19.08 16.56z"/><path class="cls-8" d="M124.84 85.13l5.3 6.38a31.52 31.52 0 0 1-10.26-2.11 11 11 0 0 0 4.96-4.27z"/><path class="cls-9" d="M127.55 69.88c.81 6-.24 11.49-2.71 15.25l-24.33-29.27c1.55-3.32 4-5.71 7.12-6.58l.66-.16c7.3-1.45 15.43 5.84 18.42 16.69a31.51 31.51 0 0 1 .84 4.06z"/><path class="cls-9" d="M100.51 55.86l24.33 29.27a11 11 0 0 1-5 4.27 8.27 8.27 0 0 1-1.09.38c-7.46 2-16-5.35-19.08-16.53-1.79-6.48-1.34-12.81.79-17.39z"/><path class="cls-8" d="M119.88 89.4a31.52 31.52 0 0 0 10.26 2.13 28.08 28.08 0 0 1-10.26 14.78 27.86 27.86 0 0 1-16.66 5.5L79.04 69.53a28 28 0 0 1 21.46-13.67c-2.13 4.58-2.58 10.91-.79 17.39 3.08 11.18 11.62 18.58 19.08 16.53a8.27 8.27 0 0 0 1.09-.38zM79.04 69.53l24.17 42.27a28 28 0 0 1-24.17-42.27z"/><path class="cls-8" d="M103.21 111.8s-22.55 1.78-42.87-5.51 18.7-36.76 18.7-36.76a28 28 0 0 0 24.17 42.27z"/><path class="cls-7" d="M79.04 69.53s-39 29.47-18.71 36.76 42.88 5.51 42.88 5.51M119.88 106.29a28.08 28.08 0 0 0 10.26-14.76M100.5 55.86a28 28 0 1 0 19.36 50.44M119.88 89.4a31.52 31.52 0 0 0 10.26 2.13h2.76a30.58 30.58 0 0 0 23.22-11.82M108.29 49.12a30.85 30.85 0 0 1 22.23-10.59 32.18 32.18 0 0 1 11.86 1.67M119.88 106.29"/><path class="cls-7" d="M127.55 69.88c.81 6-.24 11.49-2.71 15.25a11 11 0 0 1-5 4.27 8.27 8.27 0 0 1-1.09.38c-7.46 2-16-5.35-19.08-16.53-1.79-6.48-1.34-12.81.79-17.39 1.55-3.32 4-5.71 7.12-6.58l.66-.16c7.3-1.45 15.43 5.84 18.42 16.69a31.51 31.51 0 0 1 .84 4.06M142.38 40.23a9.33 9.33 0 0 1 2.25-1c7.46-2 16 5.35 19.08 16.53 3 11-.37 21.59-7.59 23.87l-.33.1c-7.46 2-16-5.35-19.08-16.53-2.75-9.93-.21-19.56 5.67-22.97zM127.55 69.88"/><circle class="cls-10" cx="121.08" cy="97.99" r="1.21"/><circle class="cls-10" cx="121.68" cy="94.89" r=".61"/><circle class="cls-10" cx="123.98" cy="95.89" r=".39"/></g><g id="nose"><path class="cls-12" d="M158.21 88.14s-15-7.48-14.14-8.46-1.66 1.52-1.66 1.52c4 .33 11.67 12.18 11.67 12.18"/><ellipse class="cls-13" cx="292.91" cy="122.23" rx="3.34" ry="1.89" transform="rotate(-51.71 192.082 247.63)"/></g><g id="shadows"><path class="cls-14" d="M119.88 89.4s-34.89-1.12-38.22 12.32c0 0 12.9 17.58 37.35 5.2 0 0 10.56-9.67 11.13-15.4 0 .01-10.93-.87-10.26-2.12z"/><path class="cls-14" d="M81.66 101.72s-31.43 1.67-21.34 4.57 32.93 7.11 37 5.51c-.01 0-15.29-6.73-15.66-10.08z"/></g><g id="lights"><path class="cls-16" d="M128.98 38.85s-15 1-20.69 10.27c0 0 15.28-10.05 20.69-10.27zM100.5 55.86S83.77 57.3 76.21 76.04c0 0 13.58-16.85 24.29-20.18zM78.58 69.88S57.78 87 56.14 93.53"/></g><g id="hair"><path class="cls-17" d="M134.75 117.27l1.01-3.74M133.46 113.53l-3.32-1.54M131.85 108.87l1.61-2.58"/><path class="cls-18" d="M112.68 119.71l.53-2.44M107.12 117.27h3.09v-3.74M127.55 115.4h-2.21M126.45 110.67l1.1-3.09M99.27 124.01l1.65-2.27M94.49 119.71h2.83M96.94 117.27l2.33-1.87"/><path class="cls-19" d="M113.32 36.79c9.36-2.93 13.12 8.68 13.12 8.68M127 42.55l-.55-6.85"/></g><g id="eyes"><ellipse cx="253.34" cy="111.51" rx="8.43" ry="10.34" transform="rotate(-22.59 106.112 438.183)"/><ellipse cx="290.34" cy="101" rx="8.43" ry="10.34" transform="rotate(-22.59 143.093 427.685)"/><ellipse class="cls-20" cx="256.2" cy="105.15" rx="1.31" ry="2.26" transform="rotate(-45 149.82 254.532)"/><ellipse class="cls-20" cx="293.63" cy="94.75" rx="1.31" ry="2.26" transform="rotate(-45 187.25 244.128)"/><circle class="cls-20" cx="118.24" cy="75.68" r=".4"/><circle class="cls-20" cx="156.12" cy="65.55" r=".4"/></g></g></svg>

<div id="text">
  <h1> ouch </h1>
</div>
  
</div>

＆＃13;

Answer 2

我认为elementFromPoint是你真正想要的不是吗？这将返回鼠标结束的内容。目前，您在整个边界框上进行匹配，包括未绘制苍蝇的部分。

至于其余部分，我在我的回答中加入了Paul LeBau的修正案。我检查drawFrame中的碰撞。

var svg = document.getElementById('svg');
var fly = document.getElementById('fly');
var text = document.getElementById('text');
var svgContainer = document.getElementById('svg-container');



var angleX = 0;
var angleY = 0;
var range = 100;
var xspeed = 0.06;
var yspeed = 0.08;

var transY = 0;
var transX = 0;

var mouseX = 0;
var mouseY = 0;

function drawFrame() {
  window.requestAnimationFrame(drawFrame);
  transX = Math.sin(angleX) * range;
  transY = Math.sin(angleY) * range;
  fly.style.transform = `translate3d(${transX}px,${transY}px,0)`
  angleX += xspeed;
  angleY += yspeed;

  /* if the mouse x position collides with the fly i want to display the message */
  var e = document.elementFromPoint(mouseX, mouseY);
  if (e instanceof SVGElement && !(e instanceof SVGSVGElement)) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}


window.requestAnimationFrame(drawFrame);

svgContainer.addEventListener('mousemove', function(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

body {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 cursor:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTAiIGhlaWdodD0iMTEwIiB2aWV3Qm94PSIwIDAgMTA0LjM4IDE3MS4yMyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtpc29sYXRpb246aXNvbGF0ZTt9LmNscy0yLC5jbHMtMywuY2xzLTR7ZmlsbDpub25lO30uY2xzLTIsLmNscy00LC5jbHMtNXtzdHJva2U6IzA3OGVhZDt9LmNscy0yLC5jbHMtMywuY2xzLTQsLmNscy01e3N0cm9rZS1taXRlcmxpbWl0OjEwO30uY2xzLTJ7c3Ryb2tlLXdpZHRoOjAuNzVweDt9LmNscy0ze3N0cm9rZTojMDAwO30uY2xzLTQsLmNscy01e3N0cm9rZS13aWR0aDowLjVweDt9LmNscy01e2ZpbGw6IzA1N2ZhMDt9LmNscy02e2ZpbGw6IzA2MGY3YztvcGFjaXR5OjAuMzk7bWl4LWJsZW5kLW1vZGU6bXVsdGlwbHk7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5mbHlzd2F0PC90aXRsZT48ZyBjbGFzcz0iY2xzLTEiPjxnIGlkPSJ0b3AiPjxyZWN0IGNsYXNzPSJjbHMtMiIgeD0iMTg1LjUiIHk9IjMyLjUiIHdpZHRoPSI2MCIgaGVpZ2h0PSI3MiIgcng9IjEyIiByeT0iMTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xODQuNTQgNzUuMjkpIHJvdGF0ZSgtMjYuMTQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMjQxLjQ0LDk1Ljg3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTc2LjQgLTI2LjY2KSIvPjxwb2x5bGluZSBjbGFzcz0iY2xzLTQiIHBvaW50cz0iMzIuNTkgODMuMjYgMS4zMSAyMy42MyA0OS45OSAxLjYzIi8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iNC4zMSIgeTE9IjE5LjYzIiB4Mj0iMzYuNiIgeTI9IjgzLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iOC4zMSIgeTE9IjE3LjYzIiB4Mj0iNDAuNiIgeTI9IjgxLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTIuMzEiIHkxPSIxNS42MyIgeDI9IjQ0LjYiIHkyPSI3OS4zNCIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjE2LjMxIiB5MT0iMTMuNjMiIHgyPSI0OC42IiB5Mj0iNzcuMzQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIyMC4zMSIgeTE9IjExLjYzIiB4Mj0iNTIuNiIgeTI9Ijc1LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjMuMzEiIHkxPSI5LjYzIiB4Mj0iNTUuNiIgeTI9IjczLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjcuMzEiIHkxPSI3LjYzIiB4Mj0iNTkuNiIgeTI9IjcxLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMzEuMzEiIHkxPSI1LjYzIiB4Mj0iNjMuNiIgeTI9IjY5LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMzUuMzEiIHkxPSIzLjYzIiB4Mj0iNjcuNiIgeTI9IjY3LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMzkuMzEiIHkxPSIxLjYzIiB4Mj0iNzEuNiIgeTI9IjY1LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iNDMuNiIgeTE9IjAuMzQiIHgyPSI3NS42IiB5Mj0iNjIuMzQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI3Ny41MyIgeTE9IjU3LjM0IiB4Mj0iNDguNiIgeTI9IjEuMzQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIwLjM5IiB5MT0iMjguNjgiIHgyPSI1My42OSIgeTI9IjQuNDQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIyOS44NyIgeTE9IjgyLjczIiB4Mj0iNzcuNiIgeTI9IjU5LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjUuNjUiIHkxPSI4MC4zOCIgeDI9Ijc3LjgyIiB5Mj0iNTUuNjciLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIyMy4xIiB5MT0iNzcuODQiIHgyPSI3Ny4xNSIgeTI9IjUyLjQ5Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjEuNjMiIHkxPSI3NC4zMyIgeDI9Ijc1Ljg4IiB5Mj0iNDguNyIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjE5LjkxIiB5MT0iNzAuODQiIHgyPSI3NC4zMSIgeTI9IjQ1LjQ5Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTguMiIgeTE9IjY3LjM0IiB4Mj0iNzIuODEiIHkyPSI0Mi40NSIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjE2LjMxIiB5MT0iNjMuNSIgeDI9IjcwLjg2IiB5Mj0iMzguNDYiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIxNC42NyIgeTE9IjYwLjE1IiB4Mj0iNjkuNCIgeTI9IjM1LjQ5Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTIuODMiIHkxPSI1Ni40IiB4Mj0iNjcuNiIgeTI9IjMxLjgyIi8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTAuOTEiIHkxPSI1Mi40OSIgeDI9IjY2LjA2IiB5Mj0iMjguNjgiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI5LjA1IiB5MT0iNDguNyIgeDI9IjY0LjE5IiB5Mj0iMjQuODgiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI3LjQ3IiB5MT0iNDUuNDkiIHgyPSI2Mi42NSIgeTI9IjIxLjc0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iNS42OCIgeTE9IjQxLjg0IiB4Mj0iNjAuOTQiIHkyPSIxOC4yNSIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjQuMDIiIHkxPSIzOC40NiIgeDI9IjU5LjYiIHkyPSIxNC41MSIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjIuNTYiIHkxPSIzNS40OSIgeDI9IjU4LjEiIHkyPSIxMS42MyIvPjxwYXRoIGNsYXNzPSJjbHMtNCIgZD0iTTE3Ni43OSw1OC40OCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE3Ni40IC0yNi42NikiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI1Ni4xIiB5MT0iNy44NCIgeDI9IjEuMSIgeTI9IjMxLjg0Ii8+PC9nPjxnIGlkPSJoYW5kbGUiPjxwYXRoIGNsYXNzPSJjbHMtNSIgZD0iTTIyNy41LDEwMi41bDQ0LDk0czUsNCw5LTNsLTQzLTk2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTc2LjQgLTI2LjY2KSIvPjwvZz48ZyBpZD0ic2hhZG93cyI+PHBvbHlnb24gY2xhc3M9ImNscy02IiBwb2ludHM9IjYxLjEgNzAuODQgNTguMSA3Mi44NCAxMDIuMSAxNjguODQgMTA0LjEgMTY2Ljg0IDYxLjEgNzAuODQiLz48L2c+PC9nPjwvc3ZnPg=='),auto;

}

.svg-container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

#svg {	
  width: 7em;
  height: auto;
  padding: 8em;
  margin: auto;
}


#back_wing {
  animation: backwing .2s linear reverse infinite;
}

#forward_wing {
  animation: frontwing .2s linear reverse infinite;
}

@keyframes backwing {
  0% {
    transform: rotate(0deg);
  }
  
  50% {
    transform: rotate(12deg);
  }
  
}

@keyframes frontwing {
  0% {
    transform: rotate(0);
  }
  
  50% {
    transform: rotate(7deg);
  }
}

h1 {
  text-align: center;
}

#text {
  display: none;
  color: red;
}

<h1> Flies have feelings </h1>

<div id="svg-container" class="svg-container">

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165.32 126.08"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:#f4f4f4;}.cls-11,.cls-12,.cls-2,.cls-5,.cls-7{stroke:#000;}.cls-10,.cls-11,.cls-12,.cls-13,.cls-17,.cls-18,.cls-19,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{stroke-miterlimit:10;}.cls-18,.cls-19,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{fill:none;}.cls-3,.cls-4{stroke:#73e4ef;}.cls-10,.cls-17,.cls-18,.cls-3,.cls-6{stroke-width:0.25px;}.cls-5{stroke-width:2px;}.cls-6{stroke:#189cb2;}.cls-12,.cls-17,.cls-8{fill:#4d727b;}.cls-9{fill:#d40000;}.cls-10{fill:#5a9761;}.cls-10,.cls-13,.cls-17,.cls-18,.cls-19{stroke:#000202;}.cls-11{fill:#0b8e9b;}.cls-11,.cls-12,.cls-13{stroke-width:0.5px;}.cls-13{fill:#3d595e;}.cls-14{fill:#0f1c59;opacity:0.4;mix-blend-mode:multiply;}.cls-15,.cls-16{fill:#f2f970;}.cls-16{opacity:0.5;mix-blend-mode:overlay;}.cls-19{stroke-width:0.75px;}.cls-20{fill:#fff;}</style></defs><title>fly</title><g id="fly" class="cls-1"><g id="back_wing"><path class="cls-2" d="M94.49 57.12s14.44-78 39-50.92-33 49.66-33 49.66z"/><g id="back_wing_pattern"><path class="cls-3" d="M113.33 49.67l-12.41-17.56M117.06 2.74l-8.77 39.81M113.33 22.65l23.93 6.16"/></g></g><g id="legs"><path class="cls-5" d="M105.73 105.18l-9.79 9.21 3.94 11.36"/><path class="cls-5" d="M114.69 121.74l-11.63-11.75 7.82-13.71 17.9 3.66 6.98 20.26"/><path class="cls-5" d="M110.21 100.47l14.34 5.82 4.74 10.98"/></g><g id="forward_wing"><path class="cls-2" d="M97.31 64.03S53.63 11.71 23.67 11.39s-32 38.31.4 46 66.74 8.92 66.74 8.92z"/><g id="forward_wing_pattern"><path class="cls-3" d="M61.82 63.86l10.39-25.59M17.79 11.89l16.14 47.62M19.12 15.83l45.44 41.29"/></g></g><g id="body"><path class="cls-8" d="M156.12 79.68a30.58 30.58 0 0 1-23.22 11.85h-2.76l-5.3-6.38c2.47-3.76 3.52-9.29 2.71-15.25a31.51 31.51 0 0 0-.84-4.06c-3-10.85-11.12-18.14-18.42-16.69a30.85 30.85 0 0 1 22.23-10.62 32.18 32.18 0 0 1 11.86 1.67c-5.88 3.41-8.42 13-5.67 23 3.08 11.18 11.62 18.58 19.08 16.53z"/><path class="cls-9" d="M163.71 55.81c3 11-.37 21.59-7.59 23.87l-.33.1c-7.46 2-16-5.35-19.08-16.53-2.75-10-.21-19.61 5.67-23a9.33 9.33 0 0 1 2.25-1c7.46-2.02 16 5.38 19.08 16.56z"/><path class="cls-8" d="M124.84 85.13l5.3 6.38a31.52 31.52 0 0 1-10.26-2.11 11 11 0 0 0 4.96-4.27z"/><path class="cls-9" d="M127.55 69.88c.81 6-.24 11.49-2.71 15.25l-24.33-29.27c1.55-3.32 4-5.71 7.12-6.58l.66-.16c7.3-1.45 15.43 5.84 18.42 16.69a31.51 31.51 0 0 1 .84 4.06z"/><path class="cls-9" d="M100.51 55.86l24.33 29.27a11 11 0 0 1-5 4.27 8.27 8.27 0 0 1-1.09.38c-7.46 2-16-5.35-19.08-16.53-1.79-6.48-1.34-12.81.79-17.39z"/><path class="cls-8" d="M119.88 89.4a31.52 31.52 0 0 0 10.26 2.13 28.08 28.08 0 0 1-10.26 14.78 27.86 27.86 0 0 1-16.66 5.5L79.04 69.53a28 28 0 0 1 21.46-13.67c-2.13 4.58-2.58 10.91-.79 17.39 3.08 11.18 11.62 18.58 19.08 16.53a8.27 8.27 0 0 0 1.09-.38zM79.04 69.53l24.17 42.27a28 28 0 0 1-24.17-42.27z"/><path class="cls-8" d="M103.21 111.8s-22.55 1.78-42.87-5.51 18.7-36.76 18.7-36.76a28 28 0 0 0 24.17 42.27z"/><path class="cls-7" d="M79.04 69.53s-39 29.47-18.71 36.76 42.88 5.51 42.88 5.51M119.88 106.29a28.08 28.08 0 0 0 10.26-14.76M100.5 55.86a28 28 0 1 0 19.36 50.44M119.88 89.4a31.52 31.52 0 0 0 10.26 2.13h2.76a30.58 30.58 0 0 0 23.22-11.82M108.29 49.12a30.85 30.85 0 0 1 22.23-10.59 32.18 32.18 0 0 1 11.86 1.67M119.88 106.29"/><path class="cls-7" d="M127.55 69.88c.81 6-.24 11.49-2.71 15.25a11 11 0 0 1-5 4.27 8.27 8.27 0 0 1-1.09.38c-7.46 2-16-5.35-19.08-16.53-1.79-6.48-1.34-12.81.79-17.39 1.55-3.32 4-5.71 7.12-6.58l.66-.16c7.3-1.45 15.43 5.84 18.42 16.69a31.51 31.51 0 0 1 .84 4.06M142.38 40.23a9.33 9.33 0 0 1 2.25-1c7.46-2 16 5.35 19.08 16.53 3 11-.37 21.59-7.59 23.87l-.33.1c-7.46 2-16-5.35-19.08-16.53-2.75-9.93-.21-19.56 5.67-22.97zM127.55 69.88"/><circle class="cls-10" cx="121.08" cy="97.99" r="1.21"/><circle class="cls-10" cx="121.68" cy="94.89" r=".61"/><circle class="cls-10" cx="123.98" cy="95.89" r=".39"/></g><g id="nose"><path class="cls-12" d="M158.21 88.14s-15-7.48-14.14-8.46-1.66 1.52-1.66 1.52c4 .33 11.67 12.18 11.67 12.18"/><ellipse class="cls-13" cx="292.91" cy="122.23" rx="3.34" ry="1.89" transform="rotate(-51.71 192.082 247.63)"/></g><g id="shadows"><path class="cls-14" d="M119.88 89.4s-34.89-1.12-38.22 12.32c0 0 12.9 17.58 37.35 5.2 0 0 10.56-9.67 11.13-15.4 0 .01-10.93-.87-10.26-2.12z"/><path class="cls-14" d="M81.66 101.72s-31.43 1.67-21.34 4.57 32.93 7.11 37 5.51c-.01 0-15.29-6.73-15.66-10.08z"/></g><g id="lights"><path class="cls-16" d="M128.98 38.85s-15 1-20.69 10.27c0 0 15.28-10.05 20.69-10.27zM100.5 55.86S83.77 57.3 76.21 76.04c0 0 13.58-16.85 24.29-20.18zM78.58 69.88S57.78 87 56.14 93.53"/></g><g id="hair"><path class="cls-17" d="M134.75 117.27l1.01-3.74M133.46 113.53l-3.32-1.54M131.85 108.87l1.61-2.58"/><path class="cls-18" d="M112.68 119.71l.53-2.44M107.12 117.27h3.09v-3.74M127.55 115.4h-2.21M126.45 110.67l1.1-3.09M99.27 124.01l1.65-2.27M94.49 119.71h2.83M96.94 117.27l2.33-1.87"/><path class="cls-19" d="M113.32 36.79c9.36-2.93 13.12 8.68 13.12 8.68M127 42.55l-.55-6.85"/></g><g id="eyes"><ellipse cx="253.34" cy="111.51" rx="8.43" ry="10.34" transform="rotate(-22.59 106.112 438.183)"/><ellipse cx="290.34" cy="101" rx="8.43" ry="10.34" transform="rotate(-22.59 143.093 427.685)"/><ellipse class="cls-20" cx="256.2" cy="105.15" rx="1.31" ry="2.26" transform="rotate(-45 149.82 254.532)"/><ellipse class="cls-20" cx="293.63" cy="94.75" rx="1.31" ry="2.26" transform="rotate(-45 187.25 244.128)"/><circle class="cls-20" cx="118.24" cy="75.68" r=".4"/><circle class="cls-20" cx="156.12" cy="65.55" r=".4"/></g></g></svg>

<div id="text">
  <h1> ouch </h1>
</div>
  
</div>

检测鼠标位置以及是否与对象显示文本发生碰撞

2 个答案: