Эта статья является продолжением статьи Рисуем кнопку в SVG , в котором рассматривались проблемы создания изображений SVG для использования в качестве кнопок на веб-страницах.
Здесь я перейду непосредственно к реализации полученных изображений в HTML-код и расскажу, с какими проблемами столкнется разработчик, как эти проблемы можно решить и что делать с проблемами, которые решить невозможно.
На всякий случай (для тех, кто не читал первую статью) повторюсь, что многие проблемы решить не удалось, и что это в конечном итоге заставило меня отказаться от идеи использования SVG. Итак, если вы не хотите тратить время на чтение статьи, которая не приводит к реальному полезному результату, вы можете пропустить ее.
Для тех, кому, несмотря на это, интересны подробности и конкретика, прошу под кат.
Вставка кнопки на страницу
Существует пять способов добавить изображение SVG на HTML-страницу:- ярлык ;
- ярлык ;
- ярлык ;
- ярлык ;
- CSS-стиль фон .
Я тестировал в Opera 10.63 и 11.00, Firefox 3.6.13, Chrome 8.0.552.224. Я не включил IE в этот список, поскольку последняя стабильная версия не поддерживает SVG. Я планировал сначала разобраться с остальными браузерами и, если все пойдет хорошо, установить в IE дополнительный плагин для поддержки SVG и протестировать его поведение, а также поиграться с девятой версией, которая сейчас разрабатывается.
Но до этого не дошло, потому что (как уже говорилось) было слишком много проблем даже с браузерами, официально поддерживающими SVG. Сейчас я считаю нерациональным тратить дополнительное время на проверку IE только ради включения результатов в статью.
Прошу прощения у любителей этого браузера, если они есть среди читателей.
А также любители других браузеров, не вошедших в мой список.
Итак, в результате проверки получилась следующая картина:
- Теги , , поддерживается всеми протестированными браузерами.
- Ярлык отказался работать в ФФ, а в Хроме и Опере работает исключительно в режиме изображения: встроенные скрипты и события не обрабатываются.
- CSS-стиль фон оказался самым универсальным:
- он вообще не поддерживается в Firefox;
- в Chrome отображается корректно, но, как и в , не поддерживается обработка событий и скриптов, а кроме этого не работает анимация;
- в Опере иногда работает, иногда нет; Похоже, что стиль не работает, если в коде страницы еще и тег есть с тем же изображением SVG, и этот тег должен находиться до элемент с фоновым изображением.
Во всех остальных случаях фон работает корректно, но, как и в Chrome, отображается как статичное изображение, без обработки событий, скриптов и анимации.
(Кстати, спасибо хабралюдям Хпе И тенши за разъяснения по поводу этой функциональности в комментариях к предыдущей статье.
)
Но, увы, нам приходится выбирать между , И .
Существенной разницы между ними нет, но тег вставлять был удален из стандартов HTML 4.0 и XHTML 1.0, а iframe Несовместим со строгими спецификациями.
Поэтому лучше остановиться на варианте объект как самый универсальный.
Код вставки объекта выглядит примерно так:
Внутри тега можно ввести любой HTML-код: он будет использоваться в браузерах, не поддерживающих SVG. Что ж, нам это будет полезно, так как рано или поздно нам все равно придется вспомнить об IE (а могут быть и другие браузеры без SVG).<object data="./button.svg" type="image/svg+xml" style="width: 7em; height: 1.5em;"></object>
Для них мы можем добавить обычный тег внутри .
Модификация текстовой надписи
Итак, мы вставили нашу кнопку.Собираемся добавить второй.
и тут мы понимаем, что для этого нам придется сделать новый SVG-файл, так как надпись хранится внутри SVG-кода.
Но хотелось бы минимизировать количество файлов изображений, ведь именно для этого и было предназначено использование векторов! Что я должен делать? Здесь есть несколько возможных путей.
1. Примените текст к кнопке с помощью HTML. Скажу сразу, подробно этот метод не изучал, но нутром чувствую, что проблем он принесет немало.
Типичное решение проблемы такого типа — разместить текст после кнопки и сместить его влево с помощью CSS. Но я не уверен, что таким способом удастся добиться правильного центрирования текста на кнопке.
Имеется в виду JS с настройкой позиционирования, а это означает постоянный контроль положения объектов на странице (например, при изменении размера окна или динамическом показе/скрытии блоков).
А еще стоит учитывать, что дизайн кнопки может подразумевать сдвиг этого текста вниз и вправо при обработке клика (для трёхмерного эффекта).
В общем, от одной только мысли обо всём этом мне стало не по себе, поэтому я начал искать другие пути.
2. Вставка текста в SVG. Этот вариант предполагает, что у нас в коде страницы есть скрипт, который пробегается по всем SVG-кнопкам и вставляет в них нужный текст (например, вызывая предварительно скомпилированную для этого функцию в самом SVG).
Это уже лучше, но неприятно то, что код кнопки и текст этой кнопки оказываются сильно отличающимися.
Можно, конечно, вводить после каждого тега еще короткая строка скрипта с добавлением текста кнопки в какой-то массив, но все равно длинновата.
Есть третий способ, на мой взгляд, более красивый.
3. Извлечение текста из тега.
По тегу есть атрибут поддерживать , который содержит текст, отображаемый браузерами вместо содержимого объекта во время загрузки объекта.
Оказалось, что кнопка SVG может легко получить значение этого атрибута и использовать его для самостоятельной модификации метки.
И получается, что мы одним махом убиваем двух зайцев: с одной стороны, у нас есть подстраховка на случай, если какая-то загрузка застрянет — пользователь увидит не пустое пространство, а осмысленный текст (я, однако ни разу не смог спровоцировать такое поведение); с другой стороны, текстовая метка теперь реализована так же удобно и понятно, как и классическая ценить в теге .
Обработка кликов
Следующая проблема заключается в том, что мы не сможем прикрепить к тегу обработчик щелчка мыши.: щелчок отправляется на объект SVG и обрабатывается там.
Естественно, мы могли бы поместить обработку событий внутрь кнопки, но это неразумно: ведь кнопок много, а SVG-файл только один.
Вместо этого лучше делегировать обработку скриптам с родительской страницы.
Здесь опять же варианты реализации могут отличаться, я остановился на следующем: Определил функцию в JS файле библиотеки doClickAction , который вызывает обработчик конкретной кнопки, и из скрипта «кнопки» я вызываю эту функцию, передавая ей идентификатор кнопки.
Пример кода выглядит следующим образом.
HTML-код страницы:
<object id="my-button1" data=".
/button.svg" standby="My Button1" type="image/svg+xml"> <input type="button" id="my-button1-ie" value="My Button1" onclick="javascript:doClickAction(parentNode.name);" /> </object> <object id="my-button2" data=".
/button.svg" standby="My Button2" type="image/svg+xml">
<input type="button" id="my-button2-ie" value="My Button2"
onclick="javascript:doClickAction(parentNode.name);" />
</object>
<script type="text/javascript">
// <
