gpt4 book ai didi

javascript - 动态更改外部 SVG 文件的 CSS 文件?

转载 作者:数据小太阳 更新时间:2023-10-29 02:07:01 25 4
gpt4 key购买 nike

如何告诉 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 SEARCH:2011年未找到答案
http://tech.groups.yahoo.com/group/svg-developers/message/56679

更新:另见 question about correctly structuring javascript, css, and svg
也许 jQuery SVG (keith-wood.name)...

最佳答案

切换实际样式表可能不是最好的主意。如果您在非常高的级别上设置 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 文档中存在外部样式表问题。

关于javascript - 动态更改外部 SVG 文件的 CSS 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7371709/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com