files/ru/web/svg/attribute/lengthadjust/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

---
title: lengthAdjust
slug: Web/SVG/Attribute/lengthAdjust
translation_of: Web/SVG/Attribute/lengthAdjust
---
<p><span class="seoSummary">Когда  SVG элемент <code>&lt;text&gt;</code><strong> </strong>или<strong> </strong><code>&lt;tspan&gt;</code> имеет конкретную длину, установленную с помощью атрибута  <code>textLengt</code>, атрибут <code>lengthAdjust</code> контролирует как текст помещается в эту длину (растягивается или сжимается).</span></p>

<p>Существует 2 допустимых значения для атрибута <code>lengthAdjust</code>: <code>spacing</code> и <code>spacingAndGlyphs</code>. Используя <code>spacing</code> (установлено по умолчанию), форма букв сохраняется, но расстояние между ними увеличивается или уменьшается. Используя <code>spacingAndGlyphs</code> весь тестовый элемент растягивается.</p>

<h2 id="SVG_text_fitting_using_lengthAdjust" name="SVG_text_fitting_using_lengthAdjust">SVG текст с использованием lengthAdjust</h2>

<h3 id="HTML_Content">HTML Content</h3>

<pre class="brush: html">&lt;svg width="300" height="150" xmlns="http://www.w3.org/2000/svg"&gt;
   &lt;g font-face="sans-serif"&gt;
      &lt;text x="0" y="20" textLength="300" lengthAdjust="spacing"&gt;
         Stretched using spacing only.
      &lt;/text&gt;
      &lt;text x="0" y="50" textLength="300" lengthAdjust="spacingAndGlyphs"&gt;
         Stretched using spacing and glyphs.
      &lt;/text&gt;
      &lt;text x="0" y="80" textLength="100" lengthAdjust="spacing"&gt;
         Shrunk using spacing only.
      &lt;/text&gt;
      &lt;text x="0" y="110" textLength="100" lengthAdjust="spacingAndGlyphs"&gt;
         Shrunk using spacing and glyphs.
      &lt;/text&gt;
   &lt;/g&gt;
&lt;/svg&gt;</pre>

<h3 id="Результат">Результат</h3>

<p>{{ EmbedLiveSample('SVG_text_fitting_using_lengthAdjust') }}</p>