3

Столкнулся с непониманием, как сделать поворот определенной части сгруппированной svg части объекта. Приведу пример

.game_block {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.btn_gamePlay {
  width: 100vh;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  transition: 0.2s all;
}

.st7 {
  fill: #70203c;
}

.st8 {
  fill: #ef447e;
  stroke: #5e112d;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}

.za_rightArm__one {}

.za_rightArm__two {
  transition: .2s linear;
  transform-origin: 100% 40px;
  transform: rotate(0deg);
}

.game_block:hover .za_rightArm__two {
  transition: .2s linear;
  transform: rotate(35deg);
}
<div class="game_block">

  <button class="btn_gamePlay" type="button" title="Play">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                   viewBox="0 0 240 240">
                                    <path d="M171.5 182s11.5-.2 14.5-7.2 4.7-30 4.7-30l1.1-74.8s-.8-19.8-15.3-25.8-110.8 0-110.8 0S52.3 40 52 89.5s1.8 81.5 1.8 81.5 1 9.5 12.3 10.5 105.4.5 105.4.5z"
                                          fill="#ef457e" stroke="#5e102d" stroke-miterlimit="10" id="za_x5F_btn"/>
                                    <g id="za_rightArm">
                                        <g class="za_rightArm__one">
                                            <path class="st8"
                                                  d="M36.7 143.4s-3.3-6.9-3.9-12.4c-.3-3.3-.4-6-.4-7.6 0-1 .4-2 1.1-2.7.5-.5 1.2-1.2 2-2.2 2.1-2.4 4.4-5.2 4.4-6.9s-.6-2-1.1-1.8c-1.3.8-2.7 4.9-3.3 4.9s-3.4-13-3.4-13c-1.3-.6-1.7.3-1.7.3l.3 5.3c0 .8.2 1.5.4 2.2.4 1.2.9 3 .7 3.5-.3.8-.2 2.2-.9 1.3-.8-.8-3-5-3-5s-.5-.9-1.5-.1c-.5.4-.7 1.1-.5 1.7.1.5.3.7.5 1 .4.8-4.5-7-5.2-6.8-.7.2-.6.4-.3 1.7.3.9 5.9 12.2 5.9 12.2 1.2 2.2 2.3 5.3 3 7.8.7 2.5 3.1 14.1 3.1 14.1s3.1 9.8 3.5 9.9.3-7.4.3-7.4z"/>
                                            <path class="st8"
                                                  d="M29.1 115.5c.8-.4-.7-6.2-.5-6.6.3-.6.2-.6 1-.8.7-.2 1.1.2 1.1.2l.9 2.3c.4.9.5 2 .4 3 0 .4-.1.8-.3.9-.5.2-3.4-4.6-3.7-5-.3-.5-1-.5-1.3 0-.4.6-.6 1.4-.6 1.4l1.3 3.1c-.1-.1.9 1.9 1.7 1.5z"/>
                                        </g>
                                        <g class="za_rightArm__two">
                                        <path class="st8"
                                              d="M36.5 150.8s8.8-18.8 10.2-20.4c1.4-1.6 2.8-2.5 2.8-2.5l-.6-8.8s-11 17.3-12.4 23.1c-.1.5-.1.7-.1.7"/>
                                        <path id="shadowArm" class="st7"
                                              d="M49.5 119.8c-.1-.4-.6-.5-.8-.2-2.8 4.6-3.7 5.8-4.7 7.7 4.7-4.7 3-.3 2.8.1-.3.8-2.1 4.4-2.4 5.2-.9 2.1-2.2 4-3.8 7.9-.2.6-3.9 10-3.6 9.4 1.9-3.8 3.7-7.7 5.4-11.6l.2-.3c.5-.7 2.2-4.4 3-6.1.5-1.1 1.1-1.7 1.9-2.6.6-.5 1.8-2.1 2.4-2.6 2.1-1.9.2-4.6-.4-6.9z"/>
                                        </g>
                                        </g>
                               </svg>
                            </button>
</div>

Идея следующая. По наведению на область в которой находиться кнопка, SVG картинка выбрасывает руку вверх, при выходе из области hover опускает с предварительной задержкой. Пытаюсь понять, как в SVG задается transform-origin, но что-то пока не дошло. Пробовал читать но ясности не принесло. Как определить

руки svg вот эти вот точки объектов, а потом организовать правильный поворот. (Желательно что б оно ещё и FF работало, а то постоянно мне там баги лезут)

1
  • toster.ru/q/571234 я здесь 90% сделал на snap.svg.js но убрал rect а то мешает ...в ответе на мой вопрос есть реализация , ответом не дам ... 16 окт 2018 в 2:13

2 ответа 2

3

Понял, свою ошибку. Можно сделать и без привлечения сторонних библиотек. Просто надо правильно задавать контрольные точки и делать смещение

.game_block {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.btn_gamePlay {
  width: 100vh;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  transition: 0.2s all;
}

.st7 {
  fill: #70203c;
}

.st8 {
  fill: #ef447e;
  stroke: #5e112d;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}



.za_rightArm__one {
  transform-origin: 50px 100px;
  transition: .2s all;
  transform: translateX(0) translateY(0);
}

.game_block:hover .za_rightArm__one {
  transform-origin: 50px 100px;
 transition: .2s all;
  transform: translateX(-11px) translateY(-20px);
}

.za_rightArm__two {
  transform-origin: 50px 100px;
  transition: .2s all;
  transform: rotate(0deg) translateX(0) translateY(0);
}


.game_block:hover .za_rightArm__two {
  transform-origin: 50px 100px;
 transition: .2s all;
  transform: rotate(46deg) translateX(14px) translateY(-10px);
}
<div class="game_block">

  <button class="btn_gamePlay" type="button" title="Play">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                   viewBox="0 0 240 240">
                                    <path d="M171.5 182s11.5-.2 14.5-7.2 4.7-30 4.7-30l1.1-74.8s-.8-19.8-15.3-25.8-110.8 0-110.8 0S52.3 40 52 89.5s1.8 81.5 1.8 81.5 1 9.5 12.3 10.5 105.4.5 105.4.5z"
                                          fill="#ef457e" stroke="#5e102d" stroke-miterlimit="10" id="za_x5F_btn"/>
                                    <g id="za_rightArm">
                                        <g class="za_rightArm__one">
                                            <path class="st8"
                                                  d="M36.7 143.4s-3.3-6.9-3.9-12.4c-.3-3.3-.4-6-.4-7.6 0-1 .4-2 1.1-2.7.5-.5 1.2-1.2 2-2.2 2.1-2.4 4.4-5.2 4.4-6.9s-.6-2-1.1-1.8c-1.3.8-2.7 4.9-3.3 4.9s-3.4-13-3.4-13c-1.3-.6-1.7.3-1.7.3l.3 5.3c0 .8.2 1.5.4 2.2.4 1.2.9 3 .7 3.5-.3.8-.2 2.2-.9 1.3-.8-.8-3-5-3-5s-.5-.9-1.5-.1c-.5.4-.7 1.1-.5 1.7.1.5.3.7.5 1 .4.8-4.5-7-5.2-6.8-.7.2-.6.4-.3 1.7.3.9 5.9 12.2 5.9 12.2 1.2 2.2 2.3 5.3 3 7.8.7 2.5 3.1 14.1 3.1 14.1s3.1 9.8 3.5 9.9.3-7.4.3-7.4z"/>
                                            <path class="st8"
                                                  d="M29.1 115.5c.8-.4-.7-6.2-.5-6.6.3-.6.2-.6 1-.8.7-.2 1.1.2 1.1.2l.9 2.3c.4.9.5 2 .4 3 0 .4-.1.8-.3.9-.5.2-3.4-4.6-3.7-5-.3-.5-1-.5-1.3 0-.4.6-.6 1.4-.6 1.4l1.3 3.1c-.1-.1.9 1.9 1.7 1.5z"/>
                                        </g>
                                        <g class="za_rightArm__two">
                                        <path class="st8"
                                              d="M36.5 150.8s8.8-18.8 10.2-20.4c1.4-1.6 2.8-2.5 2.8-2.5l-.6-8.8s-11 17.3-12.4 23.1c-.1.5-.1.7-.1.7"/>
                                        <path id="shadowArm" class="st7"
                                              d="M49.5 119.8c-.1-.4-.6-.5-.8-.2-2.8 4.6-3.7 5.8-4.7 7.7 4.7-4.7 3-.3 2.8.1-.3.8-2.1 4.4-2.4 5.2-.9 2.1-2.2 4-3.8 7.9-.2.6-3.9 10-3.6 9.4 1.9-3.8 3.7-7.7 5.4-11.6l.2-.3c.5-.7 2.2-4.4 3-6.1.5-1.1 1.1-1.7 1.9-2.6.6-.5 1.8-2.1 2.4-2.6 2.1-1.9.2-4.6-.4-6.9z"/>
                                        </g>
                                        </g>
                               </svg>
                            </button>
</div>

3
  • 2
    Замечательно! Класс явно растёт. Я начал делать свой вариант, выглядит немного по другому и сделан наполовину - анимация только в одну сторону. Если хочешь, добавлю ответ 24 окт 2018 в 18:23
  • Спасибо, интересно будет посмотреть. Так же буду очень благодарен, если сможешь что-то с этой задачей присоветовать ru.stackoverflow.com/questions/893263/… Не знаю можно ли это сделать без сторонних библиотек. 24 окт 2018 в 19:09
  • я видел этот очень интересный вопрос и у нас и на Enso. Чисто теоретически есть несколько вариантов решения без сторонних библиотек, но сейчас у меня оч. сложный период со свободным временем. Как вернусь недельки через две, обязательно предложу свои варианты решения. 24 окт 2018 в 19:33
3

Вариант очень сырой, выкладываю по предложению автора вопроса.
Пример будет доработан.

Анимация начинается после клика по кнопке

.container {
width:75%;
height:75%;
}
.game_block {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.btn_gamePlay {
  width: 100vh;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  transition: 0.2s all;
}

.st7 {
  fill: #70203c;
}

.st8 {
  fill: #ef447e;
  stroke: #5e112d;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	   viewBox="0 0 240 240">
		<path id="za_x5F_btn" d="M171.5 182s11.5-.2 14.5-7.2 4.7-30 4.7-30l1.1-74.8s-.8-19.8-15.3-25.8-110.8 0-110.8 0S52.3 40 52 89.5s1.8 81.5 1.8 81.5 1 9.5 12.3 10.5 105.4.5 105.4.5z"
			  fill="#ef457e" stroke="#5e102d" stroke-miterlimit="10" />
		<g id="za_rightArm" transform="translate(0 0)">
			<g class="za_rightArm__one">
				<path class="st8"
					  d="M36.7 143.4s-3.3-6.9-3.9-12.4c-.3-3.3-.4-6-.4-7.6 0-1 .4-2 1.1-2.7.5-.5 1.2-1.2 2-2.2 2.1-2.4 4.4-5.2 4.4-6.9s-.6-2-1.1-1.8c-1.3.8-2.7 4.9-3.3 4.9s-3.4-13-3.4-13c-1.3-.6-1.7.3-1.7.3l.3 5.3c0 .8.2 1.5.4 2.2.4 1.2.9 3 .7 3.5-.3.8-.2 2.2-.9 1.3-.8-.8-3-5-3-5s-.5-.9-1.5-.1c-.5.4-.7 1.1-.5 1.7.1.5.3.7.5 1 .4.8-4.5-7-5.2-6.8-.7.2-.6.4-.3 1.7.3.9 5.9 12.2 5.9 12.2 1.2 2.2 2.3 5.3 3 7.8.7 2.5 3.1 14.1 3.1 14.1s3.1 9.8 3.5 9.9.3-7.4.3-7.4z"/>
				<path class="st8 finger"
					  d="M29.1 115.5c.8-.4-.7-6.2-.5-6.6.3-.6.2-.6 1-.8.7-.2 1.1.2 1.1.2l.9 2.3c.4.9.5 2 .4 3 0 .4-.1.8-.3.9-.5.2-3.4-4.6-3.7-5-.3-.5-1-.5-1.3 0-.4.6-.6 1.4-.6 1.4l1.3 3.1c-.1-.1.9 1.9 1.7 1.5z"/>
			<animateTransform id="an2" attributeName="transform" type="rotate" values="0 45 145;-45 45 145" dur="1s" begin="an1.end" fill="freeze" />
			</g>
			<g class="za_rightArm__two">
			<path class="st8"
				  d="M36.5 150.8s8.8-18.8 10.2-20.4c1.4-1.6 2.8-2.5 2.8-2.5l-.6-8.8s-11 17.3-12.4 23.1c-.1.5-.1.7-.1.7"/>
			<path id="shadowArm" class="st7"
				  d="M49.5 119.8c-.1-.4-.6-.5-.8-.2-2.8 4.6-3.7 5.8-4.7 7.7 4.7-4.7 3-.3 2.8.1-.3.8-2.1 4.4-2.4 5.2-.9 2.1-2.2 4-3.8 7.9-.2.6-3.9 10-3.6 9.4 1.9-3.8 3.7-7.7 5.4-11.6l.2-.3c.5-.7 2.2-4.4 3-6.1.5-1.1 1.1-1.7 1.9-2.6.6-.5 1.8-2.1 2.4-2.6 2.1-1.9.2-4.6-.4-6.9z"/>
			</g>
			<animateTransform id="an1" attributeName="transform" type="rotate" values="0 53 117;55 53 117" dur="1s" begin="za_x5F_btn.click" fill="freeze" />
			</g>
			
   </svg>
   </div>

1
  • 1
    У тя даже сырые ответы хороши...))) Привет...
    – Air
    24 окт 2018 в 19:59

Ваш ответ

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

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