动态更改外部 SVG 文件的 CSS 文件？
Posted
技术标签:
【中文标题】动态更改外部 SVG 文件的 CSS 文件？【英文标题】：Dynamically change the CSS file of an external SVG file? 【发布时间】：2011-11-14 08:42:04 【问题描述】：如何告诉 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" >
<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>
网络搜索： 2011 年未找到答案http://tech.groups.yahoo.com/group/svg-developers/message/56679
更新：另见question about correctly structuring javascript, css, and svg 也许是 jQuery SVG (keith-wood.name)...
【问题讨论】：
我不确定这里有什么问题。你的方法很好，除了处理指令节点的data 属性应该是小写的。你也不需要两个<?xml-stylesheet ?> PI，只创建一个并操作它的data 就足够了。
是的，duri，你是对的：我已经小写了itm.Data => itm.data，它可以工作:-)
PS: firebug v1.8.2 没有检测到这个bug :-( ` ` => bug report
@duri : 对于错误报告，我需要知道 firebug 是否必须小写 Data 或 firebug 必须检测属性大小写错误。
这不是错误。节点是一个对象，因此您可以设置任何属性，无论它是否具有特殊功能。使用itm.Data 与itm.someOtherCustomProperty 相同 - 如果您设置它，不会有任何改变，但您可以这样做。 Javascript 区分大小写，所以 data 和 Data 属性是两个不相关的东西。
【参考方案1】：
http://www.thesitewizard.com/javascripts/change-style-sheets.shtml 恰好声称解释了如何从 javascript 启用/禁用样式表。或许您可以将其调整为 SVG。
我使用 firebug 对嵌入了包含对外部 CSS 的引用的 SVG 的网页进行了快速实验。
o=document.getElementsByTagName("object")
svg = o[0].getSVGDocument()
svg.styleSheets[0].disabled = true
它似乎有效。
【讨论】：
这是一个演示：svg-wow.org/alternate-stylesheet/alternate-stylesheet.xhtml（它是内嵌 svg 的 XHTML）。【参考方案2】：切换实际样式表可能不是最好的主意。如果您在非常高的级别上设置一个 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 文档中存在外部样式表问题。
【讨论】：
请@DanMan 解释如何从一个班级切换到另一个班级。您的意思是解析所有元素并更改每个样式属性吗？ 嗨@DanMan。你的意思是element.className = (element.className === 'someclass' ? 'someotherclass' : 'someclass'); 吗？ ***.com/questions/3319/…
很像，是的。我已经扩展了我的示例。
依靠 JavaScript 来实现可访问性听起来是个坏主意。
他将目标群体描述为视力障碍者，而不是盲人。所以我认为这里没有问题。如果他们完全失明，改变颜色有什么好处？否则他必须在服务器上存储每个地图的 2 个版本，然后提供指向它们的链接。以上是关于动态更改外部 SVG 文件的 CSS 文件？的主要内容，如果未能解决你的问题，请参考以下文章