Выровнять текст внутри SVG

Question

У меня есть иллюстратор. Когда я экспортирую графику в svg, текстовая часть выглядит так:

<style type="text/css"> 
.st6{fill:#FFFFFF;} 
    </style> 
<text id="text2" transform="matrix(1 0 0 1 153.873 305.2743)" class="st6">Default text</text> 

Этот текст выровнен по центру. Теперь я изменяю текст внутри браузера с помощью javascript - так, замените «Текст по умолчанию» на «Новый текст». Этот текст больше не выравнивается. Если я изменю текст, как я могу достичь того, что он всегда выровнен по центру? меня попробовать с добавлением «выравнивания текста: центр» в класс ST6 или добавление этого свойства элемента текста:

text-anchor="middle" 

, но не работает. Любая идея?

Один интересный другой пример, который я не понимаю. Вот часть шаблона SVG у меня есть:

<g id="text_4"> 
<g> 
    <defs> 
     <rect id="SVGID_10_" x="9.96" y="273.53" width="170" height="15"/> 
    </defs> 
    <clipPath id="SVGID_11_"> 
     <use xlink:href="#SVGID_10_" style="overflow:visible;"/> 
    </clipPath> 
    <g style="clip-path:url(#SVGID_11_);"> 
     <text data-label="Text 4" text-anchor="middle" x="95" y="282.7" style="fill:#748B9E; font-family:'Merriweather'; font-size:8px;">2013 Riesling </text> 
    </g> 
</g> 

я могу изменить текст, например, вместо «2013 Рислинг» Я могу добавить «xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx» и текст все еще находится в центре.

Затем я удалил все элементы из этого SVG, кроме текста (так что удалить все г элементов и трактов клипа) только этот левый:

<text data-label="Text 4" text-anchor="middle" x="95" y="282.7" style="fill:#748B9E; font-family:'Merriweather'; font-size:8px;">2013 Riesling</text> 

Но шаблон по-прежнему такой же, ничего не изменилось, если я его просмотра внутри браузера. Как это возможно? Таким образом, я могу сократить размер SVG на 70%. И здесь текст всегда центрирован в моем шаблоне, если я делаю то же самое, что и нет. Интересно.

Answer 1

Adobe Illustrator разместил ваш текст так, чтобы он был центрирован в соответствии с вашим дизайном. Но очевидно, что позиционирование является специфическим для этого конкретного фрагмента текста.

text-align: center будет не Работа с SVG. Это свойство HTML.

text-anchor: middle - это правильная собственность. Это приведет к тому, что текст будет центрирован по заданным вами координатам. Поэтому для правильного центрирования нового текста вам необходимо будет скорректировать координату x вашего текстового элемента.

В вашем случае текст помещается с использованием атрибута transform. Вы можете либо отрегулировать преобразование, либо заменить его на атрибуты x и y.

Так, например, если вычисляли среднее положение для текста, чтобы быть (200, 305.2743), вам нужно будет изменить текст элемента:

<style type="text/css"> 
    .st6 {fill:#FFFFFF; text-anchor:middle;} 
</style> 
<text id="text2" transform="matrix(1 0 0 1 200 305.2743)" class="st6">New text</text> 

или

<style type="text/css"> 
    .st6 {fill:#FFFFFF; text-anchor:middle;} 
</style> 
<text id="text2" x="200" y="305.2743" class="st6">New text</text> 

Как вы определяете центральное положение во время выполнения (в браузере) зависит от вас.

Один из вариантов заключается в использовании getComputedTextLength() или getBBox() на текстовом элементе. Затем добавьте половину ширины в координату x.

Или вы можете изменить свой файл Illustrator так, чтобы ваш текст заполнителя был чем-то крошечным, как ".". Тогда вы, вероятно, будете достаточно близко к центру, чтобы вам не нужно было корректировать координаты.

Answer 2

Elaborate комментарий, содержащий обходной путь:

Как уже было отмечено, в принятом ответе, Illustrator (2017.1.0 релиз) не экспортирует текст-якорь = средний тег в это SVG-х. К сожалению, если вы хотите использовать SVG с динамически сгенерированным и центрированным текстом.

Я нашел следующее обходное решение.

Шаг 1: создать свой дизайн в AI с текстом по центру и текст кадра в точном правильном месте

Шаг 2: когда вы закончите рисование и перед экспортом в SVG : ПРАВОСТОРОННЕЕ выравнивания текста:

Шаг 3: вручную (или динамически) добавить текст-якорь = средний атрибут в текстовом фрейме.

<text text-anchor="middle">9650</text> 

Шаг 4: Полюбуйтесь результата