Установить источник преобразования для группы внутри встроенного SVG в HTML / CSS? - PullRequest
Новая
       137

Установить источник преобразования для группы внутри встроенного SVG в HTML / CSS?

0 голосов
/ 06 августа 2020

Цель:

Фон с использованием встроенного SVG, потому что я хочу наложить эффекты :hover на определенные элементы шаблона. Каждый круг (.item) должен вращаться вокруг своего центра, чтобы круги на самом деле не двигались, но 3/4 с промежутком и меньшим кругом визуально вращаются.

Проблема:

Я устанавливаю transform-origin для каждого .item на center center, но это помещает начало координат в центр элемента <svg>. Следовательно, только самый средний .item вращается правильно, так как он действительно находится в центре элемента <svg>.

Есть ли способ установить transform-origin в центр каждого .item без необходимости устанавливать их вручную для каждого :nth-child? Я планирую иметь около 50 кругов, поэтому было бы неплохо, если бы я не устанавливал их вручную.

Мои подходить правильно в первую очередь? Или есть гораздо лучшее решение с использованием JS / jQuery?

Код: 

// BG TEST

// bg filled for better visibility
.bg {
  fill: #000;
}

.icon {
  fill: #D6D6D6;
}

.item:hover {
  animation: rotate-icon 1s infinite linear;
  transform-origin: center;
}

@keyframes rotate-icon {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
<html>
  <div class="testing-box">
        <svg version="1.1" id="test-bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="152" height="152">
            <g class="item">
                <rect class="bg" x="114.6" width="37.2" height="37.2"/>
                <path class="icon" d="M133.2,34.1c-8.5,0-15.5-7-15.5-15.5s7-15.5,15.5-15.5s15.5,7,15.5,15.5S141.7,34.1,133.2,34.1z
                     M133.2,4.1c-8,0-14.5,6.5-14.5,14.5s6.5,14.5,14.5,14.5s14.5-6.5,14.5-14.5S141.2,4.1,133.2,4.1z"/>
            </g>
            <g class="item">
                <rect class="bg" width="37.2" height="37.2"/>
                <path class="icon" d="M18.6,34.1c-8.5,0-15.5-7-15.5-15.5S10,3.1,18.6,3.1s15.5,7,15.5,15.5S27.1,34.1,18.6,34.1z
                     M18.6,4.1c-8,0-14.5,6.5-14.5,14.5s6.5,14.5,14.5,14.5s14.5-6.5,14.5-14.5S26.6,4.1,18.6,4.1z"/>
            </g>
            <g class="item">
                <rect class="bg" x="57.3" width="37.2" height="37.2"/>
                <path class="icon" d="M75.9,3.1c-8.2,0-15,6.5-15.5,14.6c-1.8,0.2-3.1,1.7-3.1,3.5c0,1.9,1.6,3.5,3.5,3.5s3.5-1.6,3.5-3.5
                    c0-1.7-1.2-3.2-2.9-3.4c0.5-7.6,6.8-13.6,14.5-13.6c8,0,14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5v1c8.5,0,15.5-7,15.5-15.5
                    S84.4,3.1,75.9,3.1z M63.3,21.1c0,1.4-1.1,2.5-2.5,2.5s-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5S63.3,19.8,63.3,21.1z"/>
            </g>
            <g class="item">
                <rect class="bg" x="114.6" y="57.3" width="37.2" height="37.2"/>
                <path class="icon" d="M133.2,91.4c-8.5,0-15.5-7-15.5-15.5s7-15.5,15.5-15.5s15.5,7,15.5,15.5S141.7,91.4,133.2,91.4z
                     M133.2,61.4c-8,0-14.5,6.5-14.5,14.5s6.5,14.5,14.5,14.5s14.5-6.5,14.5-14.5S141.2,61.4,133.2,61.4z"/>
            </g>
            <g class="item">
                <rect class="bg" x="57.3" y="57.3" width="37.2" height="37.2"/>
                <path class="icon" d="M75.9,91.4c-8.5,0-15.5-7-15.5-15.5s7-15.5,15.5-15.5s15.5,7,15.5,15.5S84.4,91.4,75.9,91.4z
                     M75.9,61.4c-8,0-14.5,6.5-14.5,14.5s6.5,14.5,14.5,14.5s14.5-6.5,14.5-14.5S83.9,61.4,75.9,61.4z"/>
            </g>
            <g class="item">
                <rect class="bg" x="57.3" y="114.6" width="37.2" height="37.2"/>
                <path class="icon" d="M75.9,148.7c-8.5,0-15.5-7-15.5-15.5s7-15.5,15.5-15.5s15.5,7,15.5,15.5S84.4,148.7,75.9,148.7z
                     M75.9,118.7c-8,0-14.5,6.5-14.5,14.5s6.5,14.5,14.5,14.5s14.5-6.5,14.5-14.5S83.9,118.7,75.9,118.7z"/>
            </g>
            <g class="item">
                <rect class="bg" y="114.6" width="37.2" height="37.2"/>
                <path class="icon" d="M18.6,148.7c-8.5,0-15.5-7-15.5-15.5s7-15.5,15.5-15.5s15.5,7,15.5,15.5S27.1,148.7,18.6,148.7z
                     M18.6,118.7c-8,0-14.5,6.5-14.5,14.5s6.5,14.5,14.5,14.5s14.5-6.5,14.5-14.5S26.6,118.7,18.6,118.7z"/>
            </g>
            <g class="item">
                
                <rect class="bg" x="114.6" y="114.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 266.3807 4.868558e-06)" width="37.2" height="37.2"/>
                <path class="icon" d="M148.7,133.2c0-8.2-6.5-15-14.6-15.5c-0.2-1.8-1.7-3.1-3.5-3.1c-1.9,0-3.5,1.6-3.5,3.5
                    s1.6,3.5,3.5,3.5c1.7,0,3.2-1.2,3.4-2.9c7.6,0.5,13.6,6.8,13.6,14.5c0,8-6.5,14.5-14.5,14.5s-14.5-6.5-14.5-14.5h-1
                    c0,8.5,7,15.5,15.5,15.5S148.7,141.7,148.7,133.2z M130.6,120.6c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
                    S132,120.6,130.6,120.6z"/>
            </g>
            <g class="item">
                
                <rect class="bg" y="57.3" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 37.1911 151.7859)" width="37.2" height="37.2"/>
                <path class="icon" d="M18.6,91.4c8.2,0,15-6.5,15.5-14.6c1.8-0.2,3.1-1.7,3.1-3.5c0-1.9-1.6-3.5-3.5-3.5s-3.5,1.6-3.5,3.5
                    c0,1.7,1.2,3.2,2.9,3.4c-0.5,7.6-6.8,13.6-14.5,13.6c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5v-1c-8.5,0-15.5,7-15.5,15.5
                    S10.1,91.4,18.6,91.4z M31.2,73.3c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5s-1.1,2.5-2.5,2.5S31.2,74.7,31.2,73.3z"/>
            </g>
        </svg>
    </div>
</html>

1 Ответ

0 голосов
/ 06 августа 2020

На всякий случай, если кто-то наткнется на этот вопрос с той же проблемой: Благодаря комментарию @Paulie_D это было легко исправить.

Все, что было необходимо, это следующее CSS: .item { transform-box: fill-box; }

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...