Вопросы Теги

Обрезка текста до заданной ширины в пикселях в SVG

Я рисую текстовые метки в SVG. У меня есть фиксированная ширина (скажем, 200 пикселей). Если текст слишком длинный, как его обрезать?

Идеальным решением было бы добавить многоточие (...) там, где текст вырезан. Но я могу жить и без этого.

24
задан Robert Longson 7 November 2016 в 21:42
поделиться

1 ответ

Элемент linearGradient можно использовать для получения чистого решения SVG. Этот пример затеняет усеченный текст (без многоточия): 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs>
    <linearGradient gradientUnits="userSpaceOnUse" x1="0" x2="200" y1="0" y2="0" id="truncateText">
      <stop offset="90%" stop-opacity="1" />
      <stop offset="100%" stop-opacity="0" />
    </linearGradient>
    <linearGradient id="truncateLegendText0" gradientTransform="translate(0)" xlink:href="#truncateText" />
    <linearGradient id="truncateLegendText1" gradientTransform="translate(200)" xlink:href="#truncateText" />
  </defs>

  <text fill="url(#truncateLegendText0)" font-size="50" x="0" y="50">0123456789</text>
  <text fill="url(#truncateLegendText1)" font-size="50" x="200" y="150">0123456789</text>
  
</svg>

(мне пришлось использовать линейные градиенты, чтобы решить эту проблему, потому что используемый мной рендерер SVG не поддерживает решение textPath.)

0
ответ дан 28 November 2019 в 22:30
поделиться
Другие вопросы по тегам:

Похожие вопросы: