Как отображать несколько строк текста в SVG?

Можно ли отображать несколько строк текста в SVG без использования свойства dy? Я использую SVG 1.1, но могу использовать 1.2.

<svg>
  <text font-size="10" font-family="Arial">
      <tspan>line 1</tspan>
      <tspan>line 2</tspan>
      <tspan>line 3</tspan>
  </text>
</svg>

Я набрал код выше. Я хочу, чтобы текст был полностью скрытым слева, а каждый tspan был новой строкой. Является ли TSpan единственным тегом, который я могу использовать? Я хочу, чтобы SVG позиционировал текстовые строки вертикально с разрывами строк. Я не хочу вручную вводить dy

Я набрал это в codepen, и он ничего не отображает. http://codepen.io/anon/pen/VLBmyK. Коррекция, да. Текст был скрыт. Я переместил его, используя свойство dy.

ОБНОВЛЕНИЕ 1:
Я обновил ручку кода и, согласно тому, что я прочитал, каждая строка должна появиться ниже другой. Они есть, но они также шатаются.

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="0" y="0" font-size="15">
    <tspan dy="15">tspan line 1</tspan>
    <tspan dy="15">tspan line 2</tspan>
    <tspan dy="15">tspan line 3</tspan>
  </text>
</svg>

введите описание изображения здесь

ОБНОВЛЕНИЕ 2:
Я предполагаю, что требуется добавить свойство x? Если вы устанавливаете свойство dy на фиксированное значение, что происходит при изменении размера шрифта?

Это работает лучше, чем я начал с:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">

    <text x="0" y="0" font-size="15" font-family="courier new" dy="0">
        <tspan x=0 dy="15">tspan line 1</tspan>
        <tspan x=0 dy="15">tspan line 2</tspan>
        <tspan x=0 dy="15">tspan line 3</tspan>
    </text>
</svg>

Есть ли способ применить x и dy ко всем tspans? Может быть, свойство типа line-height на текстовом элементе?

ОБНОВЛЕНИЕ 3:
Это не похоже, что текстовый тег имеет свойство устанавливать дельта y. В комментариях было предложено использовать JQuery для установки атрибута x всех tspans. Похоже, что свойство "dy" может принимать другие типы значений, такие как точки и проценты??? Есть ли способ установить значение dy на значение, равное 120% от размера шрифта исходного текстового элемента? Я попытался установить его на 120%, но он не работает так, как я ожидаю. Когда я устанавливаю 120% в свойстве dy, он отключается от экрана. Когда я устанавливаю его на "12" или "12px", это то же положение. Если я установил его на "12%", он слегка сдвинется, но не будет 120% или 12 пикселей.

http://codepen.io/anon/pen/PqBRmd

Похоже, он может принять любое из следующего:
http://www.w3.org/TR/SVG/types.html#InterfaceSVGLength

Я также искал приемлемые типы значений для dy и dx, и я не могу понять это http://www.w3.org/TR/SVG./text.html#TSpanElementDXAttribute.

ОБНОВЛЕНИЕ 4:
Спасибо за ответы. Похоже, существует способ отображения нескольких строк текста, расположенных на расстоянии друг от друга. См. Мой ответ ниже.

ОТВЕТЫ

Ответ 1

Похоже, что это будет содержать строки один за другим без жесткого кодирования размера шрифта в каждом tspan:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     style="border:1px solid black" >

    <text x="0" y="0" font-size="15" dy="0">
        <tspan x="0" dy=".6em">tspan line 1</tspan>
        <tspan x="0" dy="1.2em">tspan line 2</tspan>
        <tspan x="0" dy="1.2em">tspan line 3</tspan>
    </text>
</svg>

Если вы измените размер шрифта, линии будут разнесены на 120% друг от друга или "1,2em".

Пример - http://codepen.io/anon/pen/oXMVqo

Ответ 3

просто вычислить высоты:

var drawx=part.x||0;
var drawy=part.y||0;
var fontSize=part.fontSize||14; 
var lineHeight=part.lineHeight||1.25; 
var style=part.style||""; 
var fontFamily=part.fontFamily||"Arial"; 
var text=part.text.split('\n').map(function(a,i){ return '<tspan x="'+drawx+'" y="'+(drawy+fontSize*lineHeight+i*fontSize*lineHeight)+'">'+a+'</tspan>' }).join('\n');

tqrSvg+='<text x="'+drawx+'" y="'+drawy+'" style="'+style+'" font-family="'+fontFamily+'" font-size="'+fontSize+'">'+text+'</text>'