悬停时的SVG蒙版和动画

Question

我对SVG和面具不太好，我想知道是否可以在鼠标悬停时使用此动画？ （使用jquery或不使用） 我需要的： -Html文字 -SVG 3/4圈 - 背景是div背景 如果使用html文本是不可能的，那么svg中的曲线文本可能是可能的......

这是我想要实现的目标的图像：

Answer 1

无法找到你的字体，没有使用数学来准确。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;