БЛОГ НА HUSL


Как включить анимацию вращения при клике без js?

Автор вопроса: Александр_с

мне нужно что бы круг крутился и при клике останавливался и наоборот вот мой код

HTML

<div class="wrapper">
  <svg class="main" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 704 704">
    <defs>
      <!--sectors-->
      <path id="sector" d="M 685 245 c 0 0 -43 14 -98 32 c -7 3 -27 -6 -19 -20 c 7 -14 -8 -24 -19 -20 c -14 4 -16 22 -4 27 c 14 6 4 26 -2 28 c -88 28 -184 59 -190 62 c 0 -7 0 -109 0 -200 c 0 -7 -16 -22 -26 -11 c -9 10 -25 2 -25 -12 c 0 -12 15 -24 25 -12 c 11 12 26 -5 26 -12 c 0 -58 0 -103 0 -103 c 155 0 287 101 332 242 l 0 0 c 0 0 0 0 0 -1 z" />
      <!--gradientes-->
      <linearGradient id="linear-gradient_1">
        <stop offset="0%" stop-color="#007da4" />
        <stop offset="100%" stop-color="#02a0c7" />
      </linearGradient>
      <linearGradient id="linear-gradient_2">
        <stop offset="0%" stop-color="#093349" />
        <stop offset="100%" stop-color="#014e6c" />
      </linearGradient>
      <linearGradient id="linear-gradient_3">
        <stop offset="0%" stop-color="#911628" />
        <stop offset="100%" stop-color="#ae1c2f" />
      </linearGradient>
    </defs>
    <g>
      <g>
        <use xlink:href="#sector" class="sector_1"></use>
        <use xlink:href="#sector" class="sector_2"></use>
        <use xlink:href="#sector" class="sector_3"></use>
        <use xlink:href="#sector" class="sector_4"></use>
        <use xlink:href="#sector" class="sector_5"></use>
      </g>

      <g>
        <circle cx="352px" cy="352px" r="100px" class="circle" />
        <foreignObject class="text" x="40%" y="43%" width="20%" height="100%">
          <div class="text__tittle text__tittle-1">IMPACT</div>
          <div class="text__t text__t-1">US$ 270 million - annual savings possible fron scale-up of dolugravir-based regimens if</div>
        </foreignObject>
      </g>
      <g>
        <foreignObject width="100%" height="100%" x="0" y="0">
          <div class="content">
            <div class="content__item content__item-1">
              <div class="item__tittle">$55</div>
              <div class="item__text">annual target price of dolutegrvir regimen per person year in resource-limited settings</div>
            </div>
            <div class="content__item content__item-2">
              <div class="item__tittle">15M</div>
              <div class="item__text">number of people living with HIV without access to tratment</div>
            </div>
            <div class="content__item content__item-3">
              <div class="item__tittle">7 - 10</div>
              <div class="item__text">years historicaly taken to introduce pionering HIV treatments in Africa</div>
            </div>
            <div class="content__item content__item-4">
              <div class="item__tittle">3</div>
              <div class="item__text">number of years taken to introduce dolutegravir in Africa</div>
            </div>
            <div class="content__item content__item-5">
              <div class="item__tittle">94</div>
              <div class="item__text">number of countries who can access generic versions of dolutegravir</div>
            </div>
          </div>
        </foreignObject>
      </g>
    </g>
  </svg>
</div>

SCSS

.wrapper {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background-color: #093349;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  &.loaded {}
}

/* <ОСНОВНАЯ СЕТКА> */
.container {
  max-width: $mw + px;
  margin: 0 auto;
  width: 100%;

  @media (max-width: $md1+px) {
    max-width: 970px;
  }

  @media (max-width: $md2+px) {
    max-width: 750px;
  }

  @media (max-width: $md3+px) {
    max-width: none;
    padding: 0 10px;
  }
}

/* <ОСНОВНОЙ БЛОК> */
svg {
  width: 80vh;
}

#sector {
  stroke: #fff;
  stroke-width: 2;
}

.sector_1 {
  fill: url(#linear-gradient_1);
  transform-origin: 352px 350px;
  transform: rotate(0deg) translateX(-1px) translateY(-3px);
}

.sector_2 {
  fill: url(#linear-gradient_2);
  transform-origin: 352px 350px;
  transform: rotate(72deg) translateX(-1px) translateY(-3px);
}

.sector_3 {
  fill: url(#linear-gradient_3);
  transform-origin: 352px 350px;
  transform: rotate(144deg) translateX(-1px) translateY(-3px);
}

.sector_4 {
  fill: url(#linear-gradient_1);
  transform-origin: 352px 350px;
  transform: rotate(216deg) translateX(-1px) translateY(-3px);
}

.sector_5 {
  fill: url(#linear-gradient_2);
  transform-origin: 352px 350px;
  transform: rotate(288deg) translateX(-1px) translateY(-3px);
}

.circle {
  fill: #043e54;
  stroke: #fff;
  stroke-width: 2;
}

/* </ОСНОВНОЙ БЛОК> */

/* <ANIMATION(svg)> */
.main {
  animation: circle 5s infinite;
  animation-timing-function: linear;
  animation-play-state: running;
  /* animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335) */
}

.content__item,
.text {
  animation: content 5s infinite;
  animation-timing-function: linear;
  animation-play-state: running;
  /* animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335) */
}

@keyframes circle {
  0% {
    transform: rotate(0)
  }

  20% {
    transform: rotate(72deg)
  }

  40% {
    transform: rotate(144deg)
  }

  60% {
    transform: rotate(216deg)
  }

  80% {
    transform: rotate(288deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

@keyframes content {
  0% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(-72deg)
  }

  40% {
    transform: rotate(-144deg)
  }

  60% {
    transform: rotate(-216deg)
  }

  80% {
    transform: rotate(-288deg)
  }

  100% {
    transform: rotate(-360deg);
  }
}

/* <ANIMATION(text)> */

.text {
  fill: #fff;
  text-align: center;
  transform-origin: center center;
}

.text__t {
  line-height: 19px;
  font-weight: 300;
  opacity: 0.7;
}

.text__tittle {
  font-size: 33px;
  letter-spacing: 2.1px;
  font-weight: 700;

}

.text__tittle-1 {
  transform-origin: 49% 50%;
}


.content {
  text-align: center;

  &__item {
    max-width: 185px;
    position: absolute;
  }

  &__item-1 {
    top: 90px;
    left: 115px;
  }

  &__item-2 {
    top: 90px;
    left: 395px;
  }

  &__item-3 {
    top: 355px;
    left: 465px;
  }

  &__item-4 {
    top: 515px;
    left: 265px;
  }

  &__item-5 {
    top: 355px;
    left: 55px;
  }
}

.item {
  &__tittle {
    font-size: 33px;
    letter-spacing: 2.1px;
    font-weight: 700;
  }

  &__text {
    margin: 20px 0 0 0;
    line-height: 21px;
    font-weight: 300;
    opacity: 0.7;
  }
}

Источник

Ответы (3 шт):

Автор решения: Alexandr_TT

Изменил стили.
Весь текст перенесен внутрь SVG. Отказался от использования foreignObject, так это ненадежное решение и сильно всё запутывает.

Для отображения многострочного текста использован <tspan>

<!-- Мелкий текст под 7 - 10       --> 
        <text class="smallText" x="37" y="28">
          <tspan >years historicaly taken to</tspan> 
           <tspan x="37" y="30">introduce pionering HIV</tspan>
            <tspan x="37.5" y="32">treatments in Africa</tspan>
        </text>

Так как все элементы находятся внутри SVG, это гарантирует, что всё будет работать одинаково во всех современных браузерах, включая Edge/ Проверял на Версия 87.0.664.47 (Официальная сборка) (64-разрядная версия)

Вращение начинается при наведении курсора.

Смотрите комментарии в коде:

.container {
width:50vw;
height:50vh;
}
.sectorAnimate {
transform-origin: 27.2px 25.5px;

-webkit-transition: -webkit-transform 2s ease-in-out;
          transition: transform 2s ease-in-out;
}
.sectorAnimate:hover {
 -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
.impact, .bigText{
 font-family:sans-serif;
 font-size:2.5px; 
 font-weight:700;
 text-anchor:middle;
 fill:#fff;
}

.smallText {
 font-family:sans-serif;
 font-size:1px; 
 font-weight:300;
 fill:#fff;
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 54.2 54.2" preserveAspectRatio="xMinYMin meet" style="border:1px solid">
<defs>  
  <path  id="sector" d="m27.2 11.42c-0.06-0.34-0.28-0.49-0.51-0.63-0.25-0.15-0.57-0.22-0.86-0.16-0.3 0.06-0.41 0.41-0.74 0.52-0.25 0.09-0.67-0.05-0.89-0.27-0.61-0.6-0.53-1.3-0.05-1.76 0.22-0.21 0.65-0.42 1.04-0.22 0.26 0.13 0.43 0.46 0.71 0.49C26.26 9.44 26.67 9.28 26.92 9.01 27.15 8.76 27.2 8.03 27.2 8.03V1.21c0 0 0.94 0.02 1.4 0.06 1.32 0.12 2.65 0.26 3.94 0.54 1.24 0.27 2.47 0.65 3.66 1.1 1.14 0.43 2.28 0.91 3.33 1.54 1.44 0.86 2.78 1.89 4.01 3.02 1.3 1.2 2.47 2.54 3.52 3.96 0.84 1.14 1.66 2.33 2.2 3.64 0.84 2.02 0.83 2.09 1.15 3 0 0-6.91 2.18-7.18 2.18-0.31-0.01-0.49-0.11-0.69-0.25-0.14-0.1-0.28-0.24-0.33-0.42-0.16-0.52 0.06-0.51 0.14-1.15 0.04-0.34-0.26-0.7-0.57-0.85-0.37-0.18-0.9-0.16-1.23 0.08-0.35 0.24-0.57 0.75-0.49 1.17 0.09 0.51 0.97 0.62 1.09 1.13 0.06 0.28-0.17 0.54-0.26 0.81-0.11 0.33-0.59 0.52-0.59 0.52 0 0-4.31 1.4-6.87 2.32-2.19 0.7-3.72 1.28-6.19 1.94L27.2 11.88Z"/> 
 </defs>  
<rect   width="100%" height="100%" fill="#02212E" /> 
<g id="common" transform="translate(0, 1.2)" >

 <g class="sectorAnimate">
 <use xlink:href="#sector"  fill="#0089AA" stroke="white" stroke-width="0.4" /> 
   <use xlink:href="#sector" transform="rotate(72 27.2 25.5)" fill="#024157" stroke="white" stroke-width="0.4" /> 
      <use xlink:href="#sector" transform="rotate(144 27.2 25.5)" fill="#A2192B" stroke="white" stroke-width="0.4" />  
       <use xlink:href="#sector" transform="rotate(216 27.2 25.5)" fill="#0089AA" stroke="white" stroke-width="0.4" />  
         <use xlink:href="#sector" transform="rotate(288 27.2 25.5)" fill="#024157" stroke="white" stroke-width="0.4" />  
    
    <circle cx="27.2" cy="25.5" r="24.4" stroke="white" stroke-width="0.6"  fill="none" />       
      
       <text class="bigText" x="18" y="10">$55</text>     
        <text class="bigText" x="35" y="10">15M</text>   
         <text class="bigText" x="43" y="26">7 - 10</text>   
          <text class="bigText" x="12" y="28">94</text> 
            <text class="bigText" x="50%" y="38">3</text>    
  <!-- Мелкий текст под 7 - 10       --> 
        <text class="smallText" x="37" y="28">
          <tspan >years historicaly taken to</tspan> 
           <tspan x="37" y="30">introduce pionering HIV</tspan>
            <tspan x="37.5" y="32">treatments in Africa</tspan>
        </text> 
</g>        
  <g id="center"> 
         <!-- Центральная окружность -->
    <circle cx="27.2" cy="25.5" r="8.5" stroke="white" stroke-width="0.4" fill="#053D54" /> 
      <text class="impact" x="50%" y="44%">IMPACT</text>
      
      <!-- Мелкий текст под IMPACT       --> 
        <text class="smallText" x="20" y="25">
          <tspan dy="0">US$ 270 million - annual savings</tspan> 
           <tspan x="21.5" y="27">possible fron scale-up of</tspan>
            <tspan x="20.5" y="29">dolugravir-based regimens if</tspan>
        </text>   
</g>    
</g>     
        
</svg>
</div>

→ Ссылка
Автор решения: Alexandr_TT

Вариант анимации CSS ==> клик + Tooltip

Запуск анимации вращения реализован на технике переключения checkbox по клику в любом месте холста.
Добавлено появление подсказки при наведении на сектора, необходимо немного подождать :

    <g>
       <title>
270 миллионов долларов США
- возможная ежегодная экономия
за счет увеличения масштабов схем
на основе долугравира
       </title>      
    <circle cx="27.2" cy="25.5" r="8.5" stroke="white" stroke-width="0.4" fill="#053D54" /> 
    </g>


.container {
width:50vw;
height:50vh;
}
label {display: block;}
.a {display: hidden;}
input.a:checked ~  svg .sectorAnimate {
 transform:rotate(720deg);
}
.sectorAnimate {
transform-origin:27.2px 25.5px;
-webkit-transition: -webkit-transform 1.5s ease-in-out;
          transition: transform 1.5s ease-in-out;
}

.impact, .bigText{
 font-family:sans-serif;
 font-size:2.5px; 
 font-weight:700;
 text-anchor:middle;
 fill:#fff;
 
}

.smallText {
 font-family:sans-serif;
 font-size:1px; 
 font-weight:300;
 fill:#fff;
}
<div class="container">
<label class="a">
  <input type="checkbox" class="a">
  
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 54.2 54.2" preserveAspectRatio="xMinYMin meet">
<defs>  
  <path  id="sector" d="m27.2 11.42c-0.06-0.34-0.28-0.49-0.51-0.63-0.25-0.15-0.57-0.22-0.86-0.16-0.3 0.06-0.41 0.41-0.74 0.52-0.25 0.09-0.67-0.05-0.89-0.27-0.61-0.6-0.53-1.3-0.05-1.76 0.22-0.21 0.65-0.42 1.04-0.22 0.26 0.13 0.43 0.46 0.71 0.49C26.26 9.44 26.67 9.28 26.92 9.01 27.15 8.76 27.2 8.03 27.2 8.03V1.21c0 0 0.94 0.02 1.4 0.06 1.32 0.12 2.65 0.26 3.94 0.54 1.24 0.27 2.47 0.65 3.66 1.1 1.14 0.43 2.28 0.91 3.33 1.54 1.44 0.86 2.78 1.89 4.01 3.02 1.3 1.2 2.47 2.54 3.52 3.96 0.84 1.14 1.66 2.33 2.2 3.64 0.84 2.02 0.83 2.09 1.15 3 0 0-6.91 2.18-7.18 2.18-0.31-0.01-0.49-0.11-0.69-0.25-0.14-0.1-0.28-0.24-0.33-0.42-0.16-0.52 0.06-0.51 0.14-1.15 0.04-0.34-0.26-0.7-0.57-0.85-0.37-0.18-0.9-0.16-1.23 0.08-0.35 0.24-0.57 0.75-0.49 1.17 0.09 0.51 0.97 0.62 1.09 1.13 0.06 0.28-0.17 0.54-0.26 0.81-0.11 0.33-0.59 0.52-0.59 0.52 0 0-4.31 1.4-6.87 2.32-2.19 0.7-3.72 1.28-6.19 1.94L27.2 11.88Z"/> 
 </defs>  
<rect   width="100%" height="100%" fill="#02212E" /> 
<g id="common" transform="translate(0, 1.2)" >

 <g class="sectorAnimate" >
     <!-- Цветные сектора -->
 <g> 
  <title> 
15 Млн. - количество людей,   
 живущих с ВИЧ, 
 без доступа к лечению 
-----------------------
annual target price 
of dolutegrvir regimen 
per person year 
in resource-limited settings 
 </title>
 <use xlink:href="#sector"  fill="#0089AA" stroke="white" stroke-width="0.4" /> 
 </g>

<g> 
  <title> 
7-10 лет исторически потребовалось
для внедрения передовых методов
лечения ВИЧ в Африке
-----------------------
years historicaly taken
to introduce pionering HIV
treatments in Africa
 </title>
 
   <use xlink:href="#sector" transform="rotate(72 27.2 25.5)" fill="#024157" stroke="white" stroke-width="0.4" /> 
</g>   
  <g>
    <title>
3 - количество лет, 
необходимых для внедрения
долутегравира в Африке  
    </title>
      <use xlink:href="#sector" transform="rotate(144 27.2 25.5)" fill="#A2192B" stroke="white" stroke-width="0.4" /> 
  </g>  
  <g>
    <title>
94 - количество стран, 
которые могут получить доступ
к дженерикам долутегравира
    </title>  
       <use xlink:href="#sector" transform="rotate(216 27.2 25.5)" fill="#0089AA" stroke="white" stroke-width="0.4" />
  </g>
<g>  
  <title>
55$ - годовая целевая цена
схемы долутегрвира на человека в год
в условиях ограниченных ресурсов
    </title>  
         <use xlink:href="#sector" transform="rotate(288 27.2 25.5)" fill="#024157" stroke="white" stroke-width="0.4" />  
</g>         
    
    <circle cx="27.2" cy="25.5" r="24.4" stroke="white" stroke-width="0.6" fill="none"   />

         <!-- Крупный текст -->
       <text class="bigText" x="18" y="10">55$</text>     
        <text class="bigText" x="35" y="10">15M</text>   
         <text class="bigText" x="43" y="26">7 - 10</text>   
          <text class="bigText" x="12" y="28">94</text> 
            <text class="bigText" x="50%" y="38">3</text>   
        
  <!-- Мелкий текст под 7 - 10       --> 
      <g>
        <title>
7-10 лет исторически потребовалось
для внедрения передовых методов
лечения ВИЧ в Африке
        </title>
        <text class="smallText" x="37" y="28">
          <tspan >years historicaly taken to</tspan> 
           <tspan x="37" y="30">introduce pionering HIV</tspan>
            <tspan x="37.5" y="32">treatments in Africa</tspan>
        </text>  
    
</g>  
</g> <!-- end <g class="sectorAnimate" > -->  
    
  <g id="center"> 
         <!-- Центральная окружность --> 
    <g>
       <title>
270 миллионов долларов США
- возможная ежегодная экономия
за счет увеличения масштабов схем
на основе долугравира
       </title>      
    <circle cx="27.2" cy="25.5" r="8.5" stroke="white" stroke-width="0.4" fill="#053D54" /> 
    </g>
  <g>
       <title>
270 миллионов долларов США
- возможная ежегодная экономия
за счет увеличения масштабов схем
на основе долугравира
       </title>
      <text class="impact" x="50%" y="40%">IMPACT</text>
      
      <!-- Мелкий текст под IMPACT       --> 
        <text class="smallText" x="20" y="25">
          <tspan dy="0">US$ 270 million - annual savings</tspan> 
           <tspan x="21.5" y="27">possible fron scale-up of</tspan>
            <tspan x="20.5" y="29">dolugravir-based regimens if</tspan>
        </text>  
</g>        
  </g>       
    </g>   
        
</svg>
</label>
</div>

→ Ссылка
Автор решения: bot

Это можно реализовать с помощью псевдоелемента :active CSS:

    selector:active {
      styles;
    }
→ Ссылка

licensed under cc by-sa 3.0 with attribution.