Страницы

Поиск по вопросам

пятница, 12 июля 2019 г.

Заливка текста svg выходит за границы символа

Подскажите, пожалуйста, в чем проблема (или я что-то не понимаю). Есть SVG
image/svg+xml Test 0
Текст отображается так, если открыть в редакторе:

Добавляю svg на страничку:

При загрузке страницы, filter заливает текст не по границам,а больше (сверху и снизу заметно):


Ответ

Причина в параметрах фильтра
Область видимости действия фильтра на объект называется - Filter effects region
Это прямоугольник, с габаритными размерами width="X%", height="Y%" заданными в определении фильтра filter id="filter.808080">
Также могут быть заданы координаты левого верхнего угла региона действия фильтра - x="X%" y="Y%"
Если эти все параметры не указаны, то они будут по умолчанию равны:
x="-10%", y="-10%" width="120%" height="120%"
Поэтому у вас подложка была шире символа svg
Укажите значения этих параметров, чтобы обеспечить необходимый внешний вид цветной подложки:
Я выбрал следующие значения, вы можете перенастроить их по своему вкусу:

Ваш пример ниже.
Файл я прогнал через svg оптимизатор, чтобы убрать ненужную служебную информацию Inkscape
Test 0

Комментариев нет:

Отправить комментарий