HTML5 SVG - размещение текста - программирование

Я пытаюсь поместить элемент <text> в HTML5 SVG, предоставив ему верхний край. Скажем, я хотел, чтобы элемент <text> имел верхний край 10px. Это не сработает:

Проблема заключается в том, что для текстовых элементов SVG расстояние y измеряется от нижней строки текста, а не от вершины. Этот код создает текст, в котором видны только нижние 10px. Итак, мы должны добавить значение font-size к значению y, чтобы получить правое поле:

По крайней мере, так я и думал. Но это тоже не работает. Теперь верхнее поле слишком велико, как вы можете видеть в скрипке: http://jsfiddle.net/yy8gS/2/. Я хочу, чтобы верхний край был таким же, как и левое поле, что явно не так. Фактически, значение y 48 выглядит правильно, но я понятия не имею, почему, или как я мог рассчитать это значение для произвольных полей и размеров шрифтов. Мне кажется, что значение font-size не является фактическим значением высоты текста, используемым SVG для позиционирования.

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

Ответы

Ответ 1

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

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

Ответ 2

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

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

<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>