SVG маска и анимация при наведении

29 сентября 2021, 10:20

Я не очень хорошо знаком с SVG и маской, и я хотел бы знать, возможно ли, чтобы анимация, как на картинке, была бы при наведении мыши? (с JQuery или без)

Что мне нужно: - Html-текст - SVG 3/4 окружности и Фон - это фон div. Если это невозможно с html-текстом, это, вероятно, было бы возможно с текстом в svg ...

Вот изображение того, чего я хочу достичь:

Answer 1

Не смог найти ваш шрифт, точнее не использовал математику.

var wipe_steps = [ 
  [1000, "0,0 500,0 500,500 0,500"], 
  [100,  "250,250 0,200 0,0 500,0 500,500 0,500 0,250"], 
  [100,  "250,250 0,100 0,0 500,0 500,500 0,500 0,250"], 
  [100,  "250,250 0,0 500,0 500,500 0,500 0,250"], 
  [100,  "250,250 100,0 500,0 500,500 0,500 0,250"], 
  [100,  "250,250 200,0 500,0 500,500 0,500 0,250"], 
  [100,  "250,250 250,0 500,0 500,500 0,500 0,250"], 
  [100,  "250,250 300,0 500,0 500,500 0,500 0,250"], 
  [100,  "250,250 400,0 500,0 500,500 0,500 0,250"], 
  [100,  "250,250 500,0 500,500 0,500 0,250"], 
  [100,  "250,250 500,100 500,500 0,500 0,250"], 
  [100,  "250,250 500,200 500,500 0,500 0,250"], 
  [100,  "250,250 500,250 500,500 0,500 0,250"], 
  [100,  "250,250 500,300 500,500 0,500 0,250"], 
  [100,  "250,250 500,400 500,500 0,500 0,250"], 
  [100,  "250,250 500,500 0,500 0,250"], 
  [100,  "250,250 400,500 0,500 0,250"], 
  [100,  "250,250 300,500 0,500 0,250"], 
  [100,  "250,250 250,500 0,500 0,250"], 
  [100,  "250,250 200,500 0,500 0,250"], 
  [100,  "250,250 100,500 0,500 0,250"], 
  [100,  "250,250 0,500 0,250"], 
  [100,  "250,250 0,400 0,250"], 
  [100,  "250,250 0,300 0,250"], 
  [3000,  ""] 
]; 
var wipe_step = 0; 
 
function wipe() { 
  wipe_step = wipe_step % wipe_steps.length; 
  $('#wiper').attr('points', wipe_steps[wipe_step][1]); 
  setTimeout(wipe, wipe_steps[wipe_step++][0]); 
} 
 
wipe();

#animation { 
  display: inline-block; 
  width: 500px; 
  height: 500px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div id="animation"> 
  <svg viewBox="0 0 500 500" width="500" height="500"> 
    <defs> 
      <mask id="mising_quad" x="0" y="0" width="500" height="500"  maskUnits="userSpaceOnUse"> 
        <rect x="0" y="0" width="500" height="500" fill="white" /> 
        <rect x="0" y="250" width="250" height="250" fill="black" /> 
      </mask> 
      <mask id="radial_wipe_mask" x="0" y="0" width="500" height="500" maskUnits="userSpaceOnUse"> 
        <rect x="0" y="0" width="500" height="500" fill="white" /> 
        <rect x="0" y="250" width="250" height="250" fill="black" /> 
        <rect x="100" y="250" width="150" height="100" fill="white" /> 
        <polygon id="wiper" points="" fill="black" /> 
      </mask> 
    </defs> 
    <rect x="0" y="0" width="500" height="500" fill="rgb(230, 230, 230)" /> 
    <circle cx="250" cy="250" r="200" fill="none" stroke="white" stroke-width="20" mask="url(#mising_quad)" /> 
    <text x="100" y="210" fill="white" font-family="'Lucida Bright',Georgia,serif" font-size="45" font-weight="bold">MESSAGES 
      <tspan x="100" y="270">AUX MEMBRES</tspan> 
      <tspan x="100" y="330">SOCI&Eacute;TAIRES</tspan> 
    </text> 
    <circle cx="250" cy="250" r="200" fill="none" stroke="rgb(27, 125, 189)" stroke-width="20" mask="url(#radial_wipe_mask)" /> 
    <text x="100" y="210" fill="rgb(27, 125, 189)" font-family="'Lucida Bright',Georgia,serif" font-size="45" font-weight="bold" mask="url(#radial_wipe_mask)">MESSAGES 
      <tspan x="100" y="270">AUX MEMBRES</tspan> 
      <tspan x="100" y="330">SOCI&Eacute;TAIRES</tspan> 
    </text> 
    Sorry, your browser does not support inline SVG. 
  </svg> 
</div>