0

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

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 还是什么？或者它是<path>SVG 中的一个对象？

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

4

1 回答 1

1

如果您想通过 CSS 修改 SVG 文件的颜色，您需要在文件本身而不是从容器中链接该 CSS<style> ，方法是在 SVG 文件中添加元素、<?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 的。

这里有更多关于脚本的细节

于 2013-08-14T21:15:14.660 回答