关于正确构造javascript、css和svg的问题
我有一个index.html文件,其中包括svg和CSS文件以及2个javascripts文件,其中包含一个javascript函数 由于某些原因,我无法运行javascript函数 结构应该是不同的吗>关于正确构造javascript、css和svg的问题,javascript,html,css,xml,svg,Javascript,Html,Css,Xml,Svg,我有一个index.html文件,其中包括svg和CSS文件以及2个javascripts文件,其中包含一个javascript函数 由于某些原因,我无法运行javascript函数 结构应该是不同的吗> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Tooltip Demo</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<embed src="usmap.svg" width="3000" height="1000"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".addtooltip").tooltip();
}); // closes document.ready
</script>
</body>
</html>
JavaScript工具提示演示
$(文档).ready(函数(){
$(“.addtooltip”).tooltip();
}); // 关闭文档。准备好了吗
您在此处发布的代码不起作用有几个原因
首先,您试图查询嵌入的SVG文档的DOM,但是执行的查询将只查询当前页面上的DOM。要访问嵌入式SVG文档的DOM,需要执行以下操作:
这不起作用的第二个原因是jquery目前无法查询SVG文档。这是因为class属性在svgdom中编码为动画值,而在htmldom中编码为字符串,这会混淆jquery
出于这个原因,并且因为我相信它可以解决您在构建HTML文档时遇到的其他问题,我建议您使用jQuery SVG javascript库:
这做了许多看起来与您的项目相关的事情,包括修改jQuery以便它能够查询SVG文档,以及使用本机DOM(如果支持的话)或Adobe插件将SVG文档嵌入HTML文档中。不过要小心,因为我发现在Chromium中,SVG DOM插件在某些情况下是不稳定的