БЛОГ НА HUSL


Поворот конкретного пути в svg

Автор вопроса: Дмитрий Варзанов 

  .hd-quality {
    position: absolute;
    top: 10px;
    right: 5px;
    height: 9px;
    width: 13px;
    background-color: #f00;
    border-radius: 1px;
    z-index: 2;
  }
<button style="height: 50px; width: 50px; position: relative;">
    
  <svg class="cnt_p setti" data-type="menusetting" data-pr="open" viewBox="0 0 36 36" aria-expanded="false">
    <g xmlns="http://www.w3.org/2000/svg" id="g21" transform="translate(18.145006,4.703971)" style="
">
      <path fill-rule="evenodd" fill-opacity="0.6471" fill="#000000" d="M 5,7 H 6 V 8 H 5 Z M 10,3 V 4 H 8 V 3 Z M 3,6 V 5 H 5 V 6 Z M 2,7 H 3 V 8 H 2 Z m 5,0 h 3 V 8 H 7 Z m 3,-1 h 1 v 1 h -1 z" id="path9" style="
    fill: red;
"></path>
      <path fill-rule="evenodd" fill="#ffffff" d="M 5,7 V 6 5 H 3 V 6 7 H 2 V 2 H 3 V 4 H 5 V 2 H 6 V 7 Z M 11,6 H 10 V 7 H 7 V 2 h 3 v 1 h 1 z M 10,4 V 3 H 8 v 1 2 h 2 z" id="path11" style="
    fill: red;
"></path>
    </g>
          <path d="m 23.94,18.78 c .03,-0.25 .05,-0.51 .05,-0.78 0,-0.27 -0.02,-0.52 -0.05,-0.78 l 1.68,-1.32 c .15,-0.12 .19,-0.33 .09,-0.51 l -1.6,-2.76 c -0.09,-0.17 -0.31,-0.24 -0.48,-0.17 l -1.99,.8 c -0.41,-0.32 -0.86,-0.58 -1.35,-0.78 l -0.30,-2.12 c -0.02,-0.19 -0.19,-0.33 -0.39,-0.33 l -3.2,0 c -0.2,0 -0.36,.14 -0.39,.33 l -0.30,2.12 c -0.48,.2 -0.93,.47 -1.35,.78 l -1.99,-0.8 c -0.18,-0.07 -0.39,0 -0.48,.17 l -1.6,2.76 c -0.10,.17 -0.05,.39 .09,.51 l 1.68,1.32 c -0.03,.25 -0.05,.52 -0.05,.78 0,.26 .02,.52 .05,.78 l -1.68,1.32 c -0.15,.12 -0.19,.33 -0.09,.51 l 1.6,2.76 c .09,.17 .31,.24 .48,.17 l 1.99,-0.8 c .41,.32 .86,.58 1.35,.78 l .30,2.12 c .02,.19 .19,.33 .39,.33 l 3.2,0 c .2,0 .36,-0.14 .39,-0.33 l .30,-2.12 c .48,-0.2 .93,-0.47 1.35,-0.78 l 1.99,.8 c .18,.07 .39,0 .48,-0.17 l 1.6,-2.76 c .09,-0.17 .05,-0.39 -0.09,-0.51 l -1.68,-1.32 0,0 z m -5.94,2.01 c -1.54,0 -2.8,-1.25 -2.8,-2.8 0,-1.54 1.25,-2.8 2.8,-2.8 1.54,0 2.8,1.25 2.8,2.8 0,1.54 -1.25,2.8 -2.8,2.8 l 0,0 z" style="
"></path>
  </svg>

</button>

Как применить свойство

transform: rotateZ(30deg);

К шестиренке так, чтобы во первых иконка оставалась на месте. Во вторых, чтобы значёк HD не затрагивало данное свойство.


Источник

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

Автор решения: Daniil Loban

Чтобы повернуть часть svg можно либо добавить ей id либо использовать соответствующий селектор, в данном случае я использую селектор (путь содержащий d как свойство) Помимо этого необходимо выбрать точку трансформации (что считать центром при вращении), экспериментальным путем выяснилось, что эта точка находится в позиции: 18, 18.

.hd-quality {
    position: absolute;
    top: 10px;
    right: 5px;
    height: 9px;
    width: 13px;
    background-color: #f00;
    border-radius: 1px;
    z-index: 2;
  }
  

svg > path[d]{
  transform-origin: 18px 18px;
  transform: rotateZ(30deg);
}
<button style="height: 50px; width: 50px; position: relative;">
    
  <svg class="cnt_p setti" data-type="menusetting" data-pr="open" viewBox="0 0 36 36" aria-expanded="false">
    <g xmlns="http://www.w3.org/2000/svg" id="g21" transform="translate(18.145006,4.703971)" style="
">
      <path fill-rule="evenodd" fill-opacity="0.6471" fill="#000000" d="M 5,7 H 6 V 8 H 5 Z M 10,3 V 4 H 8 V 3 Z M 3,6 V 5 H 5 V 6 Z M 2,7 H 3 V 8 H 2 Z m 5,0 h 3 V 8 H 7 Z m 3,-1 h 1 v 1 h -1 z" id="path9" style="
    fill: red;
"></path>
      <path fill-rule="evenodd" fill="#ffffff" d="M 5,7 V 6 5 H 3 V 6 7 H 2 V 2 H 3 V 4 H 5 V 2 H 6 V 7 Z M 11,6 H 10 V 7 H 7 V 2 h 3 v 1 h 1 z M 10,4 V 3 H 8 v 1 2 h 2 z" id="path11" style="
    fill: red;
"></path>
    </g>
          <path id='sz' d="m 23.94,18.78 c .03,-0.25 .05,-0.51 .05,-0.78 0,-0.27 -0.02,-0.52 -0.05,-0.78 l 1.68,-1.32 c .15,-0.12 .19,-0.33 .09,-0.51 l -1.6,-2.76 c -0.09,-0.17 -0.31,-0.24 -0.48,-0.17 l -1.99,.8 c -0.41,-0.32 -0.86,-0.58 -1.35,-0.78 l -0.30,-2.12 c -0.02,-0.19 -0.19,-0.33 -0.39,-0.33 l -3.2,0 c -0.2,0 -0.36,.14 -0.39,.33 l -0.30,2.12 c -0.48,.2 -0.93,.47 -1.35,.78 l -1.99,-0.8 c -0.18,-0.07 -0.39,0 -0.48,.17 l -1.6,2.76 c -0.10,.17 -0.05,.39 .09,.51 l 1.68,1.32 c -0.03,.25 -0.05,.52 -0.05,.78 0,.26 .02,.52 .05,.78 l -1.68,1.32 c -0.15,.12 -0.19,.33 -0.09,.51 l 1.6,2.76 c .09,.17 .31,.24 .48,.17 l 1.99,-0.8 c .41,.32 .86,.58 1.35,.78 l .30,2.12 c .02,.19 .19,.33 .39,.33 l 3.2,0 c .2,0 .36,-0.14 .39,-0.33 l .30,-2.12 c .48,-0.2 .93,-0.47 1.35,-0.78 l 1.99,.8 c .18,.07 .39,0 .48,-0.17 l 1.6,-2.76 c .09,-0.17 .05,-0.39 -0.09,-0.51 l -1.68,-1.32 0,0 z m -5.94,2.01 c -1.54,0 -2.8,-1.25 -2.8,-2.8 0,-1.54 1.25,-2.8 2.8,-2.8 1.54,0 2.8,1.25 2.8,2.8 0,1.54 -1.25,2.8 -2.8,2.8 l 0,0 z" style="
"></path>
  </svg>
</button>

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

Решение с помощью transition: transform .8s

При наведении шестеренка вращается по часовой стрелке, при уводе курсора,- против часовой

Для адаптивности svg обернут в родительский блок .container, которому присвоены относительные единицы ширины и высоты

.container {
width:20vw;
height:20vh;
}
#svg1  #path{
    transform-origin: 18px 18px;
    -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:  transform .8s ease-in-out;   
  }
  #svg1:hover  #path{
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
<div class="container">
<svg id="svg1" viewBox="0 0 36 36">
  <path id="path" d="m 23.94,18.78 c .03,-0.25 .05,-0.51 .05,-0.78 0,-0.27 -0.02,-0.52 -0.05,-0.78 l 1.68,-1.32 c .15,-0.12 .19,-0.33 .09,-0.51 l -1.6,-2.76 c -0.09,-0.17 -0.31,-0.24 -0.48,-0.17 l -1.99,.8 c -0.41,-0.32 -0.86,-0.58 -1.35,-0.78 l -0.30,-2.12 c -0.02,-0.19 -0.19,-0.33 -0.39,-0.33 l -3.2,0 c -0.2,0 -0.36,.14 -0.39,.33 l -0.30,2.12 c -0.48,.2 -0.93,.47 -1.35,.78 l -1.99,-0.8 c -0.18,-0.07 -0.39,0 -0.48,.17 l -1.6,2.76 c -0.10,.17 -0.05,.39 .09,.51 l 1.68,1.32 c -0.03,.25 -0.05,.52 -0.05,.78 0,.26 .02,.52 .05,.78 l -1.68,1.32 c -0.15,.12 -0.19,.33 -0.09,.51 l 1.6,2.76 c .09,.17 .31,.24 .48,.17 l 1.99,-0.8 c .41,.32 .86,.58 1.35,.78 l .30,2.12 c .02,.19 .19,.33 .39,.33 l 3.2,0 c .2,0 .36,-0.14 .39,-0.33 l .30,-2.12 c .48,-0.2 .93,-0.47 1.35,-0.78 l 1.99,.8 c .18,.07 .39,0 .48,-0.17 l 1.6,-2.76 c .09,-0.17 .05,-0.39 -0.09,-0.51 l -1.68,-1.32 0,0 z m -5.94,2.01 c -1.54,0 -2.8,-1.25 -2.8,-2.8 0,-1.54 1.25,-2.8 2.8,-2.8 1.54,0 2.8,1.25 2.8,2.8 0,1.54 -1.25,2.8 -2.8,2.8 l 0,0 z" style="fill: #141414;"></path>
  <rect style="fill:#ff0000" width="13" height="9" x="19" y="5"></rect>
  <text x="20.2" y="11.7" style="fill: white;letter-spacing: .5px;font-size: 7px;">HD</text>
</svg>
</div>

С помощью этой техники можно вращать и растровые картинки

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

img {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
<img src="http://i.imgur.com/3DWAbmN.jpg" />

→ Ссылка

licensed under cc by-sa 3.0 with attribution.