CODEWITHSUNDEEP
csssvgcss-transforms
Aleksandr Gorin
Aleksandr Gorin

Reputation: 27

What is right way to transform SVG element (rotateX)?

I tried to transform the SVG element with perspective and discovered that it does not work, but the same transformations to HTML tags work correctly.

Experiment on jsfiddle: https://jsfiddle.net/5ms7ubck/ (html transformation (red element) VS svg (gray)).

.outer {
  perspective: 1000px;
}

.inner {
  transform: rotateX(60deg) perspective(1000px);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
<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>

I would like to find the right way to transform SVG elements. I also tested an example from SVG Rotation in 3D and it isn't working too.

Upvotes: 0

Views: 740

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101830

Some browsers, like Firefox, have support for 3D transforms on SVG shapes. For example all you have to do to get your first fiddle working if Firefox is add overflow: visible to the <svg> element.

https://jsfiddle.net/gqsy14be/ (Firefox only)

However this is an experimental feature, and right now you can't rely on cross-browser support.

But the good news is that outer <svg> elements are treated like any other HTML element and can have 3D transforms.

.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>

But obviously this isn't helpful to you are trying to make 3D solids in your SVG. You can only transform the plane of the SVG.

Upvotes: 1

Related Questions