kzen.dev
Дополнительно
Вопрос

Выравнивание SVG по правому краю

Я пытаюсь обосновать несколько строк текста svg справа, но последняя строка текста всегда находится дальше справа, и я не могу понять, почему.

Важные вещи.

<svg style="border:1px solid blue;" text-anchor="end">
    <text font-size="30px">
        <tspan x="100%" dy="30">tspan line 1</tspan>
        <tspan x="100%" dy="35">tspan line 2</tspan>
        <tspan x="100%" dy="35">tspan line 3</tspan>
    </text>
</svg>

jpaugh
jpaugh
Редактировал вопрос 4-го февраля 2019 в 5:20
Программирование
text
svg
html
Решение / Ответ

По умолчанию для текста SVG используется сжатие пробельных символов. Это означает, что все пробелы в начале и конце текста удаляются, а в середине сжимаются до одного пробела.

У вас есть пробелы вокруг каждого элемента <tspan>. Пробел перед первым элементом и после последнего <tspan> удаляется, поэтому последний <tspan> идет до конца справа. Пробел после второго сжимается до пробела (обратите внимание, что новая строка тоже становится пробелом), поэтому средняя строка на самом деле "tspan строка 2"

Если удалить все пробелы между символами > и <, она будет отображаться так, как вы хотите.

3
Хотите что-то узнать? Задавайте Ваш вопрос на нашем сайте
ru.kzen.dev
Похожие сообщества 9
HTML/CSS — русскоговорящее сообщество
5 700 пользователей
Возникли проблемы с HTML или CSS? – пиши сюда, обсудим и предложим самое лучшее решение. @javascript_ru @frontend_ru Каналы: @defront @htmlshit 🟡 Ищешь чат? @it_chats 🟡 Мы всегда рады помочь, но у нас есть правила. ВАЖНО: http://nometa.xyz
WebPwnChat
3 648 пользователей
В этом чате ничего не обсуждается. Любой оффтоп карается баном, но не всегда.
Верстка сайтов HTML/CSS/JS/PHP
2 998 пользователей
Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Библиотека верстальщика: @weblibrary Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @bigmarketolog Автор: @M_Boroda
Frontend_ru
2 737 пользователей
Русскоговорящее сообщество фронтенд разработчиков Каналы: @frontendnoteschannel @defront Чаты: @bem_ru @javascript_ru @css_ru Важно! http://nometa.xyz
JavaScript чат | HTML 5 & CSS 3
2 275 пользователей
Чат для тех кому нужна помощь по коду, или есть какие-то вопросы по реализации задачи в JavaScript. 💼 По вопросам: @dictor_inc ✏️ Правила: t.me/javascript_alert/3070 Практика: https://t.me/joinchat/GmZ5CkHxDCszM2ko
html.mentor
703 пользователей
👍 Самое душевное сообщество по изучению HTML/CSS. Помогаем новичку, обрести навык, и поверить в себя. 🧐 Приветствуем, Друг!