How to tell to the SVG image to use another CSS file ?
- A web page displays a SVG file.
- A button allows to switch between classic colors to high contrast on the whole web page including the SVG image.
Attempt
w.css
(white background)
svg { background-color:white; }
path{ fill:none; stroke:black; stroke-width:8px; }
b.css
(black background)
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 SEARCH: No answer found in 2011
http://tech.groups.yahoo.com/group/svg-developers/message/56679
UPDATE: See also question about correctly structuring javascript, css, and svg
Maybe jQuery SVG (keith-wood.name)...
data
attribute of processing instruction node should be lowercase. You also don't need two<?xml-stylesheet ?>
PIs, creating just one and manipulating itsdata
is enough. – duri Sep 10 '11 at 15:53itm.Data
=>itm.data
and it works :-) – oHo Sep 11 '11 at 9:39Data
or firebug has to detect mistake in attribute case. – oHo Sep 11 '11 at 9:54itm.Data
is the same asitm.someOtherCustomProperty
- nothing will change if you set it, but you can do so. Javascript is case sensitive sodata
andData
properties are two unrelated things. – duri Sep 11 '11 at 11:00