0

我有以下 HTML 5 代码...

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

</script>
<style type="text/css">

path#Selection{
fill: black;
}
path#Selection:hover{
fill:blue;
}
</style>
</head> 
<body>

<object data="America" type="image/svg+xml" id="test"></object>

</body>
</html>

我正在使用的 svg 文件是从 gimp 导出的...

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
 width="38.2361in" height="19.4444in"
 viewBox="0 0 2753 1400">
  <path id="Selection"
    fill="black" stroke="black" stroke-width="1"
    d="M 397.00,118.96
       C 397.00,118.96 414.00,115.96 414.00,115.96
         414.00,115.96 432.96,108.64 432.96,108.64
         432.96,108.64 441.04,107.73 441.04,107.73
</path>
</svg>

不幸的是，如果它位于单独的文件中，我使用 css 悬停的路径检测不起作用。然而，路径是在我的浏览器中绘制和显示的，没问题。我设法让 path#Selection:hover 工作的唯一方法是将实际代码嵌入到我的 HTML 文件中......

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

</script>
<style type="text/css">

path#Selection{
fill: black;
}
path#Selection:hover{
fill:blue;
}
</style>
</head> 
<body>

<svg xmlns="http://www.w3.org/2000/svg"
 width="38.2361in" height="19.4444in"
 viewBox="0 0 2753 1400">
  <path id="Selection"
    fill="black" stroke="black" stroke-width="1"
    d="M 397.00,118.96
       C 397.00,118.96 414.00,115.96 414.00,115.96
         414.00,115.96 432.96,108.64 432.96,108.64
         432.96,108.64 441.04,107.73 441.04,107.73
</path>
</svg>

</body>
</html>

然而，这非常不方便，因为我正在构建一个包含许多国家的大地图，所以我宁愿将 svg 保留在单独的文件中。我该怎么做？

4

2 回答 2

1

你可以把风格：

<style type="text/css">

path#Selection{
fill: black;
}
path#Selection:hover{
fill:blue;
}
</style>

...在 svg 文件中。只要您不使用<img>或作为 CSS 背景图像引用它，它就可以工作。

或者，正如您自己建议的那样，您可以将 svg 内联包含在 HTML 文档中。问题是样式不适用于跨文档，仅适用于同一个文档。

于 2013-03-25T09:51:13.273 回答
0

我发现这样做的唯一真正方法是制作一个单独的 html 文件，将 svg 内容放入其中并将其作为对象导入到我想要保持清洁的 html 中。

于 2013-03-24T22:17:25.413 回答