Estoy tratando de modificar el trazo y el relleno de una .imagen svg.
He estado recibiendo información de Es posible manipular un documento SVG incrustado en un doc HTML con JavaScript?.

He usado javascript para manipular el código javascript en la cabecera:

function svgMod(){
    var s = document.getElementById("svg_img");
    s.setAttribute("stroke","0000FF");
}

el html:

...
<body onload="svgMod();">
<img id="svg_img" src="image.svg">  
...

Cualquier ayuda apreciada!

EDICIÓN:1
Yo creo que el principal problema aquí es cómo mostrar una imagen svg como un elemento svg, una imagen que, en lugar de un final como .png o .jpeg, utiliza un final de .svg, y además cómo el relleno y el trazo de entonces, puede ser manipulado!

5 Comentarios

  1. 38

    Si utiliza una etiqueta img, a continuación, por razones de seguridad, usted no será capaz de acceder a la DOM de los datos de la imagen. La imagen es efectivamente el mismo como una película de dibujos animados de mapa de bits tan lejos como el contenedor de que se trate.

    El uso de un <iframe> o <object> etiqueta te permitirá manipular el objeto incrustado DOM.

    • +1 por ser la única respuesta para entender el problema de la OP está teniendo.
    • Hey Robert, gracias por la respuesta. He utilizado un <object> pero todavía no cambiar el relleno. Javascript: function svgMod(){ alert("Fill in blue"); var circle1 = document.getElementById("svg_image_id"); circle1.style.fill="blue"; } y HTML: <object data="waveform.svg" type="image/svg+xml" id="svg_image_id"></object> <button onclick=circle1.style.fill="yellow";>Click to change to yellow</button> <button onclick=jacascript:svgMod();>Click to change to blue</button>
    • Usted desea algo como document.getElementById(«svg_image_id»).getSVGDocument().getElementById(«circle_id»).style.fill=»blue»;
    • Este método no funciona tan bien en la actualidad: stackoverflow.com/questions/22529398/…
    • Hoy en día no es diferente. Cross site scripting nunca ha sido permitido. Si el control de ambos dominios CORS permitiendo podría ayudar
  2. 8

    Ya he contestado algo como esto antes, guardar este fragmento de código como un archivo html.

    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
    <circle id="circle1" r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2"/>
    </svg>
    <button onclick=circle1.style.fill="yellow";>Click to change to yellow</button>

    EDIT: Para probar esta función se puede ajustar en la cabeza, aquí es una versión modificada:

    <html>
      <head>
      <script>
        function svgMod(){ 
          var circle1 = document.getElementById("circle1"); 
          circle1.style.fill="blue";
        } 
      </script>
      </head>
      <body>
      <svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
      <circle id="circle1" r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2"/>
      </svg>
      <button onclick=circle1.style.fill="yellow";>Click to change to yellow</button>
      <button onclick=jacascript:svgMod();>Click to change to blue</button>
      </body>
    
    </html>
    • Gracias Pedro, he probado tu solución y funciona bien para un círculo, pero cuando lo intento con el img atributo no funciona!
    • primero intente reemplazar mi círculo con el contenido de la svg desea utilizar, si esto funciona, usted debe ser capaz de integrar el svg y el cambio en la misma forma, creo que no se puede utilizar la etiqueta img para hacer esto
    • -1 Esto no funciona cuando un SVG es incorporado a través de <img>.
  3. 2

    Creo que es necesario modificar el trazo del elemento individual, no sólo el svg del mismo elemento. El svg estará compuesto de un árbol de nodos, y es que estos nodos que tienen el atributo de trazo.

    • Hola Phil, es un elemento img no es un elemento svg, es que la imagen es una .archivo svg.
    • Pruebe a cambiar a un embed: w3schools.com/svg/svg_inhtml.asp, a continuación, usted debe ser capaz de manipular como parte de la DOM.
    • Gracias por la respuesta de Phil. Me he convertido en el elemento de la imagen a <embed id=»svg_img» src=»svg_img.svg» type=»image/svg+xml»> pero el resultado es el mismo.
    • Parece que sólo puede ser modificada si un real svg etiqueta, a continuación,. Se puede incluir el contenido de la svg en línea en el archivo html?
    • Esta es la línea de la de cosas que estoy escribiendo: <svg id="another_id" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in"> <embed id ="svg_image_id" src="waveform.svg" height="300px;" width="100%" type="image/svg+xml"/> </svg>
    • Lo siento, me refiero a que en realidad sirven a los contenidos de la svg en línea en el archivo html, no a través de un embed?
    • permítanos continuar esta discusión en el chat

  4. 1

    Aquí es un simple ejemplo que muestra la modificación de un atributo de un SVG de objetos de HTML con javascript:

    <html>
      <body>
        <svg>
          <rect id="A1" x="10" y="10" width="25" height="25" fill="red" />
        </svg>
      </body>
    
      <script>
        alert("Acknowledge to modify object color.");
        var object = document.getElementById("A1");
        object.setAttribute("fill", "green");
      </script>
    </html>
  5. 0

    No estoy seguro de si esto ha sido resuelto. Yo había experimentado una situación similar y la mejor manera es poner el archivo svg en un <bject> etiqueta y cambiar el trazo de la propiedad y no de relleno de la propiedad.

    svgItem.style.stroke="lime";

    También puede referirse a la sección: Cambiar las Propiedades CSS de SVG en este enlace

    Yo había probado esta y podría cambiar el trazo de la propiedad. Por favor refiérase a este screnshot y a continuación está el código de ejemplo que trabajó para mí.

    JS:

    window.onload=function() {
    	//Get the Object by ID
    	var a = document.getElementById("svgObject");
    	//Get the SVG document inside the Object tag
    	var svgDoc = a.contentDocument;
    	//Get one of the SVG items by ID;
    	var svgItem = svgDoc.getElementById("pin1");
    	//Set the colour to something else
    	svgItem.style.stroke ="lime";
    };

Dejar respuesta

Please enter your comment!
Please enter your name here