2017-02-08 2 views
0

Рассмотрим следующий SVG, содержащий текст RTL:SVG текст письма направление

<svg viewBox='0 0 1024 80' > 
 
    <rect x='1' y='1' width='1022' height='78' style='fill:#fff;stroke:#3fa9f5;'></rect> 
 
    <text style='dominant-baseline:text-before-edge;font-size:65px'>مرحبا</text> 
 
</svg>

он показывает, как в следующем: enter image description here

Я пытаюсь сделать это отображение подобно без явного позиционирования или трансформации: enter image description here

Что я пробовал:

Я просмотрел атрибут direction, но текст ушел с экрана.

также попытался CSS writing-mode же случилось с режимом письма: Tb-RL

Мой вопрос, есть ли способ сделать это без явного позиционирования или явных преобразований, я забочусь только о последней версии хрома?

+1

текст обращается в 0, 0, так как те значения лакуны. Он не будет отображаться в 1022, 0, если вы не скажете его каким-либо образом через явное позиционирование или преобразование. –

+0

@RobertLongson благодарит много, просто хотел убедиться, что это невозможно, прежде чем делать это с помощью преобразований, я смог создать полнофункциональный текстовый ящик, поддержка языков LTR была возможна без каких-либо преобразований или явного позиционирования, поэтому я думал, что смогу сделать то же самое для языков RTL. – Bread

ответ

1

SVG не является HTML. Элементы расположены там, где вы им говорите. Автоматического макета нет, как в HTML.

Вы можете использовать direction="rtl", но, по словам Роберта, вам все равно придется позиционировать его соответствующим образом для ситуации.

<svg viewBox='0 0 1024 80' > 
 
    <rect x='1' y='1' width='1022' height='78' style='fill:#fff;stroke:#3fa9f5;'></rect> 
 
    <text style='dominant-baseline:text-before-edge;font-size:65px' x="1024" direction="rtl">مرحبا</text> 
 
</svg>

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