Search code examples
reactjssvgembedcss-transforms

Styling embed svg in svg (On Chrome)

As I read, embedding an svg in another SVG leads to create another document and therefore complexify a lot the styling of those svg ...

Is there a way to use the css property transform : rotate(90Deg) easily on only 1 of the embbed svg ?

I'm trying to rotate the background only and not the front svg which needs to stay vertically ...

This example will help you a lot to understand what I'm trying :

https://codesandbox.io/s/example-rotate-svg-mucs3

Edit

Its seems that it works on Firefox but not in Chrome ... Does anyone know a solution for this in Chrome ?

Chrome's overview: enter image description here

Firefox (and wanted) overview:

enter image description here

Solution

  • I've submitted this problem. Its has been merged here

    As a work-around while waiting for this "bug" to be corrected. ( Should take some time as it's been reported since 2013... )

    I've added a transform porperty with rotate(90) translate(0, -600) directly ON the <g> inside of the "background.svg".

    The translate thing is here beacause the center used for rotating is by default [0,0]. It's clearly explained HERE