主页 / 问题 / 1071891
Accepted
Сергей Александров
Asked:2020-01-20 06:21:00 +0800 CST2020-01-20 06:21:00 +0800 CST

同样的反应

  • 772

如何使悬停在按钮上时有效的工具提示在悬停在 svg 图像上时也有效？

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>

<style type="text/css">

	#cm51012{
		position: absolute;
	top:200px;
	left:300px;
	}
[tooltip] {
  position: relative; 

}


[tooltip]::before,
[tooltip]::after {
  text-transform: none; 
  font-size: .9em ; 


 
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; 
  z-index: 1001; 

}
[tooltip]::after {
  content: attr(tooltip); 
  

  

  

  
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
 	  text-align:center;
  position: absolute;
  padding: 5px;               
  font: 16px Arial;        
/*background: rgba(234, 214, 175, 0.95);  */



background: #000; 

color:#fff;

  
   border:solid 1px #fff;     
  border-radius: 5px;            
  pointer-events: none;
  
}


[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}


[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  -webkit-transform: translate(-50%, -.5em);
          transform: translate(-50%, -.5em);
}


[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  -webkit-transform: translate(-50%, .5em);
          transform: translate(-50%, .5em);
}


[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  -webkit-transform: translate(-.5em, -50%);
          transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  -webkit-transform: translate(-.5em, -50%);
          transform: translate(-.5em, -50%);
}


[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  -webkit-transform: translate(.5em, -50%);
          transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  -webkit-transform: translate(.5em, -50%);
          transform: translate(.5em, -50%);
}


@-webkit-keyframes tooltips-vert {
  to {
   opacity: 1; 
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}
@keyframes tooltips-vert {
  to {
 opacity: 1;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}

@-webkit-keyframes tooltips-horz {
  to {
 opacity: 1;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}

@keyframes tooltips-horz {
  to {
opacity: 1;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  -webkit-animation: tooltips-vert 300ms ease-out forwards;
          animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  -webkit-animation: tooltips-horz 300ms ease-out forwards;
          animation: tooltips-horz 300ms ease-out forwards;
}


#Слой_1{
	width: 100px;
	height: 100px;
}

</style>
<body>
<script type="text/javascript">
// создание кнопки
var btn950 = document.createElement('button'); // создание кнопки за кодом кнопки так как какая то ошибка 




btn950.id = 'cm51012'; // её id 

btn950.textContent = 'пуск'; // её текст


btn950.onclick = function() { // функция при клике на неё 




}

btn950.setAttribute("tooltip", "Уровень"); 



  document.body.appendChild(btn950);





var i9 = new Image();
var w9 = document.createElement('s9');
w9.appendChild(i9);

w9.id = 'Слой_1';




w9.setAttribute("tooltip3", "тест"); 

w9.setAttribute("flow", "down");


//i1.classList.add("zoom-on-hover4");

w9.classList.add("zoom-on-hover");

  document.body.appendChild(w9);


</script>


<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 479.2 364.2">
  <defs>
    <style>
      .cls-1 {
        fill: #8399b1;
      }

      .cls-2 {
        fill: #c8d2d8;
      }

      .cls-3 {
        fill: #a0b3ca;
      }
    </style>
  </defs>
  <title>9</title>
  <g>
    <g>
      <path class="cls-1" d="M665.66,346.28l.12.4.16.49.33,1,.69,2c.46,1.32,1.08,2.57,1.64,3.85s1.29,2.45,1.94,3.67,1.47,2.31,2.21,3.46a61.18,61.18,0,0,0,10.72,11.68l4.36-5.13a54.31,54.31,0,0,1-9.55-10.39,43.9,43.9,0,0,1-6.15-12.9Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M672.12,344.4a43.62,43.62,0,0,0,6.16,12.91,54.55,54.55,0,0,0,9.55,10.38l.75-.88a53.22,53.22,0,0,1-9.35-10.17,42.6,42.6,0,0,1-6-12.56Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M688.58,366.81l7.86-9.24a41.21,41.21,0,0,1-7.24-7.84c-.45-.72-1-1.4-1.37-2.14s-.84-1.45-1.17-2.2-.7-1.5-1-2.27l-.4-1.16-.2-.58-.1-.29-.12-.4-11.64,3.39a42.6,42.6,0,0,0,6,12.56A53.22,53.22,0,0,0,688.58,366.81Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M682.75,372.19a92.48,92.48,0,0,0,25.49,15.31l2.57-6.22a86.2,86.2,0,0,1-23.63-14.16Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M687.18,367.12a86.2,86.2,0,0,0,23.63,14.16l.45-1.07a84.9,84.9,0,0,1-23.32-14Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M711.26,380.21,715.9,369a73.19,73.19,0,0,1-20-11.88l-8,9.13A84.9,84.9,0,0,0,711.26,380.21Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M707.41,387.15l3.36,1.36c1.12.44,2.23.81,3.35,1.21l3.35,1.19c.56.19,1.12.4,1.68.58l1.7.5c2.28.66,4.54,1.38,6.83,2l6.9,1.66L736,389A156.63,156.63,0,0,1,710,381Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M710,381A156.63,156.63,0,0,0,736,389l.24-1.13a155.28,155.28,0,0,1-25.74-8Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M736.23,387.9,738.78,376l-6-1.44c-2-.52-4-1.16-6-1.73l-1.49-.43c-.49-.16-1-.34-1.46-.51l-2.92-1c-1-.35-2-.67-2.91-1l-2.8-1.13-4.72,11.17A155.28,155.28,0,0,0,736.23,387.9Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M733.73,395.41a167,167,0,0,0,28.06,3.65l.3-6.73a160.38,160.38,0,0,1-26.91-3.49Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M735.18,388.84a159.36,159.36,0,0,0,26.91,3.49l0-1.15a160.08,160.08,0,0,1-26.71-3.47Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M762.14,391.18l.52-12.12a146.72,146.72,0,0,1-24.62-3.2l-2.61,11.85A160.08,160.08,0,0,0,762.14,391.18Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M760.92,399A159.84,159.84,0,0,0,789.18,398l-.82-6.68a152.61,152.61,0,0,1-27.11,1Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M761.25,392.31a153.56,153.56,0,0,0,27.11-1l-.14-1.15a152.33,152.33,0,0,1-26.92,1Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M788.22,390.14l-1.48-12a141.34,141.34,0,0,1-24.85.93l-.59,12.11A152.33,152.33,0,0,0,788.22,390.14Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M788.31,398.08A165.38,165.38,0,0,0,816,392.4L814.11,386a159.67,159.67,0,0,1-26.58,5.44Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M787.53,391.39A159.64,159.64,0,0,0,814.11,386l-.33-1.12a158.4,158.4,0,0,1-26.39,5.4Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M813.78,384.84l-3.47-11.62a145,145,0,0,1-24.33,5l1.41,12.05A158.4,158.4,0,0,0,813.78,384.84Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M815.2,392.64a168,168,0,0,0,26.4-10.36l-3-6a159.94,159.94,0,0,1-25.28,9.91Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M813.31,386.18a160.25,160.25,0,0,0,25.27-9.92l-.52-1A158.79,158.79,0,0,1,813,385.06Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M838.06,375.22l-5.42-10.84a147.79,147.79,0,0,1-23.07,9L813,385.06A158.79,158.79,0,0,0,838.06,375.22Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M840.82,382.67a220.22,220.22,0,0,0,24-14.06L861.14,363a215.12,215.12,0,0,1-23.31,13.63Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M837.83,376.63A212.55,212.55,0,0,0,861.14,363l-.64-1a212.38,212.38,0,0,1-23.18,13.56Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M860.5,362l-6.7-10.11A200.93,200.93,0,0,1,832,364.72l5.37,10.87A212.38,212.38,0,0,0,860.5,362Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M864.16,369.07c7.64-5,14.94-10.31,22.13-15.5l-3.94-5.46c-7.19,5.19-14.42,10.41-21.9,15.34Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M860.45,363.46c7.48-4.94,14.71-10.16,21.9-15.35l-.68-.94c-7.19,5.19-14.41,10.4-21.86,15.32Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M881.67,347.17l-7.1-9.83c-7.19,5.19-14.27,10.3-21.44,15l6.68,10.13C867.26,357.57,874.48,352.36,881.67,347.17Z" transform="translate(-432.85 -317.81)"/>
    </g>
  </g>
  <g>
    <g>
      <path class="cls-1" d="M871.4,351.61c3,8.81,5.91,17.54,8.61,26.26l6.43-2c-2.73-8.83-5.68-17.62-8.66-26.43Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M877.78,349.46c3,8.8,5.93,17.59,8.66,26.42l1.11-.34c-2.74-8.85-5.7-17.65-8.67-26.46Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M887.55,375.54,899.14,372c-2.8-9-5.8-17.94-8.77-26.76l-11.49,3.88C881.85,357.89,884.81,366.69,887.55,375.54Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M879.76,377.06c2.71,8.72,5.19,17.43,7.18,26.16l6.56-1.5c-2-9-4.56-17.83-7.31-26.66Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M886.19,375.06c2.74,8.83,5.27,17.7,7.31,26.66l1.13-.26c-2-9-4.58-17.9-7.33-26.74Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M894.63,401.46l11.82-2.71c-2.14-9.4-4.76-18.59-7.57-27.63l-11.58,3.6C890.05,383.56,892.58,392.46,894.63,401.46Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M886.75,402.42a213.11,213.11,0,0,1,4.5,26.21l6.69-.68a219.51,219.51,0,0,0-4.63-27.06Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M893.31,400.89A219.51,219.51,0,0,1,897.94,428l1.16-.11a221,221,0,0,0-4.66-27.21Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M899.1,427.84l12.06-1.22a233.33,233.33,0,0,0-4.91-28.74l-11.81,2.75A221,221,0,0,1,899.1,427.84Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M891.16,427.82q.32,3.29.56,6.55l.16,3.27.09,1.64,0,1.61,0,3.24c0,1.08,0,2.16-.07,3.23s-.05,2.16-.12,3.23l-.23,3.22,6.71.55a146,146,0,0,0-.47-27.25Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M897.85,427.12a145.92,145.92,0,0,1,.46,27.24l1.16.09A146.56,146.56,0,0,0,899,427Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M899.47,454.45l12.09,1,.27-3.74c.08-1.24.09-2.49.14-3.74s.1-2.49.08-3.74l0-3.73,0-1.87-.1-1.85-.19-3.69c-.18-2.46-.38-4.91-.63-7.35L899,427A146.56,146.56,0,0,1,899.47,454.45Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M891.66,453A112.11,112.11,0,0,1,887,478.2l6.44,2a119.07,119.07,0,0,0,4.92-26.65Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M898.38,453.52a119.64,119.64,0,0,1-4.92,26.65l1.11.34a120.25,120.25,0,0,0,5-26.91Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M894.57,480.51l11.59,3.56a132.94,132.94,0,0,0,5.47-29.56l-12.1-.91A120.25,120.25,0,0,1,894.57,480.51Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M887.26,477.45A94.27,94.27,0,0,1,877,500.31l5.68,3.62a100.76,100.76,0,0,0,11-24.55Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M893.71,479.38a101.14,101.14,0,0,1-11,24.55l1,.62a102.17,102.17,0,0,0,11.14-24.84Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M883.68,504.55l10.23,6.5a113.58,113.58,0,0,0,12.53-27.87l-11.62-3.47A102.17,102.17,0,0,1,883.68,504.55Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M877.41,499.65c-.5.92-1.14,1.73-1.7,2.59s-1.15,1.71-1.75,2.54l-1.91,2.41-.94,1.21c-.32.4-.69.76-1,1.14L868,511.81c-.67.77-1.46,1.41-2.18,2.13s-1.44,1.43-2.22,2.09l-2.36,2,4.22,5.24a78.83,78.83,0,0,0,17.63-20Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M883.12,503.21a78.77,78.77,0,0,1-17.62,20l.73.9a80.26,80.26,0,0,0,17.88-20.29Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M866.23,524.12l7.61,9.44a91.83,91.83,0,0,0,20.56-23.33l-10.29-6.4A80.26,80.26,0,0,1,866.23,524.12Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M861.86,517.49a82.67,82.67,0,0,1-21.42,12.64l2.6,6.21a89.6,89.6,0,0,0,23.1-13.65Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M866.14,522.69A89.6,89.6,0,0,1,843,536.34l.45,1.07a91,91,0,0,0,23.39-13.82Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M843.49,537.41l4.67,11.19,1.75-.71,1.73-.81,3.45-1.61c1.15-.54,2.26-1.19,3.39-1.78s2.27-1.18,3.37-1.85l3.29-2,1.64-1,1.59-1.12,3.16-2.27c1.06-.74,2-1.63,3.05-2.44l-7.7-9.36A91,91,0,0,1,843.49,537.41Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M841.17,529.83a146.94,146.94,0,0,1-24.85,7.73l1.47,6.57a152.82,152.82,0,0,0,26-8.1Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M843.81,536a152.85,152.85,0,0,1-26,8.11l.25,1.13a153.73,153.73,0,0,0,26.23-8.17Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M818,545.26l2.65,11.83A165.73,165.73,0,0,0,849,548.25l-4.75-11.16A153.73,153.73,0,0,1,818,545.26Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M817.12,537.37c-8.63,2-17.55,3.41-26.62,4.67l.92,6.67c9.17-1.28,18.27-2.72,27.19-4.77Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M818.61,543.93c-8.92,2.06-18,3.5-27.19,4.77l.16,1.15c9.18-1.27,18.32-2.72,27.29-4.78Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M791.58,549.85l1.67,12c9.35-1.3,18.82-2.79,28.32-5l-2.7-11.82C809.9,547.13,800.76,548.58,791.58,549.85Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M791.33,541.92c-9.05,1.25-18.33,2.43-27.43,3.51l.78,6.69c9.19-1.09,18.43-2.27,27.59-3.53Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M792.27,548.59c-9.16,1.26-18.4,2.44-27.59,3.53l.13,1.15c9.21-1.09,18.44-2.27,27.62-3.53Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M764.81,553.27l1.41,12c9.37-1.11,18.53-2.28,27.9-3.57l-1.69-12C783.25,551,774,552.18,764.81,553.27Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M764.74,545.33c-9.12,1.07-18.18,2-27.18,2.5l.39,6.73c9.19-.53,18.38-1.46,27.58-2.54Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M765.53,552c-9.2,1.08-18.39,2-27.58,2.53l.07,1.16c9.22-.53,18.43-1.46,27.64-2.54Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M738,555.71l.69,12.11c9.57-.55,19-1.51,28.37-2.61l-1.42-12C756.45,554.25,747.24,555.18,738,555.71Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M738.4,547.78a236.75,236.75,0,0,1-26.75.23l-.36,6.73a242.91,242.91,0,0,0,27.51-.24Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M738.8,554.5a245.26,245.26,0,0,1-27.51.24l-.06,1.15a242.81,242.81,0,0,0,27.64-.23Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M711.23,555.89,710.58,568a257.39,257.39,0,0,0,29-.23l-.73-12.11A242.81,242.81,0,0,1,711.23,555.89Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M712.47,548.05a154.8,154.8,0,0,1-26-3.35l-1.46,6.57a161.6,161.6,0,0,0,27.08,3.51Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M712.14,554.77a160.56,160.56,0,0,1-27.08-3.5l-.25,1.13a161,161,0,0,0,27.27,3.53Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M684.81,552.4l-2.64,11.84a173.76,173.76,0,0,0,29.32,3.8l.59-12.11A161,161,0,0,1,684.81,552.4Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M687.31,544.86a118.79,118.79,0,0,1-24.41-8.05l-2.79,6.13a125.36,125.36,0,0,0,25.77,8.5Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M685.88,551.44a126.17,126.17,0,0,1-25.77-8.5l-.48,1a126.48,126.48,0,0,0,26,8.58Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M659.63,544l-5,11a138.2,138.2,0,0,0,28.46,9.39l2.57-11.85A126.48,126.48,0,0,1,659.63,544Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M663.63,537.13a123.68,123.68,0,0,1-22.26-12.93l-4,5.43a129.79,129.79,0,0,0,23.48,13.64Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M660.88,543.27a129.79,129.79,0,0,1-23.48-13.64l-.68.94a130.24,130.24,0,0,0,23.69,13.76Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M636.72,530.57l-7.15,9.79a142.43,142.43,0,0,0,25.89,15l4.95-11.07A130.24,130.24,0,0,1,636.72,530.57Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M642,524.66a125.41,125.41,0,0,1-19.25-17.14l-5,4.54a131.32,131.32,0,0,0,20.28,18.06Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M638.09,530.12a131.92,131.92,0,0,1-20.29-18.06l-.86.78a132.74,132.74,0,0,0,20.47,18.22Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M616.94,512.84,608,521a145.54,145.54,0,0,0,22.34,19.89l7.09-9.84A132.74,132.74,0,0,1,616.94,512.84Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M623.31,508.1a121,121,0,0,1-15.37-20.61l-5.79,3.42a127.44,127.44,0,0,0,16.22,21.76Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M618.37,512.67a127.44,127.44,0,0,1-16.22-21.76l-1,.59a129,129,0,0,0,16.37,22Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M601.15,491.5l-10.44,6.17a141.1,141.1,0,0,0,17.9,24l8.91-8.23A129,129,0,0,1,601.15,491.5Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M608.35,488.17a130.65,130.65,0,0,1-11-23.51L591.05,467a137.91,137.91,0,0,0,11.52,24.66Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M602.57,491.63A138.24,138.24,0,0,1,591.05,467l-1.09.4a138.7,138.7,0,0,0,11.62,24.86Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M590,467.37l-11.39,4.15a150.55,150.55,0,0,0,12.61,26.94l10.4-6.23A138.7,138.7,0,0,1,590,467.37Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M597.65,465.43c-3.06-8.3-5.64-17-8.3-25.95l-6.45,1.92c2.65,8.92,5.27,17.78,8.44,26.37Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M591.34,467.76c-3.17-8.58-5.79-17.44-8.44-26.36l-1.11.33c2.65,8.92,5.27,17.8,8.46,26.44Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M581.79,441.73l-11.63,3.46c2.66,8.9,5.34,18,8.71,27.17l11.38-4.19C587.06,459.53,584.44,450.65,581.79,441.73Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M589.6,440.31c-2.67-8.92-5.38-18.06-8.82-27.2l-6.3,2.37c3.33,8.85,6,17.84,8.66,26.75Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M583.14,442.23c-2.65-8.91-5.33-17.91-8.66-26.75l-1.08.4c3.31,8.8,6,17.77,8.63,26.68Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M573.4,415.88,562,420.15c3.12,8.27,5.72,17,8.37,25.87L582,442.56C579.37,433.65,576.71,424.68,573.4,415.88Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M581.1,414c-.83-2.28-1.76-4.57-2.68-6.85-.47-1.14-1-2.29-1.5-3.44l-.76-1.73-.82-1.69A124.41,124.41,0,0,0,568,387l-5.67,3.63a129.23,129.23,0,0,1,12.48,25.67Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M574.79,416.29a130,130,0,0,0-12.49-25.66l-1,.63A127.81,127.81,0,0,1,573.7,416.7Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M561.32,391.26l-10.2,6.54a103.53,103.53,0,0,1,6.18,11.12l.7,1.44.65,1.47c.42,1,.87,1.94,1.28,2.94.82,2,1.65,4.06,2.4,6.15l11.37-4.22A127.81,127.81,0,0,0,561.32,391.26Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M568.49,387.78a116,116,0,0,0-9.08-12.39c-.8-1-1.73-1.94-2.59-2.9s-1.74-1.93-2.71-2.83l-2.83-2.73-3-2.59-4.29,5.2,2.78,2.37,2.61,2.52c.89.83,1.7,1.73,2.51,2.62s1.66,1.76,2.41,2.7a109.12,109.12,0,0,1,8.51,11.62Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M562.79,391.37a109.12,109.12,0,0,0-8.51-11.62c-.75-.94-1.61-1.8-2.41-2.7s-1.62-1.79-2.51-2.62l-2.61-2.52L544,369.54l-.74.89,2.73,2.33,2.57,2.5c.88.81,1.68,1.69,2.48,2.58s1.64,1.73,2.38,2.66A109.43,109.43,0,0,1,561.81,392Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M543.24,370.43l-7.71,9.36,2.28,1.95,2.18,2.11c.75.68,1.43,1.45,2.12,2.21s1.41,1.48,2,2.29a95.89,95.89,0,0,1,7.39,10.1L561.81,392a109.43,109.43,0,0,0-8.41-11.49c-.74-.93-1.59-1.77-2.38-2.66s-1.6-1.77-2.48-2.58l-2.57-2.5Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M549,365a37.78,37.78,0,0,0-3.11-2.5c-1.08-.8-2.14-1.6-3.24-2.38a76.27,76.27,0,0,0-7-4.15,73.51,73.51,0,0,0-7.51-3.38,69.54,69.54,0,0,0-8-2.3l-1.46,6.58a58.6,58.6,0,0,1,7.13,2,66.94,66.94,0,0,1,13.05,6.78c1,.7,2,1.44,3,2.16s1.92,1.5,2.84,2.29Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M544.66,370.12c-.92-.79-1.84-1.59-2.84-2.29s-2-1.46-3-2.16a67.07,67.07,0,0,0-6.33-3.75,67.85,67.85,0,0,0-6.73-3,60.4,60.4,0,0,0-7.13-2l-.25,1.13a60.93,60.93,0,0,1,7,2,68.45,68.45,0,0,1,6.59,3,66.69,66.69,0,0,1,6.21,3.68c1,.69,1.94,1.42,2.9,2.13a34,34,0,0,1,2.8,2.25Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M518.43,358l-2.62,11.84a46.65,46.65,0,0,1,5.4,1.53,50.2,50.2,0,0,1,5.19,2.36,53.83,53.83,0,0,1,5,2.94l2.38,1.76a27,27,0,0,1,2.32,1.86l7.82-9.26a34,34,0,0,0-2.8-2.25c-1-.71-1.92-1.44-2.9-2.13A66.69,66.69,0,0,0,532,363a68.45,68.45,0,0,0-6.59-3A60.93,60.93,0,0,0,518.43,358Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M521.14,350.5l-4.08-.88-4.18-.52a16.19,16.19,0,0,0-2.09-.15l-2.1-.07-2.09-.06-2.08.11a64.45,64.45,0,0,0-8.25.91l-4,.87c-1.34.3-2.62.75-3.94,1.13l2,6.42c1.18-.33,2.34-.75,3.54-1l3.61-.79a60.46,60.46,0,0,1,7.36-.81l1.85-.09c.62,0,1.24,0,1.86.05l1.86.06a12.7,12.7,0,0,1,1.85.14l3.7.45,3.63.78Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M519.58,357l-3.63-.78-3.7-.45a12.7,12.7,0,0,0-1.85-.14l-1.86-.06c-.62,0-1.24-.05-1.86-.05l-1.85.09a60.46,60.46,0,0,0-7.36.81l-3.61.79c-1.2.26-2.36.68-3.54,1l.35,1.11c1.16-.33,2.29-.74,3.47-1l3.54-.77a58.06,58.06,0,0,1,7.2-.79l1.82-.09c.6,0,1.21,0,1.81,0l1.82.06a12.15,12.15,0,0,1,1.81.13l3.62.45,3.55.76Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M490.67,359.37l3.62,11.57c.93-.26,1.84-.6,2.77-.8l2.79-.61a46.3,46.3,0,0,1,5.6-.61l1.4-.08c.46,0,.93,0,1.39.05l1.39,0a9.15,9.15,0,0,1,1.38.1l2.74.33,2.74.6,2.82-11.79-3.55-.76-3.62-.45a12.15,12.15,0,0,0-1.81-.13l-1.82-.06c-.6,0-1.21,0-1.81,0l-1.82.09a58.06,58.06,0,0,0-7.2.79l-3.54.77C493,358.63,491.83,359,490.67,359.37Z" transform="translate(-432.85 -317.81)"/>
    </g>
  
 



  </g>
  <g>
   
  </g>
</svg>



</body>
</html>

javascript

1 个回答

  1. Best Answer

    需要在 svg 之后放置按钮并~在 css 中使用以选择树下一层的元素

    #Слой_1:hover ~ [tooltip]::before,
#Слой_1:hover ~ [tooltip]::after,
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

    和其他地方一样

    <!DOCTYPE html>
<html>
<head>
	<title></title>
</head>

<style type="text/css">

	#cm51012{
		position: absolute;
	top:200px;
	left:300px;
	}
[tooltip] {
  position: relative; 

}


[tooltip]::before,
[tooltip]::after {
  text-transform: none; 
  font-size: .9em ; 


 
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; 
  z-index: 1001; 

}
[tooltip]::after {
  content: attr(tooltip); 
  

  

  

  
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
 	  text-align:center;
  position: absolute;
  padding: 5px;               
  font: 16px Arial;        
/*background: rgba(234, 214, 175, 0.95);  */



background: #000; 

color:#fff;

  
   border:solid 1px #fff;     
  border-radius: 5px;            
  pointer-events: none;
  
}

#Слой_1:hover ~ [tooltip]::before,
#Слой_1:hover ~ [tooltip]::after,
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}


[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  -webkit-transform: translate(-50%, -.5em);
          transform: translate(-50%, -.5em);
}


[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  -webkit-transform: translate(-50%, .5em);
          transform: translate(-50%, .5em);
}


[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  -webkit-transform: translate(-.5em, -50%);
          transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  -webkit-transform: translate(-.5em, -50%);
          transform: translate(-.5em, -50%);
}


[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  -webkit-transform: translate(.5em, -50%);
          transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  -webkit-transform: translate(.5em, -50%);
          transform: translate(.5em, -50%);
}


@-webkit-keyframes tooltips-vert {
  to {
   opacity: 1; 
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}
@keyframes tooltips-vert {
  to {
 opacity: 1;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}

@-webkit-keyframes tooltips-horz {
  to {
 opacity: 1;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}

@keyframes tooltips-horz {
  to {
opacity: 1;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}

#Слой_1:hover ~ [tooltip]:not([flow])::before,
#Слой_1:hover ~ [tooltip]:not([flow])::after,
#Слой_1:hover ~ [tooltip][flow^="up"]::before,
#Слой_1:hover ~ [tooltip][flow^="up"]::after,
#Слой_1:hover ~ [tooltip][flow^="down"]::before,
#Слой_1:hover ~ [tooltip][flow^="down"]::after,

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  -webkit-animation: tooltips-vert 300ms ease-out forwards;
          animation: tooltips-vert 300ms ease-out forwards;
}

#Слой_1:hover ~ [tooltip][flow^="left"]::before,
#Слой_1:hover ~ [tooltip][flow^="left"]::after,
#Слой_1:hover ~ [tooltip][flow^="right"]::before,
#Слой_1:hover ~ [tooltip][flow^="right"]::after,
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  -webkit-animation: tooltips-horz 300ms ease-out forwards;
          animation: tooltips-horz 300ms ease-out forwards;
}


#Слой_1{
	width: 100px;
	height: 100px;
}

</style>
<body>


<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 479.2 364.2">
  <defs>
    <style>
      .cls-1 {
        fill: #8399b1;
      }

      .cls-2 {
        fill: #c8d2d8;
      }

      .cls-3 {
        fill: #a0b3ca;
      }
    </style>
  </defs>
  <title>9</title>
  <g>
    <g>
      <path class="cls-1" d="M665.66,346.28l.12.4.16.49.33,1,.69,2c.46,1.32,1.08,2.57,1.64,3.85s1.29,2.45,1.94,3.67,1.47,2.31,2.21,3.46a61.18,61.18,0,0,0,10.72,11.68l4.36-5.13a54.31,54.31,0,0,1-9.55-10.39,43.9,43.9,0,0,1-6.15-12.9Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M672.12,344.4a43.62,43.62,0,0,0,6.16,12.91,54.55,54.55,0,0,0,9.55,10.38l.75-.88a53.22,53.22,0,0,1-9.35-10.17,42.6,42.6,0,0,1-6-12.56Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M688.58,366.81l7.86-9.24a41.21,41.21,0,0,1-7.24-7.84c-.45-.72-1-1.4-1.37-2.14s-.84-1.45-1.17-2.2-.7-1.5-1-2.27l-.4-1.16-.2-.58-.1-.29-.12-.4-11.64,3.39a42.6,42.6,0,0,0,6,12.56A53.22,53.22,0,0,0,688.58,366.81Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M682.75,372.19a92.48,92.48,0,0,0,25.49,15.31l2.57-6.22a86.2,86.2,0,0,1-23.63-14.16Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M687.18,367.12a86.2,86.2,0,0,0,23.63,14.16l.45-1.07a84.9,84.9,0,0,1-23.32-14Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M711.26,380.21,715.9,369a73.19,73.19,0,0,1-20-11.88l-8,9.13A84.9,84.9,0,0,0,711.26,380.21Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M707.41,387.15l3.36,1.36c1.12.44,2.23.81,3.35,1.21l3.35,1.19c.56.19,1.12.4,1.68.58l1.7.5c2.28.66,4.54,1.38,6.83,2l6.9,1.66L736,389A156.63,156.63,0,0,1,710,381Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M710,381A156.63,156.63,0,0,0,736,389l.24-1.13a155.28,155.28,0,0,1-25.74-8Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M736.23,387.9,738.78,376l-6-1.44c-2-.52-4-1.16-6-1.73l-1.49-.43c-.49-.16-1-.34-1.46-.51l-2.92-1c-1-.35-2-.67-2.91-1l-2.8-1.13-4.72,11.17A155.28,155.28,0,0,0,736.23,387.9Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M733.73,395.41a167,167,0,0,0,28.06,3.65l.3-6.73a160.38,160.38,0,0,1-26.91-3.49Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M735.18,388.84a159.36,159.36,0,0,0,26.91,3.49l0-1.15a160.08,160.08,0,0,1-26.71-3.47Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M762.14,391.18l.52-12.12a146.72,146.72,0,0,1-24.62-3.2l-2.61,11.85A160.08,160.08,0,0,0,762.14,391.18Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M760.92,399A159.84,159.84,0,0,0,789.18,398l-.82-6.68a152.61,152.61,0,0,1-27.11,1Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M761.25,392.31a153.56,153.56,0,0,0,27.11-1l-.14-1.15a152.33,152.33,0,0,1-26.92,1Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M788.22,390.14l-1.48-12a141.34,141.34,0,0,1-24.85.93l-.59,12.11A152.33,152.33,0,0,0,788.22,390.14Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M788.31,398.08A165.38,165.38,0,0,0,816,392.4L814.11,386a159.67,159.67,0,0,1-26.58,5.44Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M787.53,391.39A159.64,159.64,0,0,0,814.11,386l-.33-1.12a158.4,158.4,0,0,1-26.39,5.4Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M813.78,384.84l-3.47-11.62a145,145,0,0,1-24.33,5l1.41,12.05A158.4,158.4,0,0,0,813.78,384.84Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M815.2,392.64a168,168,0,0,0,26.4-10.36l-3-6a159.94,159.94,0,0,1-25.28,9.91Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M813.31,386.18a160.25,160.25,0,0,0,25.27-9.92l-.52-1A158.79,158.79,0,0,1,813,385.06Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M838.06,375.22l-5.42-10.84a147.79,147.79,0,0,1-23.07,9L813,385.06A158.79,158.79,0,0,0,838.06,375.22Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M840.82,382.67a220.22,220.22,0,0,0,24-14.06L861.14,363a215.12,215.12,0,0,1-23.31,13.63Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M837.83,376.63A212.55,212.55,0,0,0,861.14,363l-.64-1a212.38,212.38,0,0,1-23.18,13.56Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M860.5,362l-6.7-10.11A200.93,200.93,0,0,1,832,364.72l5.37,10.87A212.38,212.38,0,0,0,860.5,362Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M864.16,369.07c7.64-5,14.94-10.31,22.13-15.5l-3.94-5.46c-7.19,5.19-14.42,10.41-21.9,15.34Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M860.45,363.46c7.48-4.94,14.71-10.16,21.9-15.35l-.68-.94c-7.19,5.19-14.41,10.4-21.86,15.32Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M881.67,347.17l-7.1-9.83c-7.19,5.19-14.27,10.3-21.44,15l6.68,10.13C867.26,357.57,874.48,352.36,881.67,347.17Z" transform="translate(-432.85 -317.81)"/>
    </g>
  </g>
  <g>
    <g>
      <path class="cls-1" d="M871.4,351.61c3,8.81,5.91,17.54,8.61,26.26l6.43-2c-2.73-8.83-5.68-17.62-8.66-26.43Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M877.78,349.46c3,8.8,5.93,17.59,8.66,26.42l1.11-.34c-2.74-8.85-5.7-17.65-8.67-26.46Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M887.55,375.54,899.14,372c-2.8-9-5.8-17.94-8.77-26.76l-11.49,3.88C881.85,357.89,884.81,366.69,887.55,375.54Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M879.76,377.06c2.71,8.72,5.19,17.43,7.18,26.16l6.56-1.5c-2-9-4.56-17.83-7.31-26.66Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M886.19,375.06c2.74,8.83,5.27,17.7,7.31,26.66l1.13-.26c-2-9-4.58-17.9-7.33-26.74Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M894.63,401.46l11.82-2.71c-2.14-9.4-4.76-18.59-7.57-27.63l-11.58,3.6C890.05,383.56,892.58,392.46,894.63,401.46Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M886.75,402.42a213.11,213.11,0,0,1,4.5,26.21l6.69-.68a219.51,219.51,0,0,0-4.63-27.06Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M893.31,400.89A219.51,219.51,0,0,1,897.94,428l1.16-.11a221,221,0,0,0-4.66-27.21Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M899.1,427.84l12.06-1.22a233.33,233.33,0,0,0-4.91-28.74l-11.81,2.75A221,221,0,0,1,899.1,427.84Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M891.16,427.82q.32,3.29.56,6.55l.16,3.27.09,1.64,0,1.61,0,3.24c0,1.08,0,2.16-.07,3.23s-.05,2.16-.12,3.23l-.23,3.22,6.71.55a146,146,0,0,0-.47-27.25Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M897.85,427.12a145.92,145.92,0,0,1,.46,27.24l1.16.09A146.56,146.56,0,0,0,899,427Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M899.47,454.45l12.09,1,.27-3.74c.08-1.24.09-2.49.14-3.74s.1-2.49.08-3.74l0-3.73,0-1.87-.1-1.85-.19-3.69c-.18-2.46-.38-4.91-.63-7.35L899,427A146.56,146.56,0,0,1,899.47,454.45Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M891.66,453A112.11,112.11,0,0,1,887,478.2l6.44,2a119.07,119.07,0,0,0,4.92-26.65Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M898.38,453.52a119.64,119.64,0,0,1-4.92,26.65l1.11.34a120.25,120.25,0,0,0,5-26.91Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M894.57,480.51l11.59,3.56a132.94,132.94,0,0,0,5.47-29.56l-12.1-.91A120.25,120.25,0,0,1,894.57,480.51Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M887.26,477.45A94.27,94.27,0,0,1,877,500.31l5.68,3.62a100.76,100.76,0,0,0,11-24.55Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M893.71,479.38a101.14,101.14,0,0,1-11,24.55l1,.62a102.17,102.17,0,0,0,11.14-24.84Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M883.68,504.55l10.23,6.5a113.58,113.58,0,0,0,12.53-27.87l-11.62-3.47A102.17,102.17,0,0,1,883.68,504.55Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M877.41,499.65c-.5.92-1.14,1.73-1.7,2.59s-1.15,1.71-1.75,2.54l-1.91,2.41-.94,1.21c-.32.4-.69.76-1,1.14L868,511.81c-.67.77-1.46,1.41-2.18,2.13s-1.44,1.43-2.22,2.09l-2.36,2,4.22,5.24a78.83,78.83,0,0,0,17.63-20Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M883.12,503.21a78.77,78.77,0,0,1-17.62,20l.73.9a80.26,80.26,0,0,0,17.88-20.29Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M866.23,524.12l7.61,9.44a91.83,91.83,0,0,0,20.56-23.33l-10.29-6.4A80.26,80.26,0,0,1,866.23,524.12Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M861.86,517.49a82.67,82.67,0,0,1-21.42,12.64l2.6,6.21a89.6,89.6,0,0,0,23.1-13.65Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M866.14,522.69A89.6,89.6,0,0,1,843,536.34l.45,1.07a91,91,0,0,0,23.39-13.82Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M843.49,537.41l4.67,11.19,1.75-.71,1.73-.81,3.45-1.61c1.15-.54,2.26-1.19,3.39-1.78s2.27-1.18,3.37-1.85l3.29-2,1.64-1,1.59-1.12,3.16-2.27c1.06-.74,2-1.63,3.05-2.44l-7.7-9.36A91,91,0,0,1,843.49,537.41Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M841.17,529.83a146.94,146.94,0,0,1-24.85,7.73l1.47,6.57a152.82,152.82,0,0,0,26-8.1Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M843.81,536a152.85,152.85,0,0,1-26,8.11l.25,1.13a153.73,153.73,0,0,0,26.23-8.17Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M818,545.26l2.65,11.83A165.73,165.73,0,0,0,849,548.25l-4.75-11.16A153.73,153.73,0,0,1,818,545.26Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M817.12,537.37c-8.63,2-17.55,3.41-26.62,4.67l.92,6.67c9.17-1.28,18.27-2.72,27.19-4.77Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M818.61,543.93c-8.92,2.06-18,3.5-27.19,4.77l.16,1.15c9.18-1.27,18.32-2.72,27.29-4.78Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M791.58,549.85l1.67,12c9.35-1.3,18.82-2.79,28.32-5l-2.7-11.82C809.9,547.13,800.76,548.58,791.58,549.85Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M791.33,541.92c-9.05,1.25-18.33,2.43-27.43,3.51l.78,6.69c9.19-1.09,18.43-2.27,27.59-3.53Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M792.27,548.59c-9.16,1.26-18.4,2.44-27.59,3.53l.13,1.15c9.21-1.09,18.44-2.27,27.62-3.53Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M764.81,553.27l1.41,12c9.37-1.11,18.53-2.28,27.9-3.57l-1.69-12C783.25,551,774,552.18,764.81,553.27Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M764.74,545.33c-9.12,1.07-18.18,2-27.18,2.5l.39,6.73c9.19-.53,18.38-1.46,27.58-2.54Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M765.53,552c-9.2,1.08-18.39,2-27.58,2.53l.07,1.16c9.22-.53,18.43-1.46,27.64-2.54Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M738,555.71l.69,12.11c9.57-.55,19-1.51,28.37-2.61l-1.42-12C756.45,554.25,747.24,555.18,738,555.71Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M738.4,547.78a236.75,236.75,0,0,1-26.75.23l-.36,6.73a242.91,242.91,0,0,0,27.51-.24Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M738.8,554.5a245.26,245.26,0,0,1-27.51.24l-.06,1.15a242.81,242.81,0,0,0,27.64-.23Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M711.23,555.89,710.58,568a257.39,257.39,0,0,0,29-.23l-.73-12.11A242.81,242.81,0,0,1,711.23,555.89Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M712.47,548.05a154.8,154.8,0,0,1-26-3.35l-1.46,6.57a161.6,161.6,0,0,0,27.08,3.51Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M712.14,554.77a160.56,160.56,0,0,1-27.08-3.5l-.25,1.13a161,161,0,0,0,27.27,3.53Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M684.81,552.4l-2.64,11.84a173.76,173.76,0,0,0,29.32,3.8l.59-12.11A161,161,0,0,1,684.81,552.4Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M687.31,544.86a118.79,118.79,0,0,1-24.41-8.05l-2.79,6.13a125.36,125.36,0,0,0,25.77,8.5Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M685.88,551.44a126.17,126.17,0,0,1-25.77-8.5l-.48,1a126.48,126.48,0,0,0,26,8.58Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M659.63,544l-5,11a138.2,138.2,0,0,0,28.46,9.39l2.57-11.85A126.48,126.48,0,0,1,659.63,544Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M663.63,537.13a123.68,123.68,0,0,1-22.26-12.93l-4,5.43a129.79,129.79,0,0,0,23.48,13.64Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M660.88,543.27a129.79,129.79,0,0,1-23.48-13.64l-.68.94a130.24,130.24,0,0,0,23.69,13.76Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M636.72,530.57l-7.15,9.79a142.43,142.43,0,0,0,25.89,15l4.95-11.07A130.24,130.24,0,0,1,636.72,530.57Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M642,524.66a125.41,125.41,0,0,1-19.25-17.14l-5,4.54a131.32,131.32,0,0,0,20.28,18.06Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M638.09,530.12a131.92,131.92,0,0,1-20.29-18.06l-.86.78a132.74,132.74,0,0,0,20.47,18.22Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M616.94,512.84,608,521a145.54,145.54,0,0,0,22.34,19.89l7.09-9.84A132.74,132.74,0,0,1,616.94,512.84Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M623.31,508.1a121,121,0,0,1-15.37-20.61l-5.79,3.42a127.44,127.44,0,0,0,16.22,21.76Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M618.37,512.67a127.44,127.44,0,0,1-16.22-21.76l-1,.59a129,129,0,0,0,16.37,22Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M601.15,491.5l-10.44,6.17a141.1,141.1,0,0,0,17.9,24l8.91-8.23A129,129,0,0,1,601.15,491.5Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M608.35,488.17a130.65,130.65,0,0,1-11-23.51L591.05,467a137.91,137.91,0,0,0,11.52,24.66Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M602.57,491.63A138.24,138.24,0,0,1,591.05,467l-1.09.4a138.7,138.7,0,0,0,11.62,24.86Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M590,467.37l-11.39,4.15a150.55,150.55,0,0,0,12.61,26.94l10.4-6.23A138.7,138.7,0,0,1,590,467.37Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M597.65,465.43c-3.06-8.3-5.64-17-8.3-25.95l-6.45,1.92c2.65,8.92,5.27,17.78,8.44,26.37Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M591.34,467.76c-3.17-8.58-5.79-17.44-8.44-26.36l-1.11.33c2.65,8.92,5.27,17.8,8.46,26.44Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M581.79,441.73l-11.63,3.46c2.66,8.9,5.34,18,8.71,27.17l11.38-4.19C587.06,459.53,584.44,450.65,581.79,441.73Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M589.6,440.31c-2.67-8.92-5.38-18.06-8.82-27.2l-6.3,2.37c3.33,8.85,6,17.84,8.66,26.75Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M583.14,442.23c-2.65-8.91-5.33-17.91-8.66-26.75l-1.08.4c3.31,8.8,6,17.77,8.63,26.68Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M573.4,415.88,562,420.15c3.12,8.27,5.72,17,8.37,25.87L582,442.56C579.37,433.65,576.71,424.68,573.4,415.88Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M581.1,414c-.83-2.28-1.76-4.57-2.68-6.85-.47-1.14-1-2.29-1.5-3.44l-.76-1.73-.82-1.69A124.41,124.41,0,0,0,568,387l-5.67,3.63a129.23,129.23,0,0,1,12.48,25.67Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M574.79,416.29a130,130,0,0,0-12.49-25.66l-1,.63A127.81,127.81,0,0,1,573.7,416.7Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M561.32,391.26l-10.2,6.54a103.53,103.53,0,0,1,6.18,11.12l.7,1.44.65,1.47c.42,1,.87,1.94,1.28,2.94.82,2,1.65,4.06,2.4,6.15l11.37-4.22A127.81,127.81,0,0,0,561.32,391.26Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M568.49,387.78a116,116,0,0,0-9.08-12.39c-.8-1-1.73-1.94-2.59-2.9s-1.74-1.93-2.71-2.83l-2.83-2.73-3-2.59-4.29,5.2,2.78,2.37,2.61,2.52c.89.83,1.7,1.73,2.51,2.62s1.66,1.76,2.41,2.7a109.12,109.12,0,0,1,8.51,11.62Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M562.79,391.37a109.12,109.12,0,0,0-8.51-11.62c-.75-.94-1.61-1.8-2.41-2.7s-1.62-1.79-2.51-2.62l-2.61-2.52L544,369.54l-.74.89,2.73,2.33,2.57,2.5c.88.81,1.68,1.69,2.48,2.58s1.64,1.73,2.38,2.66A109.43,109.43,0,0,1,561.81,392Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M543.24,370.43l-7.71,9.36,2.28,1.95,2.18,2.11c.75.68,1.43,1.45,2.12,2.21s1.41,1.48,2,2.29a95.89,95.89,0,0,1,7.39,10.1L561.81,392a109.43,109.43,0,0,0-8.41-11.49c-.74-.93-1.59-1.77-2.38-2.66s-1.6-1.77-2.48-2.58l-2.57-2.5Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M549,365a37.78,37.78,0,0,0-3.11-2.5c-1.08-.8-2.14-1.6-3.24-2.38a76.27,76.27,0,0,0-7-4.15,73.51,73.51,0,0,0-7.51-3.38,69.54,69.54,0,0,0-8-2.3l-1.46,6.58a58.6,58.6,0,0,1,7.13,2,66.94,66.94,0,0,1,13.05,6.78c1,.7,2,1.44,3,2.16s1.92,1.5,2.84,2.29Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M544.66,370.12c-.92-.79-1.84-1.59-2.84-2.29s-2-1.46-3-2.16a67.07,67.07,0,0,0-6.33-3.75,67.85,67.85,0,0,0-6.73-3,60.4,60.4,0,0,0-7.13-2l-.25,1.13a60.93,60.93,0,0,1,7,2,68.45,68.45,0,0,1,6.59,3,66.69,66.69,0,0,1,6.21,3.68c1,.69,1.94,1.42,2.9,2.13a34,34,0,0,1,2.8,2.25Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M518.43,358l-2.62,11.84a46.65,46.65,0,0,1,5.4,1.53,50.2,50.2,0,0,1,5.19,2.36,53.83,53.83,0,0,1,5,2.94l2.38,1.76a27,27,0,0,1,2.32,1.86l7.82-9.26a34,34,0,0,0-2.8-2.25c-1-.71-1.92-1.44-2.9-2.13A66.69,66.69,0,0,0,532,363a68.45,68.45,0,0,0-6.59-3A60.93,60.93,0,0,0,518.43,358Z" transform="translate(-432.85 -317.81)"/>
    </g>
    <g>
      <path class="cls-1" d="M521.14,350.5l-4.08-.88-4.18-.52a16.19,16.19,0,0,0-2.09-.15l-2.1-.07-2.09-.06-2.08.11a64.45,64.45,0,0,0-8.25.91l-4,.87c-1.34.3-2.62.75-3.94,1.13l2,6.42c1.18-.33,2.34-.75,3.54-1l3.61-.79a60.46,60.46,0,0,1,7.36-.81l1.85-.09c.62,0,1.24,0,1.86.05l1.86.06a12.7,12.7,0,0,1,1.85.14l3.7.45,3.63.78Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-2" d="M519.58,357l-3.63-.78-3.7-.45a12.7,12.7,0,0,0-1.85-.14l-1.86-.06c-.62,0-1.24-.05-1.86-.05l-1.85.09a60.46,60.46,0,0,0-7.36.81l-3.61.79c-1.2.26-2.36.68-3.54,1l.35,1.11c1.16-.33,2.29-.74,3.47-1l3.54-.77a58.06,58.06,0,0,1,7.2-.79l1.82-.09c.6,0,1.21,0,1.81,0l1.82.06a12.15,12.15,0,0,1,1.81.13l3.62.45,3.55.76Z" transform="translate(-432.85 -317.81)"/>
      <path class="cls-3" d="M490.67,359.37l3.62,11.57c.93-.26,1.84-.6,2.77-.8l2.79-.61a46.3,46.3,0,0,1,5.6-.61l1.4-.08c.46,0,.93,0,1.39.05l1.39,0a9.15,9.15,0,0,1,1.38.1l2.74.33,2.74.6,2.82-11.79-3.55-.76-3.62-.45a12.15,12.15,0,0,0-1.81-.13l-1.82-.06c-.6,0-1.21,0-1.81,0l-1.82.09a58.06,58.06,0,0,0-7.2.79l-3.54.77C493,358.63,491.83,359,490.67,359.37Z" transform="translate(-432.85 -317.81)"/>
    </g>
  
 



  </g>
  <g>
   
  </g>
</svg>

<script type="text/javascript">
// создание кнопки
var btn950 = document.createElement('button'); // создание кнопки за кодом кнопки так как какая то ошибка 




btn950.id = 'cm51012'; // её id 

btn950.textContent = 'пуск'; // её текст


btn950.onclick = function() { // функция при клике на неё 




}

btn950.setAttribute("tooltip", "Уровень"); 



  document.body.appendChild(btn950);





var i9 = new Image();
var w9 = document.createElement('s9');
w9.appendChild(i9);

w9.id = 'Слой_1';




w9.setAttribute("tooltip3", "тест"); 

w9.setAttribute("flow", "down");


//i1.classList.add("zoom-on-hover4");

w9.classList.add("zoom-on-hover");

  document.body.appendChild(w9);


</script>


</body>
</html>

    • 3

相关问题