Log in / Register

Forum › Bugs

CSS transforms not working when applied to SVG elements

Alex3917
The following example shows a CSS rotate transform applied to both an HTML element and an SVG element. Both transforms work fine in Chrome and Firefox, but the SVG transform fails in Prince:

<html>
  <head>
    <style>
	  .svg > text { transform: rotate(45deg) translateX(20px); }
	  .css {
	    position: absolute;
	    top: 60px;
	    left: 80px;
	    transform: rotate(45deg);
	  }
    </style>
  </head>
  <body>
    
    <?xml version="1.0"?>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" width="300" height="148">
        <g class="svg"  style="opacity: 1;">
          <text y="10" x="50" dy=".71em" style="display: block;">SVG TEXT</text>
    	</g>
      </svg>
    </div>
    
    <div class="css">CSS TEXT</div>
  
  </body>
</html>
mikeday
Right, at the moment SVG needs to use its own transform attribute.
urbackmk
is this limitation still present on prince? ie CSS transforms do not work on SVG elements? I seem to be running into the same problem
mikeday
This limitation is still in place, we may support the transform property on SVG in a future release.
urbackmk
thanks for your quick reply! It would be helpful to have a note about the css transform property not being supported on svg elements here: https://www.princexml.com/doc/properties/transform/