Как правильно преобразовать элемент SVG (rotateX) - PullRequest
Новая
       31

Как правильно преобразовать элемент SVG (rotateX)

0 голосов
/ 10 июня 2019

Я попытался преобразовать элемент SVG с точки зрения и обнаружил, что он не работает, но те же преобразования в теги HTML работают правильно.

Эксперимент с jsfiddle: https://jsfiddle.net/5ms7ubck/ (преобразование html (красныйэлемент) VS svg (серый)).

Код SVG: 

<svg width="151px" height="151px" viewBox="0 0 151 151" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs></defs>
      <g class="outer" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <rect class="inner" width="150" height="150" fill="#D8D8D8"></rect>
      </g>
</svg>

Код CSS: 

.outer {
  perspective: 1000px;
}


.inner {
  transform: rotateX(60deg) perspective(1000px);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

Я хотел бы найти правильный способ преобразования SVGэлементы.Я также протестировал пример из SVG Rotation в 3D , и он тоже не работает.

Ответы [ 2 ]

1 голос
/ 11 июня 2019

Некоторые браузеры, такие как Firefox, поддерживают 3D-преобразования на фигурах SVG. Например, все, что вам нужно сделать, чтобы ваша первая скрипка заработала, если Firefox добавляет overflow: visible к элементу <svg>.

https://jsfiddle.net/gqsy14be/ (только Firefox)

Однако это экспериментальная функция, и сейчас вы не можете полагаться на поддержку кросс-браузера.

Но хорошая новость заключается в том, что внешние элементы <svg> обрабатываются как любой другой элемент HTML и могут иметь трехмерные преобразования. 

.test {
  display: block;
  width: 100px;
  margin: 20px;
}

.outer {
  perspective: 1000px;
}


.inner {
  transform: rotateX(60deg);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
<div class="test">
  <div class="outer">
    <svg width="151px" height="151px" viewBox="0 0 151 151" class="inner">
      <defs></defs>
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <rect width="150" height="150" fill="#D8D8D8"></rect>
      </g>
    </svg>
  </div>
</div>

<div class="test">
  <div class="outer">
    <div class="inner" style="background-color: red; width: 150px; height: 150px;">

    </div>
  </div>
</div>

Но, очевидно, это бесполезно для вас, когда вы пытаетесь создавать трехмерные тела в вашем SVG. Вы можете только преобразовать плоскость SVG.

0 голосов
/ 10 июня 2019

Поместите свойство transform в сам тег g.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

Перейдите по этой ссылке, чтобы решить вашу проблему

...