CODEWITHSUNDEEP
htmlcsssvg
evgeni fotia
evgeni fotia

Reputation: 4810

SVG group child doesn't transform as expected

I would like to translate the g element on the X-axis by 100px then rotate it by 45deg over its center but I get this weird result

svg {
  border: 1px solid black;
}

.rotate-translate {
  transform: translate(100px, 0) rotateZ(45deg);
  transform-origin: center;
  transform-box: fill-box;
}
<svg id="svg" version="1.1" viewbox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <g class="rotate-translate">
    <rect x="0" y="0" width="100" height="100" />
  </g>
</svg>

Here I start with rotateZ

svg {
  border: 1px solid black;
}

.rotate-translate {
  transform: rotateZ(45deg) translate(100px, 0);
  transform-origin: center;
  transform-box: fill-box;
}
<svg id="svg" version="1.1" viewbox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <g class="rotate-translate">
    <rect x="0" y="0" width="100" height="100" />
  </g>
</svg>

Update

Seems like the problem doesn't occur in firefox but occurs on chrome. Also if you use the chrome console to remove a CSS propriety then return it to the rotate-translate class the g element renders in its right position

Upvotes: 0

Views: 941

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101830

Hmmm... it looks like a potential bug in Chrome. It doesn't correctly handle transform-box on group elements. If you target the rect instead, it worrks correctly.

svg {
  border: 1px solid black;
}

.rotate-translate rect {
  transform: translate(100px, 0) rotate(45deg);
  transform-origin: center;
  transform-box: fill-box;
}
<svg id="svg" version="1.1" viewbox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <g class="rotate-translate">
    <rect x="0" y="0" width="100" height="100" />
  </g>
</svg>

If, for some reason, you really need to style the group, then a workaround is to use absolute coordinates in your transform-origin.

svg {
  border: 1px solid black;
}

.rotate-translate {
  transform: translate(100px, 0) rotate(45deg);
  transform-origin: 50px 50px;
}
<svg id="svg" version="1.1" viewbox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <g class="rotate-translate">
    <rect x="0" y="0" width="100" height="100" />
  </g>
</svg>

Upvotes: 2

Mister Jojo
Mister Jojo

Reputation: 22320

you mean this ?

svg {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  fill:red;
}

.rotate-translate {
  transform: translate(50px, 50px) rotateZ(45deg) ;
  transform-origin: center;
  transform-box: fill-box;
}
<svg id="svg" viewbox="0 0 200 200" >
  <g class="rotate-translate">
    <rect x="0" y="0" width="100" height="100" />
  </g>
</svg>

Upvotes: 0

Related Questions