HTML5 SVG - позиционирование текста

Question

Я пытаюсь разместить элемент <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 выглядит примерно так, но я понятия не имею, почему, или как я мог рассчитать это значение для произвольных полей и размеров шрифтов. Мне кажется, что значение font-size не является фактическим значением высоты текста, используемым SVG для позиционирования.

Может ли кто-нибудь помочь мне с этим? Является ли то, что я пытаюсь сделать даже с SVG?

Заранее благодарен!

Answer 1

Установка dominant-baseline должна предоставить вам то, что вам нужно, возможно, dominant-baseline="hanging", чтобы текстовая позиция была основана на верхней части текста, а не на базовой линии.

Если вы хотите знать, как высок шрифт, тогда вы должны позвонить getExtentOfChar, чтобы определить его, а не предполагать, что вы получите шрифт с размером шрифта, который именно вы просили.

Answer 2

Вы также можете использовать em в y и dy -трибуты!

Это решило мою проблему, по крайней мере:

<div> 
 
    <p>working: margin as y-value:</p> 
 
    <svg style="height: 100px; border: 1px solid black"> 
 
    <text fill="#000" x="10" y="1em" font-size="50" font-family="Arial"> 
 
     <tspan>The quick brown fox jumps over the lazy dog</tspan> 
 
    </text>  
 
    </svg> 
 
</div>