Учебные заметки — связанные методы текста текстового элемента в SVG.js

Текст()

1) текст()

В отличие от html, по тексту в svg сложнее ориентироваться. Плавный текст создать невозможно, поэтому разрывы строк следует вводить вручную. В SVG.js существует два способа создания текстовых элементов.
Первый и самый простой способ — предоставить текстовую строку, разделенную символами новой строки:

var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")

Это автоматически создаст блок текста с вставкой разрывов строк там, где это необходимо.

Второй метод даст вам больше контроля, но требует больше кода:

var text = draw.text(function(add) {
    
    
  add.tspan('Lorem ipsum dolor sit amet ').newLine()
  add.tspan('consectetur').fill('#f06')
  add.tspan('.')
  add.tspan('Cras sodales imperdiet auctor.').newLine().dx(20)
  add.tspan('Nunc ultrices lectus at erat').newLine()
  add.tspan('dictum pharetra elementum ante').newLine()
})

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

var text = draw.text(function(add) {
    
    
  add.newLine('Same as')
  add.newLine('above').fill('#f06')
})

Если вы хотите пойти другим путем и вообще не хотите добавлять tspan, а только строку текста, вы можете использовать метод Plain():

var text = draw.plain('Lorem ipsum dolor sit amet consectetur.')

Это ярлык для обычного метода экземпляра SVG.Text, который вообще не отображает разрывы строк.

2) text.amove()

В отличие от других элементов, текст обычно позиционируется в соответствии с его базовой линией и текстовыми привязками. Svg.js позволяет перемещать каждую фигуру через верхний левый угол.
Однако иногда необходимо переместить текст через базовую линию и опорные точки. Этого можно добиться с помощью amove()

var text = draw.text('Some text for you')
text.amove(100, 50)

3) текст.ax()/ай()

Переместите текстовую привязку элемента только вдоль оси x/y:

text.ax(200)
text.ay(200)

Без аргументов методы ax()/ay() действуют как геттеры:

var x = rect.ax()
var y = rect.ay()

4) text.build()

build() можно использовать для включения/выключения режима сборки. Если режим сборки отключен, методы Plain() и tspan() сначала вызовут метод Clear(), прежде чем добавлять новый контент. Поэтому, когда режим сборки включен, Plain() и tspan() будут добавлять новое содержимое к существующему содержимому. Когда блок передается методу text(), режим сборки автоматически переключается до и после вызова блока. Но в некоторых случаях ручное переключение может оказаться полезным:

var text = draw.text('This is just the start, ')

text.build(true)  // enables build mode

var tspan = text.tspan('something pink in the middle ').fill('#00ff97')
text.plain('and again boring at the end.')

text.build(false) // disables build mode

tspan.animate('2s').fill('#f06')

5) text.clear()

Очищает все содержимое текстового элемента под названием:

text.clear()

6) text.length()

Получите общую вычисленную длину текста всех tspan:

text.length()

7) text.font()

Удобный метод добавления свойств, связанных со шрифтом:

text.font({
    
    
  family:   'Helvetica'
, size:     144
, anchor:   'middle'
, leading:  '1.5em'
})

В отличие от метода attr(), метод font() также принимает пары ключ/значение:

text.font('family', 'Menlo')

Доступные свойства включают в себя:

• Leading (выполнит то же самое, что и вызов метода Lead() в качестве установщика)
• якорь (установит свойство текстовой привязки)
• семейство (установит атрибут семейства шрифтов)
• размер (установит свойство размера шрифта)
• растянуть (установит свойства растяжения шрифта)
• стиль (установит свойства стиля шрифта)
• вариант (установит свойства варианта шрифта)
• вес (установит свойство жирного шрифта)

Любые другие атрибуты будут применяться, как указано. Так, например, атрибуты межбуквенного интервала будут применяться только к методу attr(). Для получения дополнительной информации о свойствах, связанных со шрифтом, нажмите здесь .

Как и следовало ожидать, метод font() также действует как метод получения:

var leading = text.font('leading')

8) text.leading()

Метод Leading() в SVG.js пытается облегчить эту проблему, обеспечивая поведение, близкое к html. В сочетании с текстом, разделенным новой строкой, он работает так же, как html:

var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")
text.leading(1.3)

Это будет отображать текстовый элемент в каждой строке с элементом tspan и значением dy, равным 130% размера шрифта.
Обратите внимание, что метод Leading() предполагает, что каждый tspan первого уровня в текстовом узле представляет собой новую строку. Использование Leading() для текстового элемента, содержащего несколько tspan подряд (например, tspan новой строки, который не определяет новую строку), может привести к путанице. Таким образом, этот метод рекомендуется использовать с осторожностью, желательно только при добавлении текста, разделенного символом новой строки, в текстовый элемент или при вызове метода newline() для каждого tspan первого уровня, добавленного в блоке, передаваемом в качестве аргумента текстовому элементу. .

Получите текущее ведущее значение:

var leading = text.leading()

9) текст.путь()

Создайте textPath в текстовом элементе и верните textPath:

var text = draw.text(function(add) {
    
    
  add.tspan('We go ')
  add.tspan('up').fill('#f09').dy(-40)
  add.tspan(', then we go down, then up again').dy(40)
})

var path = 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100'

var textpath = text.path(path).font({
    
     size: 42.5, family: 'Verdana' })

10) text.textPath()

Чтобы получить текстовый путь в тексте, используйте textpath():

var textpath = text.textPath().attr('startOffset', '50%')

11) text.plain()

Если содержимое элемента не требует оформления или нескольких строк, достаточно просто добавить обычный текст:

text.plain('I do not have any expectations.')

12) text.rebuild()

Это внутренний обратный вызов, который, вероятно, никогда не потребуется вызывать вручную. По сути, он перестраивает текстовый элемент, когда изменяются размер шрифта сервера и атрибут x или Leading() текстового элемента. Этот метод также действует как установщик, позволяющий включить или отключить перестроение:

text.rebuild(false) //-> disables rebuilding
text.rebuild(true)  //-> enables rebuilding and instantaneously rebuilds the text element

13) текст.текст()

Текст впоследствии также можно изменить с помощью метода text():

text.text('Brilliant!')

Чтобы получить необработанный текстовый контент:

text.text()

13) text.tspan()

Также можно просто добавить tspan:

text.tspan(' on a train...').fill('#f06')

Видео объяснение

Видео объяснение