Стилизация SVG с CSS в содержащем HTML - PullRequest
Новая
       0

Стилизация SVG с CSS в содержащем HTML

15 голосов
/ 02 сентября 2011

У меня есть файл SVG, содержащий один простой треугольник с именем. Файл с именем index.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 Ответ

31 голосов
/ 02 сентября 2011

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

  • Используйте true 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';.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...