Question

我有以下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 hover进行路径检测不起作用。然而，在我的浏览器中绘制并显示路径，没问题。我设法获得路径的唯一方法#Selection：hover to work是将实际代码嵌入我的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保留在单独的文件中。我怎么能这样做？

Answer 1

你可以把风格：

<style type="text/css">

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

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

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

Answer 2

我发现这样做的唯一真正方法是创建一个单独的html文件，将svg内容扔进去并将其作为对象导入到我想要保持干净的html中。

SVG从文件中检测路径

2 个答案: