¿Es posible navegar los elementos del objeto SVG desde el interior del HTML?

Estoy cargando un SVG a través de una etiqueta de objeto y necesito acceder a los elementos de SVG (para manipularlos). ¿Cómo puedo hacer eso?¿Es posible navegar los elementos del objeto SVG desde el interior del HTML?

soluciones parciales Acá yo sepa:

params Uso SVG donde se define params para la etiqueta de objeto y parametrizar atributos de los elementos SVG. Este funciona muy bien para cosas como rect, pero no para g (grupo) que necesito mover (que toma una "transformación" que no se puede parametrizar, parece).
que he visto sugerencias para utilizar contentDocument o getSVGDocument() en el elemento objeto que se obtiene a través getElemenById ("yoursvgid"). Desafortunadamente, ninguno de los dos está trabajando - y sí, llamo a estos después de que haya cargado el SVG.

No puedo creer que no hay manera sencilla/fiable para acceder a elementos SVG desde dentro HTML (búsqueda aquí/web) - realmente apreciaría ayuda en esto!

Alternativamente, si hay alguna manera de llamar a una función definida dentro de SVG desde HTML (o viceversa), eso también lo haría. En general, cualquier forma de comunicarse entre SVG y HTML.

Fuente

2011-02-06 Sekhar

Bueno ... Usted podría utilizar SVG en línea en lugar si las etiquetas de objetos ... – yankee

Para estar seguro, usted sabe que pueda [SVG incrustar dentro XHTML] (http://phrogz.net/svg/ svg_in_xhtml5.xhtml)? – Phrogz

Sí, pero estoy tratando de llegar también a IE8 (que desafortunadamente no puedo ignorar ... todavía). ¿O hay una solución en línea para IE8 también? – Sekhar

Probé diferentes combinaciones/soluciones sugeridas aquí/en otro lugar, y parece que la mejor manera de manejar SVG es incrustar el elemento SVG en el HTML - solo asegúrate lo nombra como .xhtml. Una vez que lo hagas, simplemente puedes navegar por el DOM y hacer lo que quieras (como sugirió Yankee).

He verificado que esto funciona en las versiones actuales de Chrome, FF, Safari, IE y Opera. También funciona en IE8. A continuación se muestra un ejemplo aproximado que tiene un botón y una barra de gradiente: si hace clic en el botón, la barra se vuelve roja.

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

Fuente

2011-03-08 22:34:40 Sekhar

Si su opción 2) no funciona, me gustaría ver su ejemplo. ¿En qué buscadores estás probando? ¿Estás usando un plugin svg?

Opción 2) es una de las cosas que comprueba el Acid3 test (subprueba n. ° 74).

Fuente

2011-02-06 11:29:08

No estoy seguro acerca de la prueba de Acid3. Me estoy volviendo indefinido tanto para contentDocument como para getSVGDocument() en Chrome 9 para mi código, pero la prueba Acid3 le da un 100/100. Lo he probado en otros navegadores, y FF3.6/IE9/Opera11 son objeto de ambos, por lo que el problema es solo con Chrome (no se verificó con otros navegadores, específicamente IE8). – Sekhar

Aquí es una técnica que he utilizado con éxito, se menciona en el (muy bien) O'Reilly libro "Fundamentos de SVG":

Añadir un código JavaScript a su documento SVG sí mismo y controlar el evento de carga en el elemento raíz svg.

<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" />

En este controlador de eventos de carga svgScript.js, escribe lo que sea necesario para exponer a la secuencia de comandos de HTML a través de la incorporada en el parent variable.
```
function init(evt) { 
    svgDocument = evt.target.ownerDocument; 
    parent.theSvgDocument = svgDocument; 
} 
```
Detrás en su secuencia de comandos del lado HTML, ahora puede acceder directamente y utilizar esta referencia.
```
var svgDocument = theSvgDocument; 
```

En este ejemplo se exponga el objeto SVG documento, pero se podía pasar en cualquier objeto o una función. En mi proyecto expuse realmente algún tipo de referencia de objeto controlador para que mi script SVG-side contenga toda la lógica para manipular el documento SVG, y la secuencia de comandos del lado HTML simplemente agarra este objeto controlador y llama a los métodos públicos sobre él.

Fuente

2011-02-07 22:43:27 Clafou

Gracias, sí, también probé esto (padre en SVG), pero el valor no pasó al HTML (la variable no está definida). De nuevo, esto está en Chrome (v9); funcionó bien en FF3.6, por ejemplo. – Sekhar

¿Podría usar SVGweb? Aquí está an example de usar una etiqueta 'objeto'.No soy de ninguna manera un chico SVGweb, pero estoy viendo el ejemplo en el inspector de Chrome y puedo ver los nodos <g> bien. (Además, tendrías compatibilidad con IE incorporada).

Es otra dependencia, sin embargo (y también se basan en comentarios condicionales para IE, no estoy seguro si eso es aceptable en tu situación).

Como alternativa, podría cheat off their source code y ver cómo lo hacen. (Santa mierda, pusieron tomos de documentación allí!)

Fuente

2011-02-11 01:46:44 peteorpeter

¿Es posible navegar los elementos del objeto SVG desde el interior del HTML?

Respuesta

Cuestiones relacionadas