Styling SVG с CSS в содержащем HTML

У меня есть SVG файл, содержащий один простой треугольник с именем. Файл называется indicator.svg:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--Scalable Vector Graphic-->
<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"     
     baseProfile="full">
     <polygon points="0,7 7,0 14,7"/>
</svg>

и у меня есть html со встроенным CSS, который пытается установить цвет полигона SVG:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.indicator{
    fill:blue;
}
</style>
<title>Untitled Document</title>
</head>

<body>
<img class="indicator" src="images/indicator.svg" />
</body>
</html>

Но он не меняет цвет треугольника в SVG на синий. Как это можно зафиксировать? Я хочу иметь возможность выбирать цвет треугольника изнутри HTML, в то время как сам SVG находится в отдельном файле.

Ответы

Ответ 1

Совершенно очевидно, почему это не работает для вас. Свойство CSS fill применимо только к элементам SVG, но вы пытаетесь применить его к элементу HTML <img>. Желаемый результат может быть достигнут другими способами:

  • Используйте истинный XHTML (с типом application/xml или */*+xml MIME) в основном документе; то вы сможете смешивать пространства имен и добавлять в него SVG. Поддержка браузеров для этого решения довольно хороша; он будет работать в каждом браузере, поддерживающем XHTML и SVG.
  • Некоторые новые браузеры (IE9 +, Firefox 4+, Chrome) позволяют делать то же самое даже в HTML-документах.
  • Свяжите таблицу стилей с документом SVG: <?xml-stylesheet type="text/css" href="style.css"?>. Я бы выбрал именно так. Вы не сможете контролировать значения свойств непосредственно из документа HTML, но вам не потребуется изменять файл SVG.
  • Добавить файл SVG в документ HTML с помощью <object> и использовать скрипты: oObjElem.contentDocument.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'polygon')[0].style.fill = 'blue';.