Per [ccprog's comment][5], there are some [rendering issues / complications][2] with using [transforms][3] on [`<tspan>`][0].

Here are the available [**attributes on `<tspan>`**][1]:

[<img src="https://i.stack.imgur.com/e39Go.png" width="515" />][1]

You *might* be able to fit your needs by combining `rotate`, `dx`, & `dy` to various effects.  Some people have had luck wrapping the `<text>` element inside of an `<a>` as it [does allow transform][4].

[0]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan
[1]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan#Attributes
[2]: https://github.com/w3c/svgwg/issues/210
[3]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
[4]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a#Global_attributes
[5]: https://stackoverflow.com/questions/44345913/svg-tspan-transform-skew#comment75696204_44345913

I'm looking for a way to skew a `tspan` with `transform="skewX(-45)"`, but it only seems to work on the parent `text` as a whole. The problem is a want surrounding `tspan`s to be unaffected by the skew, only the middle one. The reason I don't want to use multiple `text`s is that I want the flow calculations to be done for me instead of me positioning the `text`s manually (so future font change doesn't throw the text flow off). I also need the following text spans to be flown with respect to the width of the slanted text span, not the original one.

Is there a way to apply `transform` to a `tspan` only or can this be done with multiple `text`s while preserving the text flow?

SVG tspan transform skew

Answer