SVG路径检测

我有以下的HTML 5的代码...SVG路径检测

<!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文件...

<?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悬停不起作用，如果这是坐在一个单独的文件。然而，路径是在我的浏览器中绘制和显示的，没有问题。我设法获取路径＃选择的唯一方法：悬停工作是嵌入实际的代码在我的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留在一个单独的文件。我该怎么做？

来源

2013-03-24 Dr.Knowitall

你可以把风格：

<style type="text/css"> 

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

... SVG文件内。只要你没有用<img>或CSS背景图像来引用它，那就行了。

另外，正如你自己建议的那样，你可以在HTML文档中包含svg内联。问题在于样式不适用于所有文档，只能在同一个文档中应用。

来源

2013-03-25 09:51:13

Gotchya。我想我最终可能会把它写成一个php脚本。谢谢。 – 2013-03-26 17:46:53

我发现要做到这一点的唯一真正的方法是制作一个单独的html文件，将svg的东西放入它并将它作为一个对象导入到我希望保持清洁的html中。

来源

2013-03-24 22:17:25

回答

相关问题