Центрированных текстов с различными размерами в отзывчивом SVG изображения

Как можно получить масштабируемую SVG изображения с текстами с различных размерами, все по центру как по вертикали и по горизонтали?Центрированных текстов с различными размерами в отзывчивом SVG изображения

То, что я хотел бы достичь:

enter image description here

То, что я пытался до сих пор (JSFiddle demo):

<text x="50" y="30" 
     style="text-anchor: middle;alignment-baseline:middle" 
     fill="black" font-family="'Arial'" font-size="20"> 
      H1 HEADLINE</text> 

<text x="50" y="45" 
     style="text-anchor: middle;alignment-baseline:middle" 
     fill="black" font-family="'Arial'" font-size="15"> 
      H2 HEADLINE</text>

Заранее спасибо за любые советы :) Я не могу использовать JavaScript.

источник

2014-09-21 dev9

Думаю, что мы должны вычислить точку центра *** вручную ***. И даже делая это, можно просто найти приблизительное вертикальное смещение центральной точки. В CSS мы имеем абсолютное позиционирование с процентом и преобразование 'translate', зная о размерности переведенного объекта, поэтому мы можем установить' left: 50%; top: 50% 'и' translate (-50%, - 50%) 'для гибкой настройки формы. Но в SVG относительный (процентный) нельзя использовать таким образом. Вот почему мы застряли. Если шрифт и текст исправлены, вы можете вычислить точку центра один раз. –

Можете ли вы использовать '' для встраивания HTML в свой «отзывчивый» SVG? Я так полагаю; с этим вы можете создать макет таблицы HTML с помощью CSS и вставить в него элемент ' Phrogz

От section 10.1 of SVG 1.1:

SVG не выполняет автоматическую линию разрыва или переноса слов. Для того, чтобы добиться эффекта нескольких строк текста, используйте один из следующих способов:

Автор или пакет авторинга необходимо предварительно вычислить разрывы строк и использовать несколько элементов «текст» (один для каждой строки текста).

Автор или авторский пакет должен предварительно вычислить разрывы строк и использовать один «текстовый» элемент с одним или несколькими дочерними элементами «tspan» с соответствующими значениями для атрибутов «x», «y», «dx» и 'dy', чтобы установить новые стартовые позиции для тех символов, которые запускают новые строки. (Этот подход позволяет выбирать текст пользователя по нескольким строкам текста - см. Раздел «Выбор текста и операции с буфером обмена»).

Выразить текст, который будет отображаться в другом пространстве имен XML, таком как XHTML [XHTML], встроенный внутри элемента «foreignObject». (Примечание:. Точная семантика этого подхода не полностью определены в это время)

как таковой, вам необходимо либо вручную рассчитать вертикальное расположение, чтобы получить вертикальное центрирование, или использовать <foreignObject> вставлять HTML + CSS в вашем SVG (в правильном месте), которое может выполнить вертикальное центрирование, например используя display:table-cell; vertical-align:middle.

источник

2014-09-21 22:26:19 Phrogz

Центрированных текстов с различными размерами в отзывчивом SVG изображения

ответ

Смежные вопросы