Я пытаюсь поместить элемент <text>
в HTML5 SVG, предоставив ему верхний край. Скажем, я хотел, чтобы элемент <text>
имел верхний край 10px. Это не сработает:
<svg style="height: 100px; border: 1px solid black">
<text fill="#000" x="10" y="10" font-size="50" font-family="Arial">
<tspan>The quick brown fox jumps over the lazy dog</tspan>
</text>
</svg>
Проблема заключается в том, что для текстовых элементов SVG расстояние y
измеряется от нижней строки текста, а не от вершины. Этот код создает текст, в котором видны только нижние 10px. Итак, мы должны добавить значение font-size
к значению y
, чтобы получить правое поле:
<svg style="height: 100px; border: 1px solid black">
<text fill="#000" x="10" y="60" font-size="50" font-family="Arial">
<tspan>The quick brown fox jumps over the lazy dog</tspan>
</text>
</svg>
По крайней мере, так я и думал. Но это тоже не работает. Теперь верхнее поле слишком велико, как вы можете видеть в скрипке: http://jsfiddle.net/yy8gS/2/. Я хочу, чтобы верхний край был таким же, как и левое поле, что явно не так. Фактически, значение y
48 выглядит правильно, но я понятия не имею, почему, или как я мог рассчитать это значение для произвольных полей и размеров шрифтов. Мне кажется, что значение font-size
не является фактическим значением высоты текста, используемым SVG для позиционирования.
Может кто-нибудь мне помочь? Я пытаюсь сделать это с помощью SVG?
Спасибо заранее!