我在XHTML页面中有以下SVG代码
<svg:svg>
<svg:svg width="450" heigth="450" viewBox="0 0 500 500">
<svg:defs>
<svg:g id='mygroup'>
<svg:circle id='a' cx="15" cy="15" r='15' fill="green" fill-opacity="0.3"/>
<svg:line id='b' x1="15" y1="15" x2="15" y2="0" style="stroke: black;" />
</svg:g>
</svg:defs>
<svg:rect width="400" height="400" fill="white" stroke="black" />
<svg:use id="g1" xlink:href="#mygroup" x="100" y="100" onclick="moveMe()" />
<svg:use id="g2" xlink:href="#mygroup" x="100" y="200" />
</svg:svg>
我想用以下javascript代码修改它
<script><![CDATA[
function moveMe(){
obj = document.getElementById("g1");
obj.setAttributeNS(null, "x", "200"); //Ok it works
//How can I change the color of the a circle in g1?
obj = document.getElementById("g1.a");
obj.setAttributeNS(null, "fill", "red"); //It doesn't work
}
]]></script>
如何更改'g1'中'a'圆圈的颜色?如何从我的javascript代码中访问它?
编辑:如果我有一个名为g2的第二个mygroup项目,我不想改变它的颜色。
答案 0 :(得分:1)
替换
obj = document.getElementById("g1.a");
与
obj = document.getElementById("a");
因为circle元素的id是 a 而不是 g1.a 。
iN document.getElementById(id)
id is a case-sensitive string representing the unique ID of the element
being sought.
答案 1 :(得分:1)
一个简单的解决方案是使用'currentColor'关键字传递颜色,如下所示:
<svg:svg>
<svg:svg width="450" heigth="450" viewBox="0 0 500 500">
<svg:defs>
<svg:g id='mygroup'>
<svg:circle id='a' cx="15" cy="15" r='15' fill="currentColor" fill-opacity="0.3"/>
<svg:line id='b' x1="15" y1="15" x2="15" y2="0" style="stroke: black;" />
</svg:g>
</svg:defs>
<svg:rect width="400" height="400" fill="white" stroke="black" />
<svg:use id="g1" xlink:href="#mygroup" x="100" y="100" onclick="moveMe()" color="green"/>
<svg:use id="g2" xlink:href="#mygroup" x="100" y="200" color="blue"/>
</svg:svg>
如果您想更改颜色,现在只需更改'use'元素的'color'属性即可。或者只是使用CSS来做到这一点,例如:
<style>
#g1:hover { color: lime }
</style>
答案 2 :(得分:0)
您可以使用css实现所需的行为。
将此添加到您的html-head:
<style type="text/css">
.g1red #a {fill:red}
</style>
使用此脚本代码:
<script><![CDATA[
function moveMe(){
obj = document.getElementById("g1");
obj.setAttributeNS(null, "x", "200");
obj.setAttributeNS(null, "class", "g1red");
}
]]></script>