2012-01-01 7 views
6

Tengo un código SVG en línea dentro de una página HTML,SVG en HTML con un elemento de script

<body> 
<div style="width:1000px;height:1000px"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svgcanvas" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<g id="viewport"> 
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> 
<script xlink:href="js/SVGPan.js" type="text/javascript"/> 
</svg> 

El script se invoca correctamente en Firefox 7.0, pero no en Chrome 16.0. ¿Por qué esto es tan? ¿Y qué modificaciones debo hacer en el código para invocar el javascript en Chrome también?

+0

FWIW, Actualmente defiendo [SVG en XHTML] (http://phrogz.net/svg/svg_in_xhtml5.xhtml), no SVG en HTML. – Phrogz

+0

Sí. Este es solo un código simple que estoy probando para un proyecto universitario. – arv100kri

+0

@Phrogz ¿hay alguna ventaja para SVG en HTML5 en comparación con XHTML? Me refiero al soporte de SVG porque HTML4 genera tanto dolor de cabeza con SVG. – Alex

Respuesta

5

Pruebe <script></script> en lugar de <script/>, he tenido problemas con esto antes.

+0

¡Oh, guau! Algo tan simple :) ¡Muchas gracias! – arv100kri

+0

¿Funcionó? Luego, marque esta como la respuesta correcta haciendo clic en la marca de verificación a la izquierda de mi respuesta. –

+0

@ EmilStenström - Una prueba rápida muestra que funciona (+1), aunque por una razón bastante curiosa. Ver mi respuesta – Alohci

9

Interesante pregunta.

Algunas cosas a tener en cuenta.

Dentro de HTML normal, <script ... /> no sería de cierre automático y todo lo que sigue sería parte del contenido del elemento de script.

Dentro del elemento <svg>, <script ... /> es de cierre automático y forma un elemento completo.

Tanto Firefox como Chrome tienen este derecho.

Sin embargo, la especificación HTML5 dice que la secuencia de comandos solo debe ser procesada cuando el analizador encuentra la etiqueta final. Como el elemento no tiene una etiqueta final, entonces, la secuencia de comandos no se debe procesar. Esto es lo que hace Chrome.

La especificación SVG, sin embargo, requiere que la secuencia de comandos se ejecute una vez que el elemento se ha cerrado por cualquier medio, no solo en una etiqueta final. Esto es lo que hace Firefox.

En mi humilde opinión, la especificación de HTML5 es incorrecta, y debe especificar un comportamiento coherente con SVG.

ACTUALIZACIÓN 10 agosto 2012.

La especificación HTML5 (en la actualidad sólo se WHATWG version) se ha modificado de manera que la secuencia de comandos SVG se debe ejecutar. Ver https://www.w3.org/Bugs/Public/show_bug.cgi?id=17995

ACTUALIZACIÓN: 16 Sep 2012.

La versión del W3C de la especificación HTML5 ahora también se ha corregido.

+1

Esta diferencia se debe al hecho de que SVG es un dialecto XML, y HTML5 es SGML con reglas de procesamiento especiales.Incrustar SVG en HTML5 tiene que ajustarse a la sintaxis * HTML5 * (hacerlo al revés no tendría sentido). Si esto le resulta molesto, use la serialización XML de HTML5 en la que esperaría que funcionaran los elementos 'script' de cierre automático (aunque no puedo encontrar la parte relevante de la especificación HTML5 ATM). – You

+0

Hmmm gracias! Estoy entrando al mundo de SVG. Tu respuesta ha aclarado muchas cosas. En una nota personal, creo que el mundo de SVG y HTML DOM debería estar un poco más racionalizado de lo que es actualmente. Pero gracias de nuevo por una explicación clara :) – arv100kri

+0

+1 para la investigación; Interesante – mreq

Cuestiones relacionadas