当前位置：文江博客话题详情

是否可以从封闭的 HTML 中导航 SVG 对象的元素？

发布于 2024-10-15 20:10:02 字数 503 浏览 1 评论 0原文

我正在通过对象标签加载 SVG，并且需要访问 SVG 的元素（以操作它们）。我怎样才能做到这一点？

以下是我知道的部分解决方案：

在设置参数的地方使用 SVG 参数为对象标签并参数化 SVG 元素的属性。这对于像 rect 这样的东西效果很好，但不适用于我需要移动的 g（组）（它需要一个无法参数化的“变换”，看起来像）。
我看到了使用建议 contentDocument 或 getSVGDocument() 在你得到的对象元素上通过 getElementById("yoursvgid")。不幸的是，两者都不是工作 - 是的，我称之为 加载 SVG 后。

我不敢相信没有简单/可靠的方法可以从 HTML 中访问 SVG 元素（在此处/网络搜索） - 非常感谢对此的帮助！

或者，如果有某种方法可以从 HTML 中调用 SVG 中定义的函数（反之亦然），那也可以。一般来说，SVG 和 HTML 之间进行通信的任何方式。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你怎么敢 2024-10-22 20:10:02

这是我成功使用的一项技术，在（非常好的）O'Reilly“SVG Essentials”一书中提到：

将 JavaScript 代码添加到 SVG 文档本身并处理根 svg 元素上的加载事件。
在此 svgScript.js 加载事件处理程序中，写出您需要通过内置 parent 变量向 HTML 端脚本公开的任何内容。
```
函数 init(evt) {
    svgDocument = evt.target.ownerDocument;
    父级.theSvgDocument = svgDocument;
}
```
返回 HTML 端脚本，您现在可以直接访问和使用此参考。
```
var svgDocument = theSvgDocument;
```

在此示例中，我们公开了 SVG Document 对象，但您可以传递任何对象或函数。在我的项目中，我实际上公开了某种控制器对象引用，以便我的 SVG 端脚本包含用于操作 SVG 文档的所有逻辑，而 HTML 端脚本仅获取此控制器对象并调用其公共方法。

Here's a technique I have used successfully, mentioned in the (very good) O'Reilly "SVG Essentials" book:

Add JavaScript code to your SVG document itself and handle the load event on the root svg element.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)">
<script type="text/ecmascript" xlink:href="svgScript.js" />

In this svgScript.js load event handler, write out whatever you need to expose to the HTML-side script through the built-in parent variable.
```
function init(evt) {
    svgDocument = evt.target.ownerDocument;
    parent.theSvgDocument = svgDocument;
}
```
Back in your HTML-side script, you can now directly access and use this reference.
```
var svgDocument = theSvgDocument;
```

In this example we expose the SVG Document object but you could pass on any object or a function. In my project I actually exposed some kind of controller object reference so that my SVG-side script contains all the logic for manipulating the SVG document, and the HTML-side script merely grabs this controller object and calls public methods on it.

回复收藏 0 原文

残龙傲雪 2024-10-22 20:10:02

我尝试了此处/其他地方建议的不同组合/解决方案，看起来处理 SVG 的最佳方法是将 SVG 元素嵌入到 HTML 中 - 只要确保将其命名为 .xhtml 即可。一旦你这样做了，你就可以简单地浏览 DOM 并做你想做的事情（就像 yankee 建议的那样）。

我已经验证这适用于当前版本的 Chrome、FF、Safari、IE 和 Opera。它也适用于 IE8。下面是一个粗略的示例，其中有一个按钮和一个渐变栏 - 如果单击该按钮，渐变栏就会变成红色。

<button style="display: block;" onclick="document.getElementById('color').setAttribute('style', 'stop-color:#FF0000');">Color</button>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="49px" height="376px" viewBox="0 0 49 376" enable-background="new 0 0 49 376" xml:space="preserve">
<g>
    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="24" y1="376" x2="24" y2="1.0005">
        <stop  offset="0" style="stop-color:#FFFFFF"/>
        <stop id="color" offset="1" style="stop-color:#000000"/>
    </linearGradient>
    <path fill="url(#SVGID_1_)" d="M48,366c0,5.522-4.477,10-10,10H10c-5.523,0-10-4.478-10-10V11C0,5.477,4.477,1,10,1h28
        c5.523,0,10,4.477,10,10V366z"/>
</g>
</svg>

I tried different combinations/solutions suggested here/elsewhere, and looks like the best way to handle SVG is to embed the SVG element in the HTML - just make sure you name it as .xhtml. Once you do that, you can simply navigate the DOM and do what you want (like yankee suggested).

I've verified that this works in the current versions of Chrome, FF, Safari, IE, and Opera. It also works in IE8. Below is a rough example that has a button and a gradient bar - if you click on the button, it turns the bar red.

<button style="display: block;" onclick="document.getElementById('color').setAttribute('style', 'stop-color:#FF0000');">Color</button>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="49px" height="376px" viewBox="0 0 49 376" enable-background="new 0 0 49 376" xml:space="preserve">
<g>
    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="24" y1="376" x2="24" y2="1.0005">
        <stop  offset="0" style="stop-color:#FFFFFF"/>
        <stop id="color" offset="1" style="stop-color:#000000"/>
    </linearGradient>
    <path fill="url(#SVGID_1_)" d="M48,366c0,5.522-4.477,10-10,10H10c-5.523,0-10-4.478-10-10V11C0,5.477,4.477,1,10,1h28
        c5.523,0,10,4.477,10,10V366z"/>
</g>
</svg>

回复收藏 0 原文