Quiero recuperar declarado SVG atributos mediante programación. Todo está contenido en línea, algo como esto:

<svg>
<path d="###########">
    <animate from="5" to="0" begin="3s" dur="1s" etc etc>
</path>
</svg>

Suena fácil peasy, ¿verdad? Pero estoy golpeando la pared. He leído este, pero para empezar:

document.getElementsByTagName('path');

parece que no funciona en IE, que es el principal foco de problemas. Siempre devuelve undefined.

(Soy consciente de que Es decir, sólo admite la animación mediante scripts, que es la ocasión para ello.)

De todos modos, el «get» parte funciona en Chrome, pero cuando este lista de nodos se registra en Dev Herramientas de la consola vuelve una ineficiente

[object Nodelist]

y cuando me registro de cada uno de los caminos puedo obtener una similar:

[object Text]

que es muy similar a la de IE, y no el habitual detallada de objetos de javascript, lo que es difícil saber lo que está pasando bajo el capó. Por último, cuando trato de recuperar el declarado atributos de la animación:

.getAttributeNS(null, 'dur')

no parece funcionar bien, incluso en Chrome. Herramientas Dev dice que la ruta de acceso del objeto de texto no tiene ‘getAttributeNS’ método. Lo mismo para el antiguo llano ‘getAttribute’. También he intentado «.contentDocument» en el archivo SVG, pero que no funciona bien. Básicamente, no tengo problemas en todos los configuración estos valores en cualquier navegador una la:

animation.setAttributeNS(null,'begin',startTimeRounded + 's');

Me parece que no puede obtener ellos. Cualquier orientación, muy apreciado.

P. S. los selectores de jQuery no funcionan en SVG elementos, y además yo prefiero no tener que cargar una biblioteca para solucionar este pequeño problema.

P. P. S. estoy de iterar sobre una enorme cantidad de rutas, de modo que las respuestas que sugieren que la configuración de la Id de cada elemento no son útiles en este caso. Quiero llegar a los elementos por su nombre. Cross-browser es el mejor, pero debe trabajar en IE…

  • [object Text] sería un nodo de texto, que no tiene atributos (que no debe confundirse con [object SVGTextElement]). Estás mirando a la derecha del nodo?
InformationsquelleAutor Ben | 2012-04-02

1 Comentario

  1. 4

    La getElementsByTagName y SVG del getAttribute elementos parece funcionar bien con IE. Quizas usted está tratando de conseguir la ‘dur’ atributo del elemento de ruta de acceso en lugar de desde el animar elemento? O bien, a partir de un nodo de texto de la ‘ruta’ elemento?

    SVG es muy estricta con respecto a los nodos de texto. Por ejemplo, si la ruta se define así:

    <path d="M 0 0 L 10 5 L 0 10 z" >
      <animate from="5" to="0" begin="3s" dur="1s">
    </path>

    Se tendrá en cuenta que el primer hijo de la ‘ruta’ elemento es un nodo de texto, mientras que el segundo es el ‘animar’ desea. Por lo tanto, el siguiente código debería funcionar

    var paths = document.getElementsByTagName('path');
    alert(paths[0].childNodes[1].getAttribute("dur")); //first path, second node ('animate'), the dur attribute

    Sin embargo, si se define todo sin ningún espacio entre el ‘camino’ y ‘elemento’:

    <path d="M 0 0 L 10 5 L 0 10 z" ><animate from="5" to="0" begin="3s" dur="1s"></path>

    A continuación, el anime será el primer hijo de ‘camino’ y el siguiente código se ejecutará ok:

    var paths = document.getElementsByTagName('path');
    alert(paths[0].childNodes[0].getAttribute("dur")); //now we can get the first child, as expected

    PS: este ‘animar’ va a hacer nada, como es incompleta

    • Que era él. Yo tenía ficha con el <set> y <animar> los niños de la ruta de acceso para la legibilidad, y que fue la creación de vacío de los nodos de texto, que fueron el origen de toda la confusión. La eliminación de todos los espacios entre los elementos soluciona el problema. La lección aprendida. Gracias Juan!

Dejar respuesta

Please enter your comment!
Please enter your name here