How to tell to the SVG image to use another CSS file ?
如何告诉SVG图像使用另一个CSS文件?
- A web page displays a SVG file.
- 一个web页面显示一个SVG文件。
- A button allows to switch between classic colors to high contrast on the whole web page including the SVG image.
- 按钮允许在整个web页面(包括SVG图像)的经典颜色和高对比度之间进行切换。
Attempt
w.css
(white background)
w。css(白色背景)
svg { background-color:white; }
path{ fill:none; stroke:black; stroke-width:8px; }
b.css
(black background)
b。css(黑色背景)
svg { background-color:black; }
path{ fill:none; stroke:white; stroke-width:10px; }
image.svg
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
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
WEB搜索: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)...
更新:请参见关于正确构造javascript、css和svg(可能是jQuery svg)的问题。
2 个解决方案
#1
2
It's probably not the best idea to switch actual stylesheets. You're probably better off if you set a CSS class on a very high level and then switching that class with Javascript. Then you can put all the CSS rules in one file and just have to use selectors like (simplified):
切换实际的样式表可能不是一个好主意。如果您在一个非常高的级别上设置一个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>
You know what I mean? It's like an if...else construct. If it's a descendant of someclass
make it blue, otherwise make it red.
你知道我的意思吗?这就像一个如果…其他结构。如果它是someclass的后代,让它是蓝色的,否则就让它是红色的。
That said, I've heard that some browsers have problems with external stylesheets in SVG documents.
也就是说,我听说有些浏览器在SVG文档中存在外部样式表问题。
#2
2
http://www.thesitewizard.com/javascripts/change-style-sheets.shtml happens to claim to explain how to enable/disable style sheets from javascript. Perhaps you can adapt it to SVG.
http://www.thesitewizard.com/javascripts/change-style-sheets.shtml恰好声称要解释如何从javascript启用/禁用样式表。也许您可以将它调整为SVG。
I did a quick experiment using firebug against a web page that embedded an SVG that contained a reference to an external CSS.
我使用firebug对嵌入了包含外部CSS引用的SVG的web页面做了一个快速实验。
o=document.getElementsByTagName("object")
svg = o[0].getSVGDocument()
svg.styleSheets[0].disabled = true
It appears to work.
它似乎工作。
#1
2
It's probably not the best idea to switch actual stylesheets. You're probably better off if you set a CSS class on a very high level and then switching that class with Javascript. Then you can put all the CSS rules in one file and just have to use selectors like (simplified):
切换实际的样式表可能不是一个好主意。如果您在一个非常高的级别上设置一个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>
You know what I mean? It's like an if...else construct. If it's a descendant of someclass
make it blue, otherwise make it red.
你知道我的意思吗?这就像一个如果…其他结构。如果它是someclass的后代,让它是蓝色的,否则就让它是红色的。
That said, I've heard that some browsers have problems with external stylesheets in SVG documents.
也就是说,我听说有些浏览器在SVG文档中存在外部样式表问题。
#2
2
http://www.thesitewizard.com/javascripts/change-style-sheets.shtml happens to claim to explain how to enable/disable style sheets from javascript. Perhaps you can adapt it to SVG.
http://www.thesitewizard.com/javascripts/change-style-sheets.shtml恰好声称要解释如何从javascript启用/禁用样式表。也许您可以将它调整为SVG。
I did a quick experiment using firebug against a web page that embedded an SVG that contained a reference to an external CSS.
我使用firebug对嵌入了包含外部CSS引用的SVG的web页面做了一个快速实验。
o=document.getElementsByTagName("object")
svg = o[0].getSVGDocument()
svg.styleSheets[0].disabled = true
It appears to work.
它似乎工作。