Эквивалент transform3d в SVG-преобразованиях - PullRequest
Новая
       2

Эквивалент transform3d в SVG-преобразованиях

0 голосов
/ 28 августа 2018

Этот вопрос говорит мне, что transform3d из CSS не поддерживается в SVG: 3d-преобразования для элемента SVG

Но комментатор в ответах предполагает, что комбинация SVG-нативных преобразований rotate() и scale() может использоваться для имитации эффекта.

Вот мое демо SVG: 

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle1" cx="50" cy="50" r="40" stroke="red" fill="grey" />
  <circle id="circle2" cx="150" cy="50" r="4" stroke="red" fill="grey" />
</svg>

Можно ли имитировать эффект применения CSS transform3d(1.05, 1.05, 1.05) к #circle1, изменяя атрибуты transform элемента SVG circle? Какова будет математическая связь между x,y,z из transform3d и 5 параметрами комбинированного поворота и масштаба? Или, возможно, это невозможно?

1 Ответ

0 голосов
/ 26 апреля 2019

Функция transform теперь работает так же, как и в CSS, но в справочном материале отмечены различия в синтаксисе между ними, и проблемы могут существовать, то есть никаких гарантий. Наведите курсор мыши на блок для примера rotate3d в этом фрагменте: 

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 10;
    }
        
    @keyframes transform {
        from {transform:perspective(800px) rotate3d(1,0,0,-95deg)}
        to {transform:perspective(800px) rotate3d(1,0,0, 0deg)}
    }
        
    #thing:active {
            animation: transform .8s steps(100) both;
            transform-origin: 0% 90%;
    }
    <html>
    <head>
       <link href="seat2.css" rel="stylesheet" />
    </head>
    
    <svg id="thing" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px" viewBox="0 0 150 150">
        <rect width="100" height="100"/>
    </svg>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...