Часто говорят – “Странные какие-то эти тэги в SVG. То они парные, то одиночные. Не пойму, когда, какие применять.”
Всё это так на первый взгляд, но есть довольно строгая система в их написании.
- Тэги “хамелеон” – в зависимости от контекста могут быть одиночными или парными.
- Одиночные тэги
- Парные тэги
1. Тэги “хамелеон” – в зависимости от контекста могут быть одиночными или парными.
Одиночный тэг – <line ….. /> в примере ниже работает нормально.
|
1 |
<line x1="5px" y1="100px" x2="200px" y2="50px" stroke="green"/> |
Можно усложнить, добавить инлайн стиль.
|
1 |
<line x1="5px" y1="100px" x2="200px" y2="50px" style="stroke:green; stroke-width:10px; stroke-linecap:round; stroke-opacity:0.5"/> |
Все нормально. А теперь, допустим понадобилось добавить анимацию линии. Для этого внутрь одиночного тэга – <line ….. /> добавляем одиночный тэг анимации – <animate attributeName=”x2″ ….. />
|
1 2 3 4 |
<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>.
|
1 2 3 4 |
<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" /> </line> |
Это справедливо для всех основных фигур SVG: <line … />, <polyline … />, <polygon … />, <circle … />, <ellipse … />, <rect … />,<path … /> и <use />;
Примеры одиночного и парного тэга <path >
|
1 2 |
<path id="P" d="M 0 0 C 100 100 200 100 200 200" stroke="grey" stroke-opacity=".75" fill="none" stroke-width="10" /> |
|
1 2 3 4 5 6 7 8 9 10 |
<path id="P" d="M 0 0 C 100 100 200 100 200 200" stroke="grey" stroke-opacity=".75" fill="none" stroke-width="10" > <animate attributeName="d" id="QQ" dur="5s" repeatCount="indefinite" values="M 100 200 C 100 100 200 100 200 100; M 100 100 C 80 150 200 100 150 250; M 200 200 C -80 350 50 20 100 50; M 150 100 C 80 150 350 100 150 50; M 100 200 C 100 100 200 100 200 100" /> </path> |
2. Одиночные тэги.
В этом разделе находятся тэги, которые всегда применяются, только как одиночные. Это тэги реализующие анимацию:
<animate … />
<animateTransform … />
<animateMotion … />
<animateColor … />
<set … />
Анимационные тэги всегда используются вместе с тэгами объекта анимации. Они могут находится либо внутри тэгов объекта анимации, либо использовать ссылку, xlink:href=”#my-circle” на внешний объект, см. второй листинг ниже.
|
1 2 3 4 5 6 7 8 9 |
<circle r="30" cx="50" cy="50" fill="orange" > <animate attributeName="cx" from="50" to="450" dur="1s" begin="click" fill="freeze" /> </circle> |
|
1 2 3 4 5 6 7 8 9 10 |
<circle id="my-circle" r="30" cx="50" cy="50" fill="orange" /> <animate xlink:href="#my-circle" attributeName="cx" from="50" to="450" dur="1s" begin="click" fill="freeze" /> |
3. Парные тэги.
В этом разделе находятся тэги, которые всегда применяются, только как парные. В первую очередь это тэги контейнерны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 тэгов много, перечислять все парные тэги нет смысла. Полный перечень здесь.
⇚ Структура SVG документа
⇛ Как добавить SVG в HTML5 страницу