Страницы

Поиск по вопросам

пятница, 9 ноября 2018 г.

Эти странные теги SVG

Странные какие-то эти теги в SVG. То они парные, то одиночные. Не пойму, когда, какие применять.
Например, - встречаются две формы записи команды с разной формой записи закрывающего тега:

Так как же правильно закрывать тег, если обе формы записи работают без сообщения об ошибке?


Ответ

Да, эти две формы записи будут работать без сообщения об ошибке, но только, если код SVG встроен в HTML. Но если кодSVG сохранён в *.svg файл и запустить его на выполнение, то будет выдано сообщение об ошибке:

В данном случае, правильное закрывание тега
Так зачем же применяются две формы записи закрывания тега?
В синтаксисе SVG довольно строгая система написания тегов. По порядку применения, теги можно разбить на три группы:
Тэги “хамелеон” – в зависимости от контекста могут быть одиночными или парными. Одиночные тэги Парные тэги
1. Тэги “хамелеон” – в зависимости от контекста могут быть одиночными или парными.
Одиночный тэг – в примере ниже работает нормально.

Допустим понадобилось добавить анимацию линии. Для этого внутрь одиночного тэга – добавляем одиночный тэг анимации –
/>
Получаем сообщение об ошибке:

Посмотрите внимательно на код выше. Одиночный тег анимации вложен в одиночный тег линии. Парсер XML не понимает этого и подсказывает, что нужно изменить внешний одиночный тэг линии на парный
.
Пример правильного закрытия тега


Вывод – одиночные теги базовых фигур SVG заменяются на парные теги, если внутри вложены одиночные теги анимации:
, , , ,
Это справедливо для всех основных фигур SVG: , , , , , и ;
2. Одиночные тэги.
В этом разделе находятся тэги, которые всегда применяются, только как одиночные. Это тэги реализующие анимацию:
Анимационные теги всегда используются вместе с тегами объекта анимации. Они могут находится либо внутри тегов объекта анимации, либо использовать ссылку, xlink:href=”#my-circle” на внешний объект, см. листинг ниже.

В этом примере анимационный тег находится снаружи объекта анимации, поэтому тег объекта анимации закрыт, как одиночный тег.
3. Парные теги
В этом разделе находятся теги, которые всегда применяются, только как парные. В первую очередь это теги контейнерныx элементов, которые по определению могут содержать внутри себя другие графические элементы и другие контейнерные элементы в качестве потомков.

В спецификации SVG тегов много, перечислять все парные теги нет смысла. Полный перечень здесь

Комментариев нет:

Отправить комментарий