是否可以通过封装HTML来导航SVG对象的元素? [英] Is it possible to navigate SVG object's elements from enclosing HTML?

问题描述

我正在通过对象标签加载SVG，并且需要访问SVG的元素(以对其进行操作).我该怎么办?

I'm loading an SVG through an object tag and need to access SVG's elements (to manipulate them). How can I do that?

这是我所知道的部分解决方案:

Here're partial solutions I'm aware of:

1. 在设置参数的地方使用SVG参数 用于对象标签并进行参数化 SVG元素的属性.这 适用于rect等功能，但不适用于 我需要移动的g(组)(需要一个无法参数化的变换"，看起来像这样).

1. Use SVG params where you set params for the object tag and parameterize attributes of the SVG elements. This works great for things like rect, but not for g (group) that I need to move (that takes a "transform" that can't be parameterized, looks like).

我看到了使用建议 contentDocument或getSVGDocument() 在您获得的对象元素上 通过getElementById("yoursvgid"). 不幸的是，两者都不是 工作-是的，我称这些为 之后，将加载SVG.

I've seen suggestions to use contentDocument or getSVGDocument() on the object element that you get through getElementById("yoursvgid"). Unfortunately, neither is working - and yes, I'm calling these after the SVG is loaded.

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

I can't believe there is no simple/reliable way to access SVG elements from within HTML (searched here/web) - would really appreciate help on this!

或者，如果有某种方法可以从HTML内部调用SVG内部定义的函数(反之亦然)，那么也可以这样做.通常，SVG和HTML之间的任何通信方式.

Alternatively, if there is some way to call a function defined inside SVG from within HTML (or vice versa), that'd do it too. In general, any way to communicate between SVG and HTML.

推荐答案

我尝试了在此处/其他地方建议的不同组合/解决方案，并且看来处理SVG的最佳方法是将SVG元素嵌入HTML中-只需确保您将其命名为.xhtml.完成此操作后，您只需导航DOM即可完成所需的操作(如yankee建议).

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).

我已经验证了它可以在当前版本的Chrome，FF，Safari，IE和Opera中运行.它也可以在IE8中使用.下面是一个带有按钮和渐变条的粗略示例-如果单击该按钮，它将使条变成红色.

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>

这篇关于是否可以通过封装HTML来导航SVG对象的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！