Вот хакерская возможность позиционировать определенные текстовые элементы исключительно с помощью CSS, злоупотребляя атрибутами 'letter-spacing' для x-координаты и 'baseline-shift' для координаты y:
<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> дополнительно восстанавливает шрифт и межбуквенный интервал.
Scope
Должен работать в каждой соответствующей реализации SVG.
Существует одно неопределенное ограничение для отрицательного x-координаты.Спецификация для атрибута «межбуквенный интервал» гласит: «Значения могут быть отрицательными, но могут быть ограничения для конкретной реализации».
Совместимость
Текст 'direction' изменения должны работать очень хорошо, когда они наложены на внутренний <tspan>.
Нестандартный 'режим записи' должен быть наложен на внешний <text>.С этим наверняка будут проблемы.
Возможно, станут возможными более важные '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>, как если бы он все еще был там.
Поскольку могут существовать определенные для реализации ограничения на отрицательные значения для атрибутов spacing, это негарантированно работает на всех клиентов!