关于正确构建javascript，css和svg的问题 [英] question about correctly structuring javascript, css, and svg
问题描述
我有一个index.html文件，其中包含svg和CSS文件以及2个javascript文件，并且里面有一个javascript函数
由于某些原因我无法获取javascript函数来运行。
是结构应该是不同的>？
< ！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title> JavaScript工具提示演示< / title>
< link rel =stylesheettype =text / csshref =style.css/>
< / head>
< body>
< embed src =usmap.svgwidth =3000height =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 src =http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（。addtooltip）。tooltip（）;
}）; //关闭document.ready
< / script>
< / body>
< / html>
首先，你试图查询嵌入式SVG文档的DOM，但是被执行的查询只会查询当前页面上的DOM。要访问嵌入式SVG文档的DOM，您需要执行以下操作：
第二个原因为什么这不起作用是因为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的某些情况下不稳定。
i have a index.html file which includes svg and CSS file and 2 javascripts file and has a javascript function inside of it
for some reason i cannot get the javascript function to run.
is the strucutre supposed to be different>?
<!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>
There are several reasons why the code you posted here will not work.
First, you're trying to query the DOM of the embedded SVG document, but the query being performed will only query the DOM on the current page. To access the DOM of an embedded SVG document, you will need to do something like the following:
How to access SVG elements with Javascript
The second reason why this will not work is that jquery is currently not able to query SVG documents. The reason for this is that the class attribute is encoded as an animated value in SVG DOM, as opposed to a string in HTML DOM, which confuses jquery.
For this reason, and because I believe it would fix the other problems you are having with respect to structuring your HTML document, I would recommend that you use the jQuery SVG javascript library: http://keith-wood.name/svg.html
This does many things that appear to be relevant to your project, including modifying jQuery so that it is able to query SVG documents, and embedding the SVG document in the HTML document using either native DOM, if it's supported, or the Adobe plugin. Be careful, though, as I have found the SVG DOM plugin to be unstable in certain situations in Chromium.
这篇关于关于正确构建javascript，css和svg的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
