He estado trabajando con un documento HTML5 en línea con SVG y javascript animación.

Me gustaría tener un cuadro de pop-up cuando el usuario hace clic en cualquier parte, y me gustaría que el cuadro desaparece cuando el usuario hace clic en un lugar que no está en el cuadro. Esto significa que no puede utilizar $(window).click(), el cual trabaja.

He tratado de seleccionar el SVGs en la parte superior dándoles los nombres de clase y el uso de $(".svgclassname").click(), pero esto no parece funcionar. Tampoco selección individual con $("#svgname").click().

¿Cuál es el problema?

(Cuando puedo reemplazar $(".eyesvg") con $(window), aparece un cuadro azul cerca del cursor cuando el usuario hace clic en cualquier lugar en la ventana.)

InformationsquelleAutor Will | 2010-07-20

3 Comentarios

  1. 67

    Esto sucede porque SVG DOM spec difiere mucho de HTML DOM.

    SVG DOM es un dialecto diferente, y algunas propiedades tienen los mismos nombres, pero significan cosas diferentes. Por ejemplo, para obtener el nombre de la clase de un elemento svg, utilice:

    svg.className.baseVal

    Las propiedades afectadas por el presente se

    className is SVGAnimatedString
    height,width, x, y, offsetWidth, offsetHeight are SVGAnimatedLength

    Estos Animados propiedades son estructuras, con baseVal manteniendo el mismo valor que iba a encontrar en el DOM de HTML y animatedVal la celebración no estoy seguro de qué.

    SVG DOM es también faltan algunas propiedades de las bibliotecas dependen, como innerHTML.

    Este saltos de jQuery en muchas maneras, cualquier cosa que depende de las propiedades anteriores se produce un error.

    En general, SVG DOM y HTML DOM no se mezcla muy bien. Ellos trabajan juntos lo suficiente para atraerlo, y entonces las cosas se rompen en silencio, y otro ángel pierde sus alas.

    Escribí un poco de jQuery extensión que envuelve SVG elementos para hacer que se parezcan más a DOM de HTML

    (function (jQuery){
        function svgWrapper(el) {
            this._svgEl = el;
            this.__proto__ = el;
            Object.defineProperty(this, "className", {
                get:  function(){ return this._svgEl.className.baseVal; },
                set: function(value){    this._svgEl.className.baseVal = value; }
            });
            Object.defineProperty(this, "width", {
                get:  function(){ return this._svgEl.width.baseVal.value; },
                set: function(value){    this._svgEl.width.baseVal.value = value; }
            });
            Object.defineProperty(this, "height", {
                get:  function(){ return this._svgEl.height.baseVal.value; },
                set: function(value){    this._svgEl.height.baseVal.value = value; }
            });
            Object.defineProperty(this, "x", {
                get:  function(){ return this._svgEl.x.baseVal.value; },
                set: function(value){    this._svgEl.x.baseVal.value = value; }
            });
            Object.defineProperty(this, "y", {
                get:  function(){ return this._svgEl.y.baseVal.value; },
                set: function(value){    this._svgEl.y.baseVal.value = value; }
            });
            Object.defineProperty(this, "offsetWidth", {
                get:  function(){ return this._svgEl.width.baseVal.value; },
                set: function(value){    this._svgEl.width.baseVal.value = value; }
            });
            Object.defineProperty(this, "offsetHeight", {
                get:  function(){ return this._svgEl.height.baseVal.value; },
                set: function(value){    this._svgEl.height.baseVal.value = value; }
            });
        };
    
        jQuery.fn.wrapSvg = function() {
            return this.map(function(i, el) {
                if (el.namespaceURI == "http://www.w3.org/2000/svg" && !('_svgEl' in el))
                    return new svgWrapper(el);
                else
                    return el;
                });
            };
    })(window.jQuery);

    Se crea un contenedor de objetos SVG que les hace parecer HTML DOM con jQuery. Lo he utilizado con jQuery-UI para hacer mi SVG elementos lanzables.

    La falta de DOM interoperabilidad entre HTML y SVG es un desastre total. Todos los dulces de la utilidad de las bibliotecas escritas en HTML tiene que ser reinventada para SVG.

    • Hola Alexander, gracias por esta sugerencia! El fragmento de código que nos tiene bastante lejos, pero no funciona en Firefox 15 debido a un error se produce cuando el uso prototípico de la herencia directamente con un SVG elemento DOM. Hemos modificado para que funcione en Firefox y se utiliza con éxito. El código está aquí: github.com/RedBrainLabs/jquery.wrap-svg
    • Sólo cargar el script en Safari 8.0 tengo un error: «SyntaxError: Función de las instrucciones deben tener un nombre.» (svg.js la línea 1). Yo había puesto el script separado en un archivo js, svg.js y trató de carga antes y después de que el archivo de jQuery. Mismo error en ambos casos.
    • Esto se ve muy bien – pero, ¿cómo se supone que deben ser utilizados ?
  2. 4

    a veces no lo entiendo… pero en realidad no funciona con la clase-selector. Si utiliza el identificador $(«#mysvg») o el elemento $(«svg») que hace el trabajo! Extraño….

    Y sólo funciona cuando se mueve el onClick script en el encabezado para el cuerpo después de que el elemento svg! jquery sólo puede enlazar el onclick cuando el elemento es declarado antes de la unión.

    • Aha! Que funciona de maravillas. A pesar de jQuery problema con la clase-selector, estoy seguro de que voy a ser capaz de seleccionar múltiples identificaciones. Gracias!
    • Tenga en cuenta que puede seleccionar el formato SVG a los elementos de una clase mediante el uso de $('*[class~="eyesvg"]') (el atributo contiene la palabra selector).
  3. 4

    u puede utilizar jquery-svg plugin, como un encanto:

    <script>
        //get svg object, like a jquery object
        var svg = $("#cars").getSVG();
        //use jquery functions to do some thing
        svg.find("g path:first-child()").attr('fill', color);
    </script>

Dejar respuesta

Please enter your comment!
Please enter your name here