通过滥用属性‘letter-spacing’ 用于x 坐标和‘baseline-shift’ 用于y 坐标,这是一种纯粹通过CSS 专门定位文本元素的骇人可能性:
<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’ 仅适用于 ‘tspan’ 元素,因此在呈现的代码中需要内部 <tspan>。基线移位的正值向上移动文本,与 svg 中的正常方向相反。
‘letter-spacing’ 需要一个首字母才能生效,因此. 是必需的。为了消除第一个字母的宽度,我们使用了特制的字体cssPosAnchor,其中的点没有宽度也没有形状。以下<tspan> 额外恢复字体和字母间距。
范围
应该适用于所有符合标准的 SVG 实现。
虽然对于负 x 坐标有一个无限的限制。 “字母间距”属性的规范说:“值可能是负数,但可能存在特定于实现的限制。”
兼容性
文本'direction'更改应该可以正常工作,当施加在内部<tspan>上时。
必须在外部<text> 上施加非标准的‘writing-mode’。这样做肯定会有问题。
可能更重要的 'text-anchor' 值 middle 和 end 可以这样实现:
<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>
‹space›. 在结束 <\text> 标记之前产生的间距等于负 x 坐标。所以内部的<tspan> 被移动了,但在<text> 中保留了它的空间,就好像它仍然在那里一样。
由于对间距属性的负值可能存在特定于实现的限制,因此不能保证对所有客户端都有效!