Сегодня я столкнулся с весьма интересными особенностями работы браузеров при отображении SVG-фигур оформленных через CSS. Для начала возьмем и создадим тестовый SVG-объект:
<rect
id="testRect"
x="100" y="100"
width="300" height="100"/>
Первая часть эксперимента
Через инлайн стили зададим ему офромление. Для этого добавим параметр style
style="stroke:red;stroke-width:5"
В результате наш объект будет с красной рамкой во всех приличных браузерах. Это хорошо и ожидаемо.
Подключим к нашему SVG-документу внешний CSS. О том как подключить CSS к SVG есть специальная заметка. Ну, в общем примерно так:
<?xml-stylesheet type="text/css" href="style.css" ?>
Поместим в этот CSS селектор #testRect с соответствующими свойствами:
#testRect {
stroke:red;
stroke-width:5
}
Проверим в Chromium\Chrome, Firefox и Opera — работает. Это значит, что в браузерах работают как inline-стили, так и внешние.
Вторая часть эксперимента
Допустим, мы хотим сделать заливку для прямоугольника в виде простого градиента. Для этого добавим в SVG-документ в секцию defs декларацию градиента:
<linearGradient
id="fill">
<stop style="stop-color:#999" offset="0"/>
<stop style="stop-color:#333" offset="1"/>
</linearGradient>
и используем её через inline-стили:
style="fill:url(#fill)"
Работает во всех браузерах. Идем дальше!
Вынесем декларацию свойства fill во внешний файл, к остальным свойствам.
#testRect {
stroke:red;
stroke-width:5;
fill:url(#fill)
}
В Chrome\Chromium работает, в Firefox 12 нету градиента, в Opera 11 тоже никакого градиента.
посмотреть в песочнице
Вывод:
Обращения к элементам SVG-документа из внешней таблицы стилей (CSS) лучше оставить на будущее.
