1

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

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

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

введите сюда описание изображения

1

1 ответ 1

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>

5
  • Саша Салам из далёкого и солнечного Казахстана ! Скажи а текст должен выходить за рамку круга ? 23 окт 2019 в 9:54
  • @MaximLensky Привет Максим! Я думаю, что нет. И текст в примере не выходит за круговой бордюр. 23 окт 2019 в 9:58
  • dropbox.com/s/t388scpcndblgp8/ruso1.png - ваще вылазиет 23 окт 2019 в 10:04
  • @MaximLensky проверил в Chrome, FF, Edge всё нормально, а ты через что наблюдаешь данное безобразие :) 23 окт 2019 в 10:10
  • Лиса на 4К экране в Вин10 23 окт 2019 в 10:33

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.