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
Похожие сообщества 9
HTML/CSS — русскоговорящее сообщество
6 455 пользователей
Возникли проблемы с HTML или CSS? – пиши сюда, обсудим и предложим самое лучшее решение. @javascript_ru @js_noobs_ru @frontend_ru Каналы: @defront @htmlshit 🟡 Ищешь чат? @it_chats 🟡 Мы всегда рады помочь, но у нас есть правила. ВАЖНО: http://nometa.xyz
Верстка сайтов HTML/CSS/JS/PHP
2 919 пользователей
Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Библиотека верстальщика: @weblibrary Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @bigmarketolog Автор: @M_Boroda
WebPwnChat
2 631 пользователей
В этом чате обсуждаются атаки и уязвимости на веб-приложения. Любой оффтоп карается баном.
Frontend_ru
2 468 пользователей
Русскоговорящее сообщество фронтенд разработчиков Каналы: @frontendnoteschannel @defront Чаты: @bem_ru @javascript_ru @css_ru Важно! http://nometa.xyz
Чат — Типичный Верстальщик
2 373 пользователей
✅ Наш канал: @tpverstak Если не можете писать в чате, то перезайдите и подтвердите, что вы не бот, нажав на кнопку 🔥 ПРАВИЛА ЧАТА — @annblok/BygPgC3E7" rel="nofollow noopener noreferrer" class="text-blue hover:text-black link" target="_blank">https://teletype.in/@annblok/BygPgC3E7 👍 За бан разбанов нет
JavaScript чат | HTML 5 & CSS 3
2 235 пользователей
Чат для тех кому нужна помощь по коду, или есть какие-то вопросы по реализации задачи в JavaScript. 💼 По вопросам: @dictor_inc ✏️ Правила: t.me/javascript_alert/3070 Практика: https://t.me/joinchat/GmZ5CkHxDCszM2ko