10

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

Например, - встречаются две формы записи команды <rect> с разной формой записи закрывающего тега:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"  viewBox="0 0 400 400" >

<rect x="10" y="10" width="200" height="100" fill="greenyellow" />
<rect x="220" y="10" width="200" height="100" fill="skyblue" </rect>

</svg>

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

1 ответ 1

17

Разница в выполнении кода файла в браузере при расширениях (.svg) и (.html)

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

введите сюда описание изображения

В данном случае, правильное закрывание тега <rect будет - />

Так зачем же применяются две формы записи закрывания тега?

В синтаксисе SVG довольно строгая система написания тегов. По порядку применения, теги можно разбить на три группы:

  1. Тэги “хамелеон” – в зависимости от контекста могут быть одиночными или парными.

  2. Одиночные тэги

  3. Парные тэги

  4. Тэги “хамелеон” – в зависимости от контекста могут быть одиночными или парными. --

Одиночный тэг – <line ….. /> в примере ниже работает нормально.

<line x1="5px" y1="100px" x2="200px" y2="50px" stroke="green"/>

Допустим понадобилось добавить анимацию линии. Для этого внутрь одиночного тэга – <line ….. /> добавляем одиночный тэг анимации – <animate attributeName=”x2″ ….. />

<line x1="5px" y1="100px" x2="200px" y2="50px" stroke="crimson"> 
            <animate attributeName="x2" dur="4s" begin="1s"
              values="5;50;100;150;200; 800" repeatCount="indefinite" />
/>

Получаем сообщение об ошибке:

введите сюда описание изображения

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

Пример правильного закрытия тега </line>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"  viewBox="0 0 400 400" >
<line x1="5px" y1="100px" x2="200px" y2="50px" stroke="crimson" stroke-width="2"> 
            <animate
            attributeName="x2"
            dur="4s"
            begin="0.1s"
            values="5;100;200;400;800;400;200;100;5"
            repeatCount="indefinite" />                        
            
</line>
</svg>

Вывод – одиночные теги базовых фигур SVG заменяются на парные теги, если внутри вложены одиночные теги анимации:

<animate … />, <animateTransform … />, <animateMotion … />, <animateColor … />, <set … />

Это справедливо для всех основных фигур SVG:
<line … />, <polyline … />, <polygon … />, <circle … />, <ellipse … />, <rect … />,<path … /> и <use />;

  1. Одиночные тэги. -- В этом разделе находятся тэги, которые всегда применяются, только как одиночные. Это тэги реализующие анимацию: <animate … /> <animateTransform … /> <animateMotion … /> <animateColor … /> <set … />

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"  viewBox="0 0 400 400" >
<circle id="my-circle" r="30" cx="50" cy="50" fill="orange" />
  <animate 
    xlink:href="#my-circle"
    attributeName="cx"
    values="50;150;50"
    dur="2s"
    begin="0.5s"
    fill="freeze"
    repeatCount="indefinite"
 />

</svg>
В этом примере анимационный тег находится снаружи объекта анимации, поэтому тег объекта анимации <line ... /> закрыт, как одиночный тег.

  1. Парные теги --

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

<a> … </a>
<defs> … </defs>
<glyph> … </glyph>
<g> … </g>
<marker> … </marker>
<mask> … </mask>
<missing-glyph> … </missing-glyph>
<pattern> … </pattern>
<svg> … </svg>
<switch> … </switch>
<symbol> … </symbol>

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.