SVG удалить текст над / под отступом - PullRequest
0 голосов
/ 13 декабря 2018

Я пытаюсь удалить верхний / нижний отступ из текстового элемента SVG.

Вот как сейчас:

Pic of TEXT with padding!

Как я хочу быть:

https://i.imgur.com/gk1wBAe.png

Это код SVG

<svg xmlns:svg="http://www.w3.org/2000/svg" id="svg" style="margin-top: 100px;" viewBox="0 0 1656 614" preserveAspectRatio="xMinYMin meet">
  <g id="mySVG">	
    <text x="0" y="0" dx="0" dy="0" fill="#000"  style="font-family: DINPro; font-size: 120px;" dominant-baseline="hanging" class="text-0">TEEEEEEXT</text>
  </g>
</svg>

Как вы можете видеть из ссылки на изображение, есть только отступы сверху и снизу.

Если кто-нибудь может помочь мне, как удалить это заполнение, я будубудь благодарен.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

«Заполнение» является частью шрифта.Это пространство, зарезервированное для символов, которые простираются выше высоты заглавной буквы или ниже базовой линии.Вы не можете удалить это.Он всегда будет включен в ограничительную рамку элемента <text>.

0 голосов
/ 13 декабря 2018

Удалите атрибут style из svg (чтобы удалить верхний «отступ» - хотя это поле) и уменьшите последнюю цифру в атрибуте viewBox, чтобы удалить нижний «padding» (хотя это высота svg)- ниже я уменьшил высоту с 614 до 120 (размер вашего шрифта).

Если вы хотите, чтобы шрифт был больше, вам также может понадобиться уменьшить ширину с 1656 (так как svg установленсохранить соотношение сторон)

<svg xmlns:svg="http://www.w3.org/2000/svg" id="svg" viewBox="0 0 1656 120" preserveAspectRatio="xMinYMin meet">
  <g id="mySVG">	
    <text x="0" y="0" dx="0" dy="0" fill="#000"  style="font-family: DINPro; font-size: 120px;" dominant-baseline="hanging" class="text-0">TEEEEEEXT</text>
  </g>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...