从 HTML/Javascript 调用 SVG 函数

小能豆

从 HTML/Javascript 调用 SVG 函数

javascript

我是 Javascript 和 SCG 的初学者。我编写了一个 SVG 文件，其中包含一些脚本。
这里是 SVG 文件的摘录（未设置定义和一些函数）。我检查了 stackoverflow 和其他网站上的一些帖子。它帮助我进行 onLoad 调用，但仅此而已......

注意：我用来插入 svg，因为我了解提供了加载和使用 SCG 脚本的功能。在这种情况下，SVG 作为文档加载（请参阅getSVGDocument 在 Chrome 中返回 NULL）

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="37mm"
   height="52mm"
   viewBox="0 0 37 52"
   version="1.1"
   id="indicator_RPM"

   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">

<script >
    // <![CDATA[
function RotateNeedle(name, angleInDegrees){
   let d = [angleInDegrees, cx, cy,].join(" ");
   let rotate = "rotate(" + d +")";
   document.getElementById(name).setAttribute("transform", rotate);
}
    // ]]>
  </script>
<style>......</style>
<defs>...</defs>
</svg>

我通过 HTML 代码显示了 SVG 文件

<html>
<object type="image/svg+xml" data="indicator_RPM.svg" id="object_indicator_RPM"></object>


 <script type="text/javascript">

    var svgObject = document.getElementById("object_indicator_RPM");
    var svg;
    svgObject.onload = function(){
        svg = svgObject.contentDocument.getElementById('indicator_RPM');
        svg.RotateNeedle("EngineRPMNeedle", 120);

        console.log(svg);
    };


 </script>
</html>

SVG 文件显示良好。当我单独（在 Edge 或 Firefox 中）或通过 HTML 文件加载 SVG 文件时，SVG 文件中设置的脚本执行得很好（显示符合我的定义，脚本相应地修改它）。
但是，我无法调用 SVG 脚本部分中设置的函数（此处为函数“RotateNeedle”）。我收到消息“svg.RotateNeedleis 不是 svgObject.onload 的函数 (panels.html:11:13)”

我是不是错过了什么地方？

编辑：我可能会尝试在 HTML/javascript 代码中添加一些函数。尽管如此，我们仍处于实验开发阶段，需要进行一些调整。我想尽可能避免配置/常量定义的重复。

在 HMT/javascript 中设置的以下代码执行了预期的功能，但它没有实现预期的实现（因此我认为该解决方案“没有解决问题”）：

    function RotateNeedle(item, angleInDegrees){
    let d = [angleInDegrees, 15,15,].join(" ");
    let rotate = "rotate(" + d +")";
    item.setAttribute("transform", rotate);

但是，您必须考虑到“15, 15”在 SVG 文件中被识别为常量。

谢谢

编辑：我编辑有关最初评论的问题。

阅读 119

2024-02-27

共1个答案

小能豆

在你的代码中，你试图在加载SVG后调用SVG文件中的函数RotateNeedle。但是，SVG文件中定义的函数RotateNeedle并不是SVG对象的属性，因此你无法直接调用它。

你需要修改你的逻辑，以便在加载SVG后，将函数RotateNeedle作为一个全局函数。一种方法是在加载SVG时将其注入到全局作用域中。

你可以修改你的SVG文件，使函数RotateNeedle成为一个全局函数。在SVG中，你可以通过将函数定义放在<script>标签中，而不是在<script>标签内部来实现这一点。然后，在SVG加载后，你就可以在全局作用域中调用该函数。

这是你的SVG文件的修改版：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="37mm"
   height="52mm"
   viewBox="0 0 37 52"
   version="1.1"
   id="indicator_RPM"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
<script type="text/javascript">
    // 定义RotateNeedle作为全局函数
    function RotateNeedle(name, angleInDegrees){
        let d = [angleInDegrees, cx, cy].join(" ");
        let rotate = "rotate(" + d +")";
        document.getElementById(name).setAttribute("transform", rotate);
    }
</script>
<style>......</style>
<defs>...</defs>
</svg>

在你的HTML/JavaScript代码中，你可以这样调用RotateNeedle函数：

<html>
<object type="image/svg+xml" data="indicator_RPM.svg" id="object_indicator_RPM"></object>
<script type="text/javascript">
    var svgObject = document.getElementById("object_indicator_RPM");
    var svg;
    svgObject.onload = function(){
        // 将RotateNeedle作为全局函数注入到全局作用域中
        window.RotateNeedle = svgObject.contentDocument.defaultView.RotateNeedle;

        // 现在可以直接调用RotateNeedle函数
        RotateNeedle("EngineRPMNeedle", 120);
    };
</script>
</html>

现在，当SVG加载完成后，RotateNeedle函数将作为全局函数可用，你就可以在任何地方调用它了。

2024-02-27