logoExtra: script.svg_ajax

A continuación mostramos los apuntes asociados a este extra:

SVG vs. Ajax
Después de añadir a nuestro Mapa de España las ciudades autónomas de Ceuta y Melilla hemos hecho algunas reflexiones
var resultado = false;
svgns = "http://www.w3.org/2000/svg";

_colores_ = ["red", "lime", "blue", "green", "aqua"];
_color_ = 0;
function _obtener_tags_svg_(url, donde) {
    ajax = objetoAjax();
    ajax.open("get", url, true);
    ajax.onreadystatechange = function()    {
        if (ajax.readyState == 4) {
            resultado = ajax.responseXML;

            // elemento raíz

            _svg_ = resultado.getElementsByTagName("svg")[0];
            xmlns = _svg_.getAttribute("xmlns");
            ancho = _svg_.getAttribute("width");
            alto = _svg_.getAttribute("height");
            box = _svg_.getAttribute("viewBox");

            _imagen_ = document.createElementNS(svgns, "svg");
            _imagen_.setAttribute("xmlns", xmlns);
            _imagen_.setAttribute("width", ancho);
            _imagen_.setAttribute("height", alto);
            _imagen_.setAttribute("viewBox", box);
            _imagen_.style.border = "1px solid black";

            //tag("nuevo_svg").appendChild(_imagen_);
            tag(donde).appendChild(_imagen_);

            _tags_ = resultado.getElementsByTagName("*");
            for (i = 0, total = _tags_.length; i < total; i++)    {
                switch(_tags_[i].tagName.toLowerCase())    {
                    case "polygon":
                        _puntos_ = _tags_[i].getAttributeNS(null, "points");
                        _figura_ = document.createElementNS(svgns, "polygon");
                        _figura_.setAttributeNS(null, "points", _puntos_);
                        _figura_.setAttributeNS(null, "stroke", _colores_[(_color_++ % _colores_.length)]);
                        _figura_.setAttributeNS(null, "stroke-width", "1");
                        _figura_.setAttributeNS(null, "fill", "none");
                        _imagen_.appendChild(_figura_);
                    break;

                    case "path":
                        _path_ = _tags_[i].getAttributeNS(null, "d");
                        _figura_ = document.createElementNS(svgns, "path");
                        _figura_.setAttributeNS(null, "d", _path_);
                        _figura_.setAttributeNS(null, "stroke", _colores_[(_color_++ % _colores_.length)]);
                        _figura_.setAttributeNS(null, "stroke-width", "1");
                        _figura_.setAttributeNS(null, "fill", "none");
                        _imagen_.appendChild(_figura_);
                    break;
                }// switch
            }// for
        }
    }
    ajax.send(null);
}

function _ini_() {
    tag("cargar_svg").style.margin = "1em";
    tag("cargar_svg").style.textAlign = "center";
    imagen_svg = document.createElement("img");
    imagen_svg.src = "http://upload.wikimedia.org/wikipedia/commons/a/a9/Provincias_de_Espa%C3%B1a.svg";
    //imagen_svg.src = "http://upload.wikimedia.org/wikipedia/commons/a/a9/Provincias_de_Espa%C3%B1a.svg";
    imagen_svg.id = "imagen_svg";
    tag("cargar_svg").appendChild(imagen_svg);
    poner_evento(imagen_svg, "load", _habilitar_script_);
    poner_evento(imagen_svg, "error", _inhabilitar_script_);
}

function _habilitar_script_()    {
    poner_evento(tag("clonador"), "click", _obtencion_inicial_);
    tag("clonador").disabled = false;
}

function _obtencion_inicial_(){
    _obtener_tags_svg_("http://upload.wikimedia.org/wikipedia/commons/a/a9/Provincias_de_Espa%C3%B1a.svg", "nuevo_svg")
    tag("clonador").disabled = true;
    poner_evento(tag("mapa_alt_1"), "click", _cargar_svg_);
    poner_evento(tag("mapa_alt_2"), "click", _cargar_svg_);
    poner_evento(tag("mapa_alt_3"), "click", _cargar_svg_);
}

function _inhabilitar_script_()    {
    alert("No se ha podido cargar la imagen svg");
}

function _cargar_svg_()    {
    while (tag("otros_mapas").hasChildNodes())
        tag("otros_mapas").removeChild(tag("otros_mapas").firstChild);
    _url_ = this.alt;
    _obtener_tags_svg_(_url_, "otros_mapas");
}

poner_evento(window, "load", _ini_);

Este código ha sido leído en 76 ocasiones.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.script.svg_ajax) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024 | Otros enlaces: buscador