4

У меня есть знак бесконечности в svg, у которого имеется анимация заполнения своего контура.

.black {
  stroke: black;
  fill: none;
  stroke-width: 20;
  stroke-dasharray: 923.0598754882812;
  animation: dash 5s ease 1;
}

.rainbow1 {
  stroke: url(#linear);
  fill: none;
  stroke-width: 20;
  stroke-dasharray: 923.0598754882812;
  animation: dash 5s ease 1;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 923.0598754882812;
  }
  50% {
    stroke-dashoffset: -923.0598754882812;
  }
  100% {
    stroke-dashoffset: -1846.119750976562;
  }
}
<svg width="625" height="600">
  <path class="black" d="M200 200
           Q250 100 400 200
           T600 200
           Q500 100 400 200
           T200 200"
    /> 
</svg>

<svg width="625" height="600">
  <defs>
   <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
     <stop offset="0%"   stop-color="#05a"/>
     <stop offset="50%"  stop-color="#a55"/>
     <stop offset="100%" stop-color="#0a5"/>
   </linearGradient>
 </defs>
 
  <path class="rainbow1" d="M200,210 
           Q275 100 400 200
           T600 200
           Q510 100 400 200
           T200 200"
        />
</svg>

Как сделать так, чтобы контур проходил только один (а не двойной) цикл и был с и имел более плавную и четкую форму без обрубка-стыка на конце. Вот такую:

    #infinity {
      position: relative;
      width: 212px;
      height: 100px;
      box-sizing: content-box;
    }
    #infinity:before,
    #infinity:after {
      content: "";
      box-sizing: content-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 60px;
      height: 60px;
      border: 20px solid black;
      border-radius: 50px 50px 0 50px;
      transform: rotate(-45deg);
    }
    #infinity:after {
      left: auto;
      right: 0;
      border-radius: 50px 50px 50px 0;
      transform: rotate(45deg);
    }
<div id="infinity"></div>

1

3 ответа 3

7

Так?

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path fill="none" d="M24.3,30C11.4,30,5,43.3,5,50s6.4,20,19.3,20c19.3,0,32.1-40,51.4-40 C88.6,30,95,43.3,95,50s-6.4,20-19.3,20C56.4,70,43.6,30,24.3,30z" stroke="#000" stroke-width="10" stroke-dasharray="0 256.588928222656257 0">
      <animate attributeName="stroke-dashoffset" values="0;256.58892822265625" dur="1" fill="freeze"></animate>
    </path>
  </svg>

11
  • поставил плюсик.Также хочу спросить можно объяснения к коду?
    – Randall
    12 фев 2019 в 9:12
  • Что именно не понятно?
    – Kvilios
    12 фев 2019 в 9:15
  • 1
    @Вася добавьте к тегу animate begin="3s" и анимация начнется через 3 секунды. Через JS также можете вызвать beginElement у элемента из DOM по своему событию (будь то скролл или клик).
    – Kvilios
    12 фев 2019 в 9:51
  • 1
    @Вася Оберните svg в объект, а затем можно использовать ф-ии $("#infinity-counter").show().beginElement();. Вот пример: jsfiddle.net/8jyx7w1u Из-за того, что браузер кэширует svg - анимация повторно не проигрывается. Такая обёртка помогает избежать этой проблемы.
    – Kvilios
    12 фев 2019 в 14:00
  • 1
    @Вася, да, я тупанул, его надо без обёртки jQuery вызывать, можно через getElementById("infinity-counter")[0].beginElement(); И желательно убрать id из самой svg
    – Kvilios
    12 фев 2019 в 14:18
7

Анимация симметричного заполнения фигур из одной точки

Подробно рассказано об этой оригинальной технике здесь. Смотрите вторую половину ответа.

Патч взял из ответа @Kvilios
Максимальная длина его - 257px. Половина - 128.5px Четверть пути - 64.2px. Эти цифры понадобятся для сдвига начала path командой stroke-dashoffset="128.5"

Пример заполнения фигуры из середины path

Обратите внимание, что фигура одновременно, симметрично заполняется из центра, пока края не сомкнутся.

body {background:#2F2F2F;}
.container 
{
 width:50%;
 height:50%;
 
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 20 100 100">
  
  <path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10"  />  

	<path id="path1" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="greenyellow" stroke-width="10" stroke-dashoffset="31.1" stroke-dasharray="0 128.5" >  
      <animate
	    xlink:href="#path1"
		attributeName="stroke-dasharray"
		values="0 128.5 0 128.5;0 0 257 0"
		begin="btn.click"
		dur="4s"
		fill="freeze"/> 
	</path> 
	
	<g id="btn" transform="translate(12 0)">
      <rect x="20" y="84" width="35" height="15" rx="5" fill="none" stroke="dodgerblue"/>
	     <text x="24" y="94" font-size="10" fill="crimson" >Центр</text>
    </g>
</svg>
</div>

Комплексный пример заполнения

Начать заполнение можно из любой точки фигуры, для этого надо сдвинуть начало рисования линии от начала с помощью изменения числового значения атрибута stroke-dashoffset

В приложении кнопка L, - запускает рисование с левого края

R - справа (right)

T - сверху (top)

C - центр (center)

B - снизу (bottom)

На эти обозначения ориентируйтесь при разборе кода id="btn_c", <path id="center"

.container
{
width:40%;
height:40%;  
 background:black;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 25 100 100">
  
  <path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10"  />  
       <!-- Средняя точка начала анимации в центре слева stroke-dashoffset="31.1" -->
	<path id="center" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="crimson" stroke-width="10" stroke-dashoffset="31.1" stroke-dasharray="0 128.5" >  
      <animate
        attributeName="stroke-dasharray"
        values="0 128.5 0 128.5;0 0 257 0"
        begin="btn_C.click"
        dur="4s"
        restart="whenNotActive" /> 
	</path> 
	  <!-- Средняя точка слева stroke-dashoffset="-159.5" -->
	    <path id="Left" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="yellowgreen" stroke-width="10" stroke-dashoffset="-159.5" stroke-dasharray="0 128.5" >  
      <animate
        attributeName="stroke-dasharray"
        values="0 128.5 0 128.5;0 0 257 0"
        begin="btn_L.click"
        dur="4s"
        restart="whenNotActive" /> 
	</path>  
	
	   <!-- Средняя точка слева сверху stroke-dashoffset="128.5" -->
	    <path id="Top" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="gold" stroke-width="10" stroke-dashoffset="128.5" stroke-dasharray="0 128.5" >  
      <animate
        attributeName="stroke-dasharray"
        values="0 128.5 0 128.5;0 0 257 0"
        begin="btn_T.click"
        dur="4s"
        restart="whenNotActive" /> 
	</path> 
	    <!-- Средняя точка справа внизу  stroke-dashoffset="192.7" -->
	 <path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="dodgerblue" stroke-width="10" stroke-dashoffset="192.7" stroke-dasharray="0 128.5" >  
      <animate
        attributeName="stroke-dasharray"
        values="0 128.5 0 128.5;0 0 257 0"
        begin="btn_B.click"
        dur="4s"
        restart="whenNotActive" /> 
	</path>   
	
	       <!-- Средняя точка справа   stroke-dashoffset="223.9" -->
	 <path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="purple" stroke-width="10" stroke-dashoffset="223.9" stroke-dasharray="0 128.5" >  
      <animate
        attributeName="stroke-dasharray"
        values="0 128.5 0 128.5;0 0 257 0"
        begin="btn_R.click"
        dur="4s"
        restart="whenNotActive" /> 
	</path> 
	
	
	
 <g id="btn_L" transform="translate(-17 0)" >
      <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
	     <text x="25" y="95" font-size="10" fill="green" >L</text>
    </g> 	
	<g id="btn_C" transform="translate(3 0)">
      <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
	     <text x="24" y="95" font-size="10" fill="crimson" >C</text>
    </g> 
	   
	    <g id="btn_T" transform="translate(23 0)" >
      <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="dodgerblue"/>
	     <text x="24" y="95" font-size="10" fill="orange" >T</text>
        </g>  
  <g id="btn_B" transform="translate(43 0)">
	<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
	 <text x="25" y="95" font-size="10" fill="dodgerblue" >B</text>
  </g>	  
      <g id="btn_R" transform="translate(63 0)">
	    <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
	      <text x="25" y="95" font-size="10" fill="purple" >R</text>
    </g>	
</svg>
</div>

LIVE DEMO

3
  • супер! Крутое объяснение! Поставил бы вам много плюсов или дополнительно к ответу выше засчитал, как еще один правильный ответ, но так уже нельзя.. Значит 100 плюсов вам в карму, всех благ!
    – Вася
    14 фев 2019 в 16:29
  • по ссылке перешел и так и сделал! Буду внимательно читать как все это правильно делается. Если встречу еще ваши хорошие ответы, то и там непременно сделаю тоже самое)
    – Вася
    14 фев 2019 в 16:36
  • @Вася Радуйся, если получил ответ Александра, ибо тебе никогда не придется задавать вопросы по этой теме :)
    – Ver Nick
    15 фев 2019 в 14:05
4

Почти не менял оригинальный код...

#infinity {
  position: relative;
  width: 212px;
  height: 100px;
  box-sizing: content-box;
  animation: clip-grow 4s;
}
#infinity:before,
#infinity:after {
  content: "";
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border: 20px solid black;
  border-radius: 50px 50px 0 50px;
  transform: rotate(-45deg);
}
#infinity:after {
  left: auto;
  right: 0;
  border-radius: 50px 50px 50px 0;
  transform: rotate(45deg);
}

@keyframes clip-grow {
 from{clip-path: circle(0px at 106px 50px);}
 to  {clip-path: circle(200px at 106px 50px);}
}
<div id="infinity"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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