Here is a hacky possibility to position specifically text-elements purely by CSS, by abusing the attributes ‘letter-spacing’ for the x-coordinate and ‘baseline-shift’ for the y-coordinate:
<defs>
<font><font-face font-family="cssPosAnchor" />
<glyph unicode="." horiz-adv-x="0" />
</font>
<style type="text/css"><![CDATA[
#cssPos {
font-family:cssPosAnchor;
letter-spacing:10px; /* x-coordinate */
}
#cssPos>tspan {
font-family:serif;
letter-spacing:normal;
baseline-shift:-30px; /* negative y-coordinate */
}
]]>
</style>
</defs>
<text id="cssPos">.<tspan>CSS-Positioned Text!</tspan></text>
‘baseline-shift’ is only applicable on ‘tspan’ Elements, thus making the inner <tspan>
necessary in the presented code. Positive values for baseline-shift move the text upwards, opposite of the normal direction in the svg.
‘letter-spacing’ needs an initial letter to have an effect, thus making the .
necessary. To eliminate the width of this first letter, we use the special made font cssPosAnchor
, where the dot has no width and no shape. The following <tspan>
additionally restores font and letter-spacing.
Scope
Should work in every conforming SVG implementation.
There is one indefinite limitation though for negative x-coordinates. The specification for the ‘letter-spacing’ attribute says: “Values may be negative, but there may be implementation-specific limits.”
Compatibility
Text ‘direction’ change should work just fine, when imposed on the inner <tspan>
.
A non-standard ‘writing-mode’ must be imposed on the outer <text>
. There will most certainly be problems with that.
The probably more important ‘text-anchor’ values middle and end can be made possible like this:
<defs>
<font><font-face font-family="cssPosAnchor" />
<glyph unicode="." horiz-adv-x="0" />
<glyph unicode=" " horiz-adv-x="0" />
</font>
<style type="text/css"><![CDATA[
#cssPos {
font-family:cssPosAnchor;
letter-spacing:100px; /* x-coordinate */
word-spacing:-200px; /* negative double x-coordinate */
}
#cssPos>tspan {
font-family:serif;
word-spacing:normal;
letter-spacing:normal;
baseline-shift:-30px; /* negative y-coordinate */
}
#cssPos {
text-anchor=middle;
}
]]>
</style>
</defs>
<text id="cssPos">.<tspan>CSS-Positioned Text!</tspan> .</text>
The ‹space›.
before the closing <\text>
tag produces spacing equal to minus x-coordinate. So the inner <tspan>
is moved around but preserves it's space in the <text>
as if it was still there.
Since there may be implementation-specific limits on negative values for the spacing attributes, this is not guaranteed to work on all clients!