I'd like to export a graphic as SVG, and it contains text that has a 3D Rotate effect applied to it.

Saving as SVG this expands my text to outlines :(
I'd like it instead to output <text> with actual 3D transformations applied to it, something like this:

<text id="Textu" style="-webkit-transform: matrix3d(0.7784, -0.2518, -0.5749, 0, 0.1727, 0.9665, -0.1894, 0, 0.6034, 0.0481, 0.7959, 0, 0, 0, 0, 1);">

This is CSS, I would prefer SVG transformations.

Is there a tool or plugin that can do this? I have the values from the dialog box (X, Y, Z, Perspective), can I translate them to SVG transforms myself?

The text is meant to be dynamically changed with JavaScript.

  • I don't know if SVG can do transforms this complex. Based on the docs I'm thinking it can't. What's wrong with a CSS transform? – Zach Saucier Dec 2 '14 at 0:11
  • Yeah I have since found out SVG doesn't support 3D transforms. Nothing's wrong with CSS transforms really. I just felt that it's not "native" and might perform less graceful on lower-end smartphones. – Leeroy Dec 3 '14 at 12:42
  • I can't get perspective to work on SVG elements, or at least text elements. (Comments may only be edited for you're stupid.) – Leeroy Dec 3 '14 at 13:41
  • Can you please provide some of the SVG that you're looking to transform? – Zach Saucier Dec 3 '14 at 15:05

I don't think that there is an easy way to do that. SVG transformations can be used, for more flat animations, like recreating some functions of material design, expanding elements, motion blur and such.

enter image description here You might want to take a look at this. It is something that might be close to what you need, although the text still does not change perfectly with perspective.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.