Динамически изменить CSS-файл внешнего SVG-файла? - PullRequest
Новая
       1

Динамически изменить CSS-файл внешнего SVG-файла?

4 голосов
/ 10 сентября 2011

Как указать изображению SVG использовать другой файл CSS?

  • На веб-странице отображается файл SVG.
  • Кнопка позволяет переключатьсямежду классическими цветами и высокой контрастностью на всей веб-странице, включая изображение SVG.

Попытка

w.css (белый фон) 

svg { background-color:white; }
path{ fill:none; stroke:black; stroke-width:8px; }

b.css (черный фон) 

svg { background-color:black; }
path{ fill:none; stroke:white; stroke-width:10px; }

image.svg

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="w.css" title="classic" ?>
<?xml-stylesheet type="text/css" href="b.css" title="contrast" alternate="yes" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
   <path d="M150,100 H50 V300 H150 M250,300 H300" />
</svg>

example.html

<html>
<body>

<embed id="svg_image" src="image.svg" type="image/svg+xml" /> 

<script type="text/javascript">
var embed = document.getElementById("svg_image");
function change_css(file){
    var svgdoc = embed.getSVGDocument();
    var b = svgdoc.childNodes;
    for (var i=0; i<b.length; i++){
        var itm = b.item(i);
        itm.Data = "href='"+ file +"' type='text/css'" ;
    }
}
</script>

<input name="c" type="radio" onclick="change_css('b.css');">High contrast<br>
<input name="c" type="radio" onclick="change_css('w.css');" checked="yes">Classic

</body>
</html>

ПОИСК ПО WEB: В 2011 году ответа не найдено
http://tech.groups.yahoo.com/group/svg-developers/message/56679

ОБНОВЛЕНИЕ: См. Также вопрос о правильном структурировании javascript, css и svg
Может быть, jQuery SVG (keith-wood.name) ...

Ответы [ 2 ]

2 голосов
/ 19 декабря 2013

http://www.thesitewizard.com/javascripts/change-style-sheets.shtml случается, чтобы объяснить, как включить / отключить таблицы стилей из JavaScript.Возможно, вы сможете адаптировать его к SVG.

Я провел быстрый эксперимент, используя firebug на веб-странице, которая встраивала SVG, которая содержала ссылку на внешний CSS. 

o=document.getElementsByTagName("object")
svg = o[0].getSVGDocument()
svg.styleSheets[0].disabled = true

Похоже,работа.

2 голосов
/ 10 сентября 2011

Вероятно, это не лучшая идея для переключения реальных таблиц стилей. Вам, вероятно, будет лучше, если вы установите класс CSS на очень высоком уровне, а затем переключите этот класс с помощью Javascript. Затем вы можете поместить все правила CSS в один файл и просто использовать селекторы вроде (упрощенно): 

<svg xmlns="http://www.w3.org/2000/svg" class="someclass">
    <style>
        .someclass .mypath { stroke: blue; }
        .someotherclass .mypath { stroke: red; }
    </style>
    <path d="M150,100 H50 V300 H150 M250,300 H300" class="mypath" />
</svg>

Вы знаете, что я имею в виду? Это как конструкция if ... else. Если это потомок someclass, сделайте его синим, в противном случае сделайте его красным.

Тем не менее, я слышал, что у некоторых браузеров есть проблемы с внешними таблицами стилей в документах SVG.

...