CSS命名空间，HTML中的SVG:使用CSS突出显示SVG文件中的状态

CSS namespace, SVG in HTML: Highlighting a state in an SVG file using CSS

本文关键字：SVG CSS 文件 显示 状态 使用 命名空间 HTML 中的      更新时间：2023-09-26

我的网站上托管了这个文件：

https://commons.wikimedia.org/wiki/File:Blank_US_Map.svg

如果您仔细查看SVG，就会发现有相当好的ID对应于该州的2个字母缩写。也就是说，我去检查元素，然后是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"/>

我不想做任何互动的事情——我只是想根据计算结果对一些状态进行不同的着色，就像合唱一样。

如果我有一个由3个颜色组组成的列表，红色、绿色、灰色，并且每个州都在这些组中，我应该如何收集我的CSS来根据它给这个地图上色？

我尝试了这个纯CSS，但没有成功：

#MI, #NH, #ME, #AK { 
   fill: "#ff0000";
}
#HI, #FL, #NY {
   fill: "#00FF00";
}
#CA {
   fill: "#F1F1F1"
}

我知道我应该使用SVG标准的"填充"属性，而不是CSS属性的"背景色"

以下是我在jsfiddle上使用CSS+javascript的其他努力。

http://jsfiddle.net/7wRmX/2/

HTML:

<BODY>
    <h1>First try image</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg" alt="Map of coverage across the US.">
<hr>
    <h1>Second try Object</h1>
 <object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg">
  JUNK
</object>
<hr>    
    <h1>Third try Use</h1>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg"/>
</svg>
</BODY>

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;
}

JAVASCRIPT:

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

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

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

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

我的另一个猜测是，我不正确地托管了它，而设计SVG样式的唯一方法是使用内联SVG？如果是这样的话，我会寻找一种使用python-flask加载SVG的方法。

如果您想通过CSS修改SVG文件的颜色，您需要在文件本身而不是从容器中链接该CSS，方法是在SVG文件中添加<style>元素、<?xml-stylesheet href="stylesheet.css" type="text/css"?>行或html <link>元素以链接到外部样式表。

如果使用的是<object>标记，则可以使用javascript从外部进行修改，但不能对<image>标记进行外部修改。

对于<object>标签，您需要获得SVG文档，因此如果您有

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

您可以使用访问内容

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

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

比如说。您将看到如何从<object>到其contentDocument。

这里有更多关于脚本的详细信息

相关文章：