Forum Bugs

CSS transforms not working when applied to SVG elements

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:

	  .svg > text { transform: rotate(45deg) translateX(20px); }
	  .css {
	    position: absolute;
	    top: 60px;
	    left: 80px;
	    transform: rotate(45deg);
    <?xml version="1.0"?>
      <svg xmlns="" width="300" height="148">
        <g class="svg"  style="opacity: 1;">
          <text y="10" x="50" dy=".71em" style="display: block;">SVG TEXT</text>
    <div class="css">CSS TEXT</div>

Right, at the moment SVG needs to use its own transform attribute.
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
This limitation is still in place, we may support the transform property on SVG in a future release.
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: