SVG rotate3d support?

Has anyone had any success in using any of the rotate XYZ transforms with the SVG parser? The following simple SVG rotates a rect around the Y axis, but this doesn’t show correctly in JUCE. Are such transforms supported?

<svg width="400" height="110">
<g style="transform:rotateY(45deg)">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /></g>
</svg>

After some digging around I see that rotations are handled by the AffineTransform::rotation which only rotates around an x/y point. So I guess these types of transforms are not supported. :frowning:

I wonder if the same effect could be achieved from some kind of scale and shear operation :thinking:

I don’t believe SVG supports anything 3D/z-axis. That being said, if you’re having issues with rotateY in JUCE, you could post a demonstration/screenshot using Mozilla’s demo : transform - SVG: Scalable Vector Graphics | MDN

Hi @jrlanglois The sample code I presented above demonstrates a simple transform around the Y axis. You can see the list of transforms available SVG Transforms 1.0, Part 2: Languagehttps://www.w3.org/TR/SVG-Transforms/.

If you scroll down you’ll see reference to 3d transforms https://www.w3.org/TR/SVG-Transforms/#threed-rotate-definition

JUCE does all its SVG based transforms with the AffineTransform class, which, as far as I can tell can only rotate objects around a fixed point.https://github.com/juce-framework/JUCE/blob/fbe95b0b073ccb589e28255cb0cd56e1382dc2c9/modules/juce_gui_basics/drawables/juce_SVGParser.cpp#L1653

The old scale and shear idea didn’t work so well. I think it’s back to the drawing board on this one.

Sorry, my point about using the Mozilla sample wasn’t clear. The intention there is to use a known to work reference which can be easily compared with JUCE, so as to rule out user error and also make it easier to create a path forward. JUCE’s SVG parser has a great many holes and getting alignment on expectations is annoying to say the least.

Interesting that SVG supports 3D. JUCE’s affine transform explicitly indicates being 2D, so that limits a lot. I guess it would need to also be extended to support Z axis methods (and means of projecting to 2D)? Sucks that it only supports rotation around a point right now, too.

Of course. I find myself doing this quite a lot when working with the JUCE SVG Parser.

It sure does. I would love to see more attention given to the SVG parser.

I’m pretty curious about the specs surrounding SVG and how it maps 3D to 2D.

In the section titled “Converting a 4x4 to a 3x3 matrix” it explains how to go about this using a perspective matrix. (SVG Transforms 1.0, Part 2: Language)

The main problem I see is JUCE’s architecture, and needing more functionality surrounding this. What I think needs to happen is that juce::Matrix3D needs to be accessible by the SVG parser so as to convert to and from juce::AffineTransform.

As a workaround you could load this SVG in an SVG editor (for example Inkscape). And then save as a “simplified” SVG. By that I mean: make sure to save the SVG as only paths, with the rotation already applied.

1 Like

That would be really great. Feel free to send me your work on this :laughing: Is it possible to rotate paths around an axis using the Matrix3D class? If so I can drop the SVG stuff and just paint directly.

I was hoping to control the rotation in real time so this probably won’t work. And I was also generating the SVG on the fly from audio data.

My plate’s pretty full but this is a fun problem!

Yeah, using rotation matrices. juce::Quaternion would be handy for that as it provides a way to create a rotation matrix via a 3D vector and a scalar.

This shouldn’t be an issue. After all, lots of things are generated on the fly in games!

No, it’s not an issue at all, it works very well. I was actually ruling out the idea of performing the transforms in Inkscape and then bringing them back in as SVGs.

Nice, I might try that :+1: