Одна из мощных возможностей SVG заключается в том, что он может управлять текстом до уровня, который невозможно для стандартных HTML -страниц без необходимости прибегать к изображениям или другим плагинам. Любое действие, которое можно выполнить на форме или пути (например, рисунок или фильтрация), может быть выполнено в тексте. Хотя текстовый рендеринг SVG настолько мощный, все еще есть один недостаток: SVG не может выполнять автоматическую обертку линии. Если текст длиннее разрешенного пространства, просто отрежьте его. В большинстве случаев создание нескольких строк текста требует нескольких текстовых элементов.
Кроме того, вы можете использовать элемент TSPAN для разделения текстового элемента на разделы, что позволяет каждому разделу иметь свой собственный стиль.
Кроме того, в текстовых элементах обработка пробелов аналогична HTML: разрывы линий и возвраты перевозки становятся пробелами, в то время как несколько пробелов сжимаются в одно пространство.
Текст отображается непосредственно в изображении - текстовый элемент Чтобы отобразить текст напрямую, вы можете использовать текстовые элементы следующим образом:<svg>
<rect fill = "red" />
<circle cx = "150" cy = "100" r = "80" fill = "green" />
<текст x = "150" y = "125" font-size = "60" Text-Anchor = "Middle" Fill = "White"> Svg </text>
</svg>
Как показано в примере выше, текстовый элемент может установить следующие свойства:
x, y - координаты положения текста. Текст-анкор-это направление текстового отображения, которое на самом деле является позицией (x, y) в положении текста. Это свойство имеет три значения: старт, средний и конец. Start означает, что координата положения текста (x, y) расположена в начале текста, и текст отображается один за другим справа, начиная с этой точки. Средние средства (x, y) расположены в середине текста, а текст отображается в левом и правом направлениях, который фактически центрируется. Конец означает, что (x, y) точки находятся в конце текста, а текст отображается один за другим слева.В дополнение к этим свойствам, следующие свойства могут быть указаны в CSS или непосредственно в свойствах:
Заполните, ход: заполнить и штриховые цвета, конкретное использование суммируется позже. Связанные атрибуты шрифта: семейство шрифта, шрифт в стиле, шрифт, шрифт-вариант, шрифт, размер шрифта, формирование размер шрифта, кернинг, пересечение букв, расстояние от слов и декорация текста. Текстовый интервал - элемент TSPAN Этот элемент является мощным дополнением к текстовому элементу; Он используется для отображения текста в пределах интервала; Он может отображаться только в текстовом элементе или дочерних элементах элемента TSPAN. Типичное использование - подчеркнуть отображение части текста. Например:<Текст>
<tspan font-weight = "bold" fill = "red"> это жирный и красный </tspan>
</text>
Элемент TSPAN обладает следующими свойствами, которые можно установить: x, y используется для установки абсолютного значения координат содержащегося текста, который будет переопределять положение текста по умолчанию. Эти свойства могут содержать серию чисел, которые применяются к каждому соответствующему одиночному символу. Символы, у которых нет соответствующих настроек, будут следовать предыдущему символу. Например:
<текст x = "10" y = "10"> Hello World!
<tspan x = "100 200 300" font-weight = "bold" fill = "red"> это жирный и красный </tspan>
</text>
DX, DY используется для установки смещения содержащегося текста относительно положения текста по умолчанию. Эти свойства также могут содержать серию чисел, каждый из которых применяется к соответствующему символу. Символы, у которых нет соответствующих настроек, будут следовать предыдущему символу. Вы можете изменить X из приведенного выше примера на DX, чтобы увидеть эффект. Вращение используется для установки угла поворота шрифта. Эта страница свойства может содержать серию чисел, которые применяются к каждому символу. Символы, у которых нет соответствующих настроек, будут использовать последний набор номеров.
<текст x = "10" y = "10"> Hello World!
<tspan rotate = "10 20 45" font-weight = "bold" fill = "red"> это жирный и красный </tspan>
</text>
TextLength: Это самое загадочное свойство. Говорят, что после установки, когда рендеринг обнаруживает, что длина текста не соответствует этому значению, эта длина будет основой. Но я не пробовал. Текстовая цитата - элемент Tref
Этот элемент допускает ссылку на определенный текст и эффективно копировать его в текущее местоположение, обычно с указанным целевым элементом xlink: HREF. Поскольку он был скопирован, при использовании CSS для изменения текущего текста исходный текст не будет изменен. Смотрите пример:
<Text id = "Пример"> Это пример текста. </text>
<Текст>
<tref xlink: href = "#Пример" />
</text>
Текстовый путь - элемент TextPath Это более интересно, эффект также круто, и он может дать множество художественных эффектов; Этот элемент берет указанный путь из своего атрибута Xlink: Href и выравнивает текст на этом пути, см. Пример:<path id = "my_path" d = "M 20,20 C 40,40 80,40 100,20" />
<Текст>
<TextPath xlink: href = "#my_path"> Этот текст следует за кривой. </textpath>
</text>
Рендеринг изображение в SVG - элемент изображения Элемент изображения в SVG может напрямую поддерживать отображение растровых изображений, которые очень просты в использовании. См. Следующий пример:<svg>
<изображение xlink: href = "penguins.jpg" x = "0" y = "0"/>
</svg>
Несколько моментов здесь :1. Если координаты x или y не установлены, по умолчанию 0.
2. Если ширина или высота не установлены, по умолчанию 0.
3. Если ширина или высота явно устанавливаются на 0, рендеринг этого изображения будет запрещена.
4. Формат изображения поддерживает PNG, JPEG, JPG, SVG и т. Д., Таким образом, SVG поддерживает вложенные SVG.
5. Image - это обычный элемент SVG, как и другие элементы, поэтому он поддерживает все эффекты, такие как обрезка, маскировка, фильтрация, вращение и т. Д.
Практическая ссылка:Индекс скрипта: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Центр разработки: https://developer.mozilla.org/en/svg
Популярная ссылка: http://www.chinasvg.com/
Официальный документ: http://www.w3.org/tr/svg11/