现代纯代码方式,在没有xlink的svg文件中使用的外部JS文件

时间:2016-05-19 00:44:24

标签: javascript html html5 svg

我试图找到一种方法从svg文件中外包我的javascript代码,该文件用于通过html 5文档中的embed标签使其可交互使用。

是的,有xlink。 但我希望有一种比这更现代的验证方式。

我在https://www.w3.org/Graphics/SVG/https://www.w3.org/TR/SVG11/的规范中找不到这种方式。

但这真的是svg的最新标准吗?没有比2011更新的信息吗?如果没有:是否可以使用类似的东西?

我不想使用任何框架,扩展,黑客或类似的东西。 代码应该是验证,易于理解和简短。

哦,这里有一些代码来说明我到目前为止所做的事情:

HTM:

<!DOCTYPE html>
<html><head><title>start</title>
 <link rel="stylesheet" type="text/css" href="css/design.css">
 <script src="js/main.js"></script>
</head><body>
<header><h1>Test</h1></header>
<section>
 <article id="Start">
<embed id="svg" src="pics/SVG1.svg">
 </article>
</section>
<footer id="startfooter">2016</footer>
</body></html>

SVG:

<svg id="svg2" xmlns="http://www.w3.org/2000/svg" width="600px" height="430px">
<title>SVG 1</title>
<desc>My Pic</desc>
<defs></defs>
<script xmlns="http://www.w3.org/2000/svg" type="application/ecmascript">
 <![CDATA[
function setz(elem,Farbe) {
var das= document.getElementById(elem);
das.setAttribute("style", Farbe);
}
// ...
 ]]>
</script>
<rect x="0" y="0"  width="600" height="430" fill="white" />
 <g>
<svg x="10" y="265" width="50" height="50">
<rect x="0" y="0" rx="10" ry="10" width="50" height="50" style="fill:white; stroke:black; stroke-width:2px;" />
<text x="5" y="30" width="10" onclick="setz('test','fill:red;')">
Rechts</text>
</svg>
<rect id="test" x="200" y="265"  width="60" height="43" fill="black" />
 </g>
</svg>

帮助会很好。

0 个答案:

没有答案