如何从HTML/JavaScript调用SVG内定义的RotateNeedle函数？

问题根源 #

你当前的错误是因为RotateNeedle函数定义在SVG文档的**全局上下文（即SVG的window对象）**里，而你在HTML代码中获取的是SVG文档内的某个元素（svgObject.contentDocument.getElementById('indicator_RPM')），这个元素本身并没有挂载RotateNeedle方法，所以会抛出not a function的错误。同时你希望复用SVG里的cx、cy常量，避免重复定义，下面是具体解决方法：

方案一：直接访问SVG文档的全局上下文调用函数 #

这是最直接的方式，不需要修改函数本身的定义，只需调整HTML的调用逻辑，同时确保SVG里的常量是全局可访问的：

1. 调整SVG代码（暴露全局常量）

把cx、cy定义在SVG的全局作用域，确保函数能正常访问，同时函数保持原有逻辑：

<script>
// <![CDATA[
// 将常量暴露在SVG文档的全局作用域
const cx = 100; // 替换成你的实际圆心X坐标
const cy = 100; // 替换成你的实际圆心Y坐标

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

2. 修改HTML调用代码

直接获取SVG的contentWindow（即SVG的全局上下文），然后调用里面的RotateNeedle函数：

<object type="image/svg+xml" data="indicator_RPM.svg" id="object_indicator_RPM"></object>
<script type="text/javascript">
    const svgObject = document.getElementById("object_indicator_RPM");
    svgObject.onload = function(){
        // 获取SVG文档的全局window对象
        const svgGlobal = svgObject.contentWindow;
        // 调用SVG里的全局函数
        svgGlobal.RotateNeedle("EngineRPMNeedle", 120);
    };
</script>

方案二：将函数挂载到SVG根元素（适配你原有的调用逻辑） #

如果你希望保持HTML里通过SVG元素调用函数的写法，可以在SVG加载完成后，把函数挂载到目标SVG元素上：

1. 调整SVG代码

在脚本末尾添加挂载逻辑，同时确保常量全局可访问：

<script>
// <![CDATA[
const cx = 100;
const cy = 100;

function RotateNeedle(name, angleInDegrees){
   let d = [angleInDegrees, cx, cy].join(" ");
   let rotate = "rotate(" + d +")";
   document.getElementById(name).setAttribute("transform", rotate);
}

// 将函数挂载到SVG根元素上
document.getElementById('indicator_RPM').RotateNeedle = RotateNeedle;
// ]]>
</script>

2. 保持原有HTML代码即可

此时你原来的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>

注意事项 #

• 必须确保SVG文件和HTML文件在同一个域名/端口下，否则浏览器的跨域安全策略会阻止你访问SVG的contentWindow或contentDocument。
• 避免使用隐式全局变量，明确声明cx、cy为全局常量，防止出现变量未定义的问题。

内容的提问来源于stack exchange，提问作者Dede Vince