Javascript CSS名称空间，HTML中的SVG：使用CSS突出显示SVG文件中的状态

我在我的网站上托管了此文件：

如果您查看SVG内部，有相当好的ID对应于州的两个字母缩写。也就是说，我先检查元素，然后检查URL，然后查看

<path xmlns="http://www.w3.org/2000/svg" d="m 880.79902,142.42476 0.869,-1.0765 1.09022,-3.29102 -2.54308,-0.91347 -0.48499,-3.07156 -3.87985,-1.13162 -0.32332,-2.74824 -7.27475,-23.44082 -4.60142,-14.542988 -0.89708,-0.0051 -0.64664,1.616605 -0.64664,-0.484981 -0.96997,-0.969963 -1.45494,1.939925 -0.0485,5.032054 0.31165,5.667218 1.93992,2.74824 0,4.04152 -3.7182,5.06278 -2.58657,1.13164 0,1.13162 1.13163,1.77827 0,8.56802 -0.80831,9.21467 -0.16166,4.84982 0.96997,1.2933 -0.16166,4.52649 -0.48499,1.77828 0.96881,0.70922 16.78767,-4.42455 2.17487,-0.60245 1.84357,-2.77333 3.60523,-1.61312 z" id="NH" class="state"/>

我知道我应该使用SVG标准的“fill”属性，而不是CSS属性“background color”

下面是我在JSFIDLE上使用CSS+javascript的其他努力

HTML:

JAVASCRIPT:

var element = document.getElementById("CA");
element.setAttribute("class", "s5");

这些修改实际上都不会产生任何颜色

我在这里尝试了更多的东西，包括使用javascript添加CSS，以及按名称获取元素

我猜在所有这些不幸事件中，我没有正确地确定ID的范围？需要告诉它在SVG中查找ID还是什么？或者它是SVG中的

对象

---

我的另一个猜测是我主持得不恰当，还有？如果是这种情况，我将寻找一种使用python flask加载SVG的方法。

如果您想通过CSS修改SVG文件的颜色，您需要而不是从容器中修改，可以通过在SVG文件中添加

元素、

行或html

元素链接到外部样式表

如果您使用的是

标记，则可以使用javascript在外部执行此操作，但您将无法对

标记进行外部修改

对于

标记，您需要获取SVG文档，以便

<object type="image/svg+xml" id="obj" data="..."/>

但是s5仍然需要是SVG文档中定义的CSS类，而不是包装器html文档中定义的CSS类

例如，我会这样做。您将看到如何从

转换到其内容文档

---

有关脚本编写的更多详细信息

请从颜色文字中删除引号。

.s5 {
    fill: #00FA19;
    color: #00FA19;
    background-color:#00FA19;
}

svg #NV {
    fill: #00FA19;
    color: #00FA19;
    background-color:#00FA19;    
}

hover {
  fill:red;
}

.state {
  fill: red;
}

path {
    fill: blue;
}

var element = document.getElementById("CA");
element.setAttribute("class", "s5");

<object type="image/svg+xml" id="obj" data="..."/>

document.getElementById("obj").contentDocument.getElementById("CA");
element.setAttribute("class", "s5");