#svg #анимация #smil
На практике очень часто случается, что приложение SVG должно работать, фрагменты
кода, как и в других работающих приложениях точно такие же, но любые попытки найти
ошибку, заставить работать новое приложение не приносят результата.
Какие есть наиболее часто встречающиеся ошибки в написании кода SVG?
Какие есть практические способы диагностирования ошибок?
Как избежать появления ошибок, делающих приложение svg
неработоспособным?
.
Использовано изображение https://commons.wikimedia.org/wiki/File:Ghostscript_Tiger.svg
Ответы
Ответ 1
При запуске Primer.html ничего не произойдёт, прямоугольник
появится, но если вы будете его использовать дальше в приложении,
например клонировать с помощью команды , то будете долго
искать ошибку,- почему не появляются копии прямоугольников.
При запуске файла в формате Primer.svg парсер SVG выведет на
экран сообщение об ошибке:
Сразу видно, что не закрыт тег ……
1.2 Нужно ли указывать в шапке файла Namespace?
Современные браузеры последних версий лояльно относятся, если не указано Namespace
в шапке svg файла.
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
Сообщений об ошибке парсер HTML не выдаст.
Но, если запустить файл.svg с аналогичным кодом, то будет сообщение
об ошибке – отсутствии Namespace
Так указывать или не указывать в шапке SVG Namespace?
На положительное решение указывают факты, что возникают проблемы с использованием
svg файлов, у которых не указаны в шапке Namespace при добавлении последних вHTML с
помощью тегов
Вывод – нужно обязательно добавлять в шапку svg файла Namespace.
Шаблон - заготовка файла SVG
2. Решение проблем с видимостью элементов внутри SVG полотна
2.1 Создание видимой границы svg полотна для визуального контроля нахождения svg
элементов.
Для этого создается рамка точно по границам видимого полотна svg c помощью простого
правила CSS в шапке SVG файла: style=”Border:1px solid red;”
Без красной границы полотна svg у нас бы вызвало удивление, почему ожидаемый круг
превратился в многоугольник.
Теперь видно, что круг вышел за границы svg полотна и его края были подрезаны.
Решение напрашивается само собой – уменьшить радиус окружности, как минимум до r=”100″
2.2 Позиционирование с помощью команды transform=”translate(X Y)”
Второй пример. Допустим имеем такой код:
Ширина квадрата должна быть width=”200″, но видимая часть намного тоньше, и сколько
мы не увеличивали бы ширину, квадрат останется узким, потому-что выходит за пределы
видимости.
Для возвращения элементов SVG в зону видимости существует команда transform=”translate(X
Y)”, которая двигает изображение по осям координат.
3. Решение проблем видимости элементов с помощью графического редактора
Этот способ применяется в сложных случаях, когда элементы svg находятся вне зоны
видимости и непонятно в какую сторону и насколько нужно перемещать их, чтобы они попали
в зону видимости.
Допустим нам нужно использовать следующий файл svg:
Ничего нет. Все попытки поиска красной фигуры методом научного тыка, применяя команду
перемещения изображения
и подбора координат, скорее всего кроме разочарования ни к чему не приведут. Спасёт
в этой ситуации любой векторный редактор.
3.1 Открываем файл в векторном редакторе и уменьшаем масштаб изображения до тех пор
пока не найдется красная фигура.
Серый прямоугольник это зона видимости нашего svg файла. Чтобы переместить красную
фигуру в зону видимости, нужно, как видно из рисунка, переместить её влево на 370px
и поднять вверх на 1170px. Это можно сделать и другим способом,- используя координаты
x-min, y-min у viewBox
Например: viewBox=”370 1170 300 300″
4. Валидатор SVG
Можно проверять на валидность файлы svg, находящиеся в сети, на локальном компьютере
или просто загрузить код в валидатор.
https://validator.w3.org
Комментариев нет:
Отправить комментарий