2

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.

Improve this question
4
  • 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
    Commented Dec 2, 2014 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
    Commented Dec 3, 2014 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
    Commented Dec 3, 2014 at 13:41
  • Can you please provide some of the SVG that you're looking to transform?
    – Zach Saucier
    Commented Dec 3, 2014 at 15:05

1 Answer 1

Reset to default
3

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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