使用javascript访问外部SVG文件中的文本元素

but5z9lq 于 2023-04-19 发布在 Java

关注(0)|答案(1)|浏览(230)

如果我在HTML中创建SVG，并给予想要更改ID的文本项，那么使用
let callQSO = document.getElementById（“QSOcall”）.value;然后将其写入SVG
document.getElementById（“SVGcallQSO”）.innerHTML = callQSO;
然而，出于各种原因，我希望SVG是一个外部文件，在HTML之外。
因此我将SVG文件作为对象加载
然后尝试从JS中获取对象的元素
let svgObject = document.getElementById（'svg-object'）.contentDocument;从控制台我可以看到这返回一个null。
有人能提供任何建议，这意味着我可以从外部svg读取元素并操作它们吗？
一如既往，感谢任何帮助。
我怀疑我在某个地方有语法问题，但是在哪里呢？

JavaScript

来源：https://stackoverflow.com/questions/76043159/accessing-text-elements-in-external-svg-files-with-javascript

1条答案

按热度按时间

vlurs2pr1#

您无法立即访问<object> DOm。
您需要等待<object> DOM加载完毕。
因此，您需要在类似load事件的事件中运行处理函数调用

var svgObject = document.getElementById("object");
// get svg content 
svgObject.onload  = (e)=>{
    let svgDoc = svgObject.contentDocument;
    let rect = svgDoc.querySelector('rect');

    //add click event
    rect.addEventListener('click', e=>{
      e.currentTarget.classList.toggle('active')
    })
}

对象

<object id="object" data="test.svg" type="image/svg+xml" ></object>

Test.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">

    <style>
      .active{
        fill:#f00;
      }
    </style>

<rect x="0" y="0" width="100" height="100" fill="green"/>
</svg>

请参见运行plnkr example

赞(0）回复(0）举报 2023-04-19

我来回答

使用javascript访问外部SVG文件中的文本元素

1条答案

相关问题

热门标签

最新问答