Архивы рубрики: SVG

Элемент foreignObject

Опубликовано автором
Ответить

Элемент foreignObject служит для вставки кода HTML внутри SVG.
Известно, что внутри SVG автоматического переноса строки, как в HTML не существует.
Это очень неудобно использовать для переноса строки в SVG теги < tspan >
Поэтому, используя foreignObject можно получить автоматический перенос строки внутри SVG
Для начала задаем регион действия. Это прямоугольник с указанными координатами. < foreignObject x=”100″ y=”180″ width=”1080″ height=”800″>
Изменяя их можно точно разместить текст, допустим внутри красивой рамки SVG.

1. Структура файла SVG с встроенным foreignObject

Получился текст с автоматическим переносом строк в внутри рамки SVG Если высота текста превышает высоту рамки, то появится
полоса прокрутки

Ниже полный пример кода:

2. Ещё пример художественной рамки SVG и текста внутри foreignObject

⇚Как добавить SVG в HTML5 страницу Эти странные тэги SVG ⇛

Трансформация изображений SVG при изменении параметров Viewbox

Опубликовано автором
8
  1. Введение
  2. SVG viewport
  3. SVG viewBox
  4. Процесс взаимодействия viewport и viewBox
    1. Смещение начала координат viewBox по одной оси
    2. Смещение начала координат viewBox по двум осям
  5. Изменение масштаба с помощью viewBox
    1. Увеличение масштаба М2:1
    2. Уменьшение масштаба М1:2

Введение

Изменение параметров viewBox – атрибута элемента SVG позволяет масштабировать, фрагментировать, перемещать исходное изображение вдоль осей координат. Но довольно часто возникают вопросы: “Почему, изменив параметры viewBox, я получаю совсем не то, что ожидал увидеть?”. Вместо увеличения картинки в 2 раза, она совсем пропадает с дисплея или сдвигается не в ту сторону и т.д. Чтобы разобраться в причинах этих “аномалий” рассмотрим подробно процессы взаимодействия областей просмотра элемента SVG и его параметра viewBox.

Продолжить чтение →