关于正确构建 javascript、css 和 svg 的问题答案

【问题标题】：question about correctly structuring javascript, css, and svg关于正确构建 javascript、css 和 svg 的问题
【发布时间】：2011-04-03 22:38:52
【问题描述】：

我有一个 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="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 html css xml svg

【解决方案1】：

您在此处发布的代码不起作用的原因有多种。

首先，您尝试查询嵌入的 SVG 文档的 DOM，但正在执行的查询只会查询当前页面上的 DOM。要访问嵌入式 SVG 文档的 DOM，您需要执行以下操作：

How to access SVG elements with Javascript

这不起作用的第二个原因是 jquery 当前无法查询 SVG 文档。这样做的原因是 class 属性在 SVG DOM 中被编码为动画值，而不是 HTML DOM 中的字符串，这会使 jquery 感到困惑。

出于这个原因，并且因为我相信它可以解决您在构建 HTML 文档时遇到的其他问题，我建议您使用 jQuery SVG javascript 库：http://keith-wood.name/svg.html

这会做很多看起来与您的项目相关的事情，包括修改 jQuery 以便它能够查询 SVG 文档，以及使用原生 DOM（如果支持）或 Adobe 将 SVG 文档嵌入到 HTML 文档中插入。不过要小心，因为我发现 SVG DOM 插件在 Chromium 中的某些情况下不稳定。

【讨论】：