2011-05-02 37 views
12

Veo que la etiqueta <script> se puede usar dentro de la etiqueta svg (ref). Además, los elementos dentro de la etiqueta svg son accesibles a través de JavaScript fuera de la etiqueta ya que son parte de DOM. No pude encontrar muchos detalles sobre cuál es mejor. Normalmente, guardo todo el código JS en un archivo separado e incluyo la referencia en html. ¿Puedo hacer lo mismo con el script dirigido a svg elements también? Además, leo que también puedo dar un enlace a un archivo JS externo dentro de la etiqueta svg.SVG <script> elemento: por dentro o por fuera?

Para ser más claros, supongo que tengo una página web (html5) con una etiqueta svg incorporada. el svg contenía algunas formas básicas, que necesito la interacción del mouse. Puedo usar jQuery, pero no otro complemento externo. ¿Recomendaría mantener todo el JavaScript (para los elementos fuera y dentro de svg) en un solo archivo, o mantener la parte svg separada? ¿También está bien referirse a los elementos dentro de la etiqueta svg usando jQuery? Cualquier ineficiencia si lo hago?

Respuesta

8

La colocación de un elemento de <script> dentro SVG (si se utiliza el código en línea o se hace referencia en otro archivo a través de xlink:href) es correcta cuando el guión es apropiado para el propio SVG, con o sin otro contexto, se puede colocar dentro. Esto es necesario, por ejemplo, si tiene solo a scripted SVG document.

Por ejemplo, supongamos que tiene una página HTML e incluye dos archivos SVG.

  • El primer archivo SVG tiene algunas animaciones personalizadas creadas mediante JavaScript. Este archivo SVG debe tener su propio elemento de script directamente.

  • El segundo archivo SVG es simplemente una imagen elegante, y desea que cuando haga clic en esa imagen se envíe un formulario en su página HTML. Para esto, la secuencia de comandos debe estar en su página HTML, ya que habla con SVG y su formulario HTML. Aquí hay un similar example, donde los botones en el HTML se usan para controlar el SVG.

La línea se hace más borrosa cuando se está inlining your SVG content in something XHTML5, en lugar de hacer referencia a un archivo SVG externa. ¿Es ese contenido SVG su propia bestia, o es tan parte de la página HTML como un párrafo particular del texto?

Yo personalmente tiendo a alinear mi SVG en el HTML y así mantener todo mi script fuera del SVG. Cualquiera de los dos funcionará.

+0

Agradable desglose de los escenarios y el proceso de pensamiento. Buenos ejemplos, también (¡aunque la animación del círculo aumenta mi presión arterial)! – peteorpeter

6

Puede llamar a un archivo externo utilizando el atributo xlink: href.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> 
    <script type="text/ecmascript" xlink:href="script.es"/> 
</svg> 

(fuente: W3C)

Además, le recomiendo que RaphaelJS, una biblioteca JavaScript que permite multi-navegador de dibujo vectorial.

+0

gracias ... mi pregunta era más sobre separar el JS que objetivo para svg, o combinar y vincular junto con otros elementos html de orientación JS .. también, ¿necesito algún cuidado especial al abordar los elementos en svg tag o cualquier biblioteca como jQuery es igualmente buena para manipular elementos en svg. También vi http://keith-wood.name/svg.html, pero trato de utilizar la dependencia mínima en este momento. – bsr

+0

Personalmente, prefiero separar las secuencias de comandos del diseño y usar un archivo separado. Puede usar ** geElementById ** y ** getElementsByTagName ** como con DOM HTML habitual. –

Cuestiones relacionadas