1. Inicio
  2. Pregunta y respuesta
  3. actualización SVG dinámicamente

actualización SVG dinámicamente

2011-05-11 12 views
8

Tengo algunos objetos dentro de svg que pueden ser seleccionados por el usuario.actualización SVG dinámicamente

¿Hay alguna forma de: - enviar información sobre el objeto (id) que el usuario hizo clic en el 'documento html principal'? - dibuje desde un documento externo en el archivo svg.

Probablemente, mi descripción no está clara, ... Quiero poner en práctica algo como esto:

  1. usuario haga clic sobre cualquier objeto dentro de SVG-imagen;
  2. documento principal recibirá el id del objeto cliqueado y:
    • muestra información sobre ese objeto;
    • dibuja un objeto adicional dentro de la imagen svg.

preguntas: ¿Cómo a la comunicación desde SVG a partir de documentos y documentos a SVG?

Muchas gracias, cualquier pensamiento es bienvenido!

P.S. ¿Probablemente SVG no sea la mejor manera de hacerlo? ¿Qué es mejor entonces?

EDIT: Vi la recomendación sobre el uso de Raphael, .. pero me gustaría ver las opciones 'nativas'. (Por ahora estoy analizando la implementación de Raphaels para ver eso, pero no creo que esté haciendo exactamente lo que necesito).

Fuente

2011-05-11 Budda

Respuesta

6

Ver this example de cómo obtener el DOM de un SVG referencia del documento de nivel superior.

Y here's an example de cómo se puede llamar desde un archivo svg al documento principal.

SVG es muy adecuado para hacer lo que describes.

Fuente

2011-05-11 17:59:47

4

Sugiero utilizar una biblioteca como Raphaël para apoyar su construcción de SVG. Puede adjuntar eventos a objetos DOM que puede obtener a través de la propiedad node de un componente de imagen.

Fuente

2011-05-11 15:06:15 Nick

+0

+1 por recomendar a Raphael.Aún mejor, Raphael también admite VML cuando SVG no está disponible, lo que significa que puede producir gráficos vectoriales que funcionan en todos los navegadores, incluso en versiones antiguas de IE. – Spudley

+0

Pero Raphael solo trabaja con lienzos ...?! No puedo encontrar cómo trabajar con SVG usando Raphael ... ¿O lienzo es simplemente 'otra represantación' de svg? – Budda

+0

Dice "lienzo", pero no significa - es una forma ligeramente confusa de etiquetarlo. –

0

Raphaël.js es realmente una buena solución si desea atenerse a SVG/VML. Ahora puede usar lienzo (nueva funcionalidad de HTML 5) también. Canvas es una nueva etiqueta html (que puede tener id, eventos, ...) que le permite dibujar formas libres un poco como lo hace SVG. IE no admite canvas de forma nativa, por supuesto, y necesitará "excanvas.js" (este u otro, pero este funciona bastante bien ...) para hacerlo compatible con IE.

Solo tengo una restricción respecto del lienzo: el uso de imágenes de fondo hace que el IE sea muy lento. Utilizaría Raphaël.js si fuera algo que considerarías hacer.

Buena suerte

Fuente

2011-05-11 15:40:02 Zaziffic

+0

IE9 ya es compatible con lienzo. Y en realidad, ¿por qué la pregunta es "¿CÓMO?" – Budda

0

Nadie sugirió, pero accidentalmente, descubrí que svg ya es compatible con jQuery! http://plugins.jquery.com/project/svg

Probablemente ese no sea el mejor enfoque, pero intentaré trabajar con svg usando jquery. Y en realidad, eso parece razonable

Fuente

2011-05-15 01:50:58 Budda

Cuestiones relacionadas

 Cuestiones relacionadas