Re: SVG 3D transforms

On Mon, Nov 25, 2013 at 5:36 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> On Mon, Nov 25, 2013 at 3:19 PM, Jelle Mulder <pjmulder@xs4all.nl> wrote:
> > Tab, all
> >
> > Three-dimensional transform functions and the properties ‘perspective’,
> > ‘perspective-origin’, ‘transform-style’ and ‘backface-visibility’ can
> not be
> > used for the elements: <clipPath>, <linearGradient>, <radialGradient> and
> > <pattern>.
> >
> > I understand the reasons for this, but I was wondering the following. If
> you
> > have an external source file linked, you <use> it and change the fills to
> > discard the gradients and patterns etc. Can you then use it with
> > perspective. In other words, after cleaning the offending attributes?
>
> You're misreading the restriction.  You can't use 3d transforms on the
> <clipPath>, etc. elements *themselves*.
>
> You can certainly use it on elements like <rect> which *use* a
> gradient fill or the like.  Just like 2d transforms, all the
> filling/stroking/clipping/etc is done pre-transform.
>
> > Is it possible to 3d transform a path and THEN use it to clip something
> > after the transform? Can you 3d transform a bitmap image? Because then
> you
> > can transform a path and clip your bitmap in it.
>
> I'm not sure.  The spec isn't clear on whether the prohibition on
> using 3d transforms on <clipPath> applies to its descendants as well.
>

According to the spec, you should be able to apply a 3d transform inside
the content of a clip path or mask.
However, it's unlikely that this will ever be supported.


>
> > This also touches a use case which would make it desirable to have some
> sort
> > of pre rendering method in order to do 3d transforms on any SVG content.
> > Clippath and Mask elements will be used a lot in illustrations. Clippath
> and
> > Masks are a delight for any serious illustrator. It's a bit of a bummer
> that
> > all that content will not be able to be rendered using 3d transforms.
> > Probably with an unwitting author being baffled why it doesn't work,
> blaming
> > the browser/viewer first.
> >
> > If there was some pre rendering method one could use, to first render and
> > image of the object and do the 3d transform afterwards, we could discard
> the
> > need for doing that on the server using imagemagick, Batik or Inkscape,
> > creating some png that can be transformed.
>
> That's how it already works, as I explained above.


Yes, the spec calls this out:

The <clipPath><http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathElement>
, <mask><http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#MaskElement>
,<pattern><http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement>
elements
require the user agent to create a flattened representation of the
descendant elements before they can be applied, and therefore override the
behavior of transform-style:
preserve-3d<http://dev.w3.org/csswg/css-transforms/#propdef-transform-style>
.

 In other words: flatten the masked/clipped content to an image, apply the
mask/clip and then transform in 3d.