Выравнивание текста в SVG

Question

Выравнивание текста в SVG

Ниже приведен короткий гибкий фрагмент, который преобразует строку datetime в безопасном для кросс-браузера стиле, как nicel, подробно описанный @ drankin2112.

var inputTimestamp = "2014-04-29 13:00:15"; //example

var partsTimestamp = inputTimestamp.split(/[ \/:-]/g);
if(partsTimestamp.length < 6) {
    partsTimestamp = partsTimestamp.concat(['00', '00', '00'].slice(0, 6 - partsTimestamp.length));
}
//if your string-format is something like '7/02/2014'...
//use: var tstring = partsTimestamp.slice(0, 3).reverse().join('-');
var tstring = partsTimestamp.slice(0, 3).join('-');
tstring += 'T' + partsTimestamp.slice(3).join(':') + 'Z'; //configure as needed
var timestamp = Date.parse(tstring);

Ваш браузер должен предоставить тот же результат временной метки, что и Date.parse с:

(new Date(tstring)).getTime()

70

xml svg

задан Peter Mortensen 12 October 2015 в 13:57

1 ответ

Другие вопросы по тегам:

xml svg

Похожие вопросы:

score 60 · Accepted Answer

Оказывается, что Вам не нужны явные текстовые пути. Firefox 3 имеет только частичную поддержку тегов выравнивания по вертикали (, посмотрите этот поток ). Также кажется, что доминирующая базовая линия только работает, когда применено стилем, тогда как текстовая привязка может быть частью стиля или атрибута тега.

<path d="M10, 20 L17, 20"
      style="fill:none; color:black; stroke:black; stroke-width:1.00"/>
<text fill="black" font-family="sans-serif" font-size="16"
      x="27" y="20" style="dominant-baseline: central;">
  Vertical
</text>

<path d="M60, 40 L60, 47"
      style="fill:none; color:red; stroke:red; stroke-width:1.00"/>
<text fill="red" font-family="sans-serif" font-size="16"
      x="60" y="70" style="text-anchor: middle;">
  Horizontal
</text>

<path d="M60, 90 L60, 97"
      style="fill:none; color:blue; stroke:blue; stroke-width:1.00"/>
<text fill="blue" font-family="sans-serif" font-size="16"
      x="60" y="97" style="text-anchor: middle; dominant-baseline: hanging;">
  Bit of Both
</text>

Это работает в Firefox. К сожалению, Inkscape, кажется, не обрабатывает доминирующую базовую линию (или по крайней мере не таким же образом).