elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  No cambia el color imagen SVG con js
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: No cambia el color imagen SVG con js  (Leído 2,953 veces)
SrTrp


Desconectado Desconectado

Mensajes: 323


Script/C#


Ver Perfil
No cambia el color imagen SVG con js
« en: 15 Mayo 2020, 08:11 am »

quiero cambiar el color de una capa de mi imagen svg pero no lo logro pero cuando agrego todo el codigo de la imagen svg sin el object si cambia el color, y yo lo que quiero no tener tantas lineas en un archivo pero si no hay de otra me adaptare.
Código
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. </head>
  3. <body style="background:#e9e9">
  4. <object id="cabeza" width="500" height="500" class="svgClass" type="image/svg+xml" data="testsvg.svg"></object>
  5. <button onclick="change();">change color</button>
  6.  <script>
  7.  var _currentFill = "#f00";
  8.  
  9.  function change(){
  10.      console.log("entro");
  11.      $('.st0').removeClass("rojo").addClass("verde");
  12.      $("#xcapa").css("fill", "#f00");
  13.  }
  14.  </script>
  15.  
  16.  
  17. </body>
  18.  

y este es mi capa svg
Código
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- Generator: Adobe Illustrator 23.0.5, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  3. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  4. viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
  5. <style type="text/css">
  6. .st0{fill:#171200;}
  7. .st1{fill:#FFFFFF;}
  8. .st2{fill:#f00000;}
  9. <g id="Capa_1">
  10. <g>
  11. <path id="xcapa" class="st0" d="M296.5,542.5c-69.45,0-134.75-26.06-183.85-73.38C63.54,421.81,36.5,358.91,36.5,292
  12. s27.04-129.81,76.15-177.12C161.75,67.56,227.05,41.5,296.5,41.5s134.75,26.06,183.85,73.38c49.1,47.31,76.15,110.22,76.15,177.12
  13. s-27.04,129.81-76.15,177.12C431.25,516.44,365.95,542.5,296.5,542.5z"/>
  14. <path d="M296.5,42c35.04,0,69.03,6.61,101.02,19.65c30.9,12.59,58.65,30.62,82.49,53.59c23.83,22.96,42.54,49.7,55.61,79.47
  15. C549.14,225.52,556,258.25,556,292s-6.86,66.48-20.39,97.3c-13.07,29.77-31.78,56.5-55.61,79.47
  16. c-23.83,22.96-51.58,40.99-82.49,53.59c-32,13.04-65.98,19.65-101.02,19.65s-69.03-6.61-101.02-19.65
  17. c-30.9-12.59-58.65-30.62-82.49-53.59c-23.83-22.96-42.54-49.7-55.61-79.47C43.86,358.48,37,325.75,37,292s6.86-66.48,20.39-97.3
  18. c13.07-29.77,31.78-56.5,55.61-79.47c23.83-22.96,51.58-40.99,82.49-53.59C227.47,48.61,261.46,42,296.5,42 M296.5,41
  19. C152.63,41,36,153.38,36,292s116.63,251,260.5,251S557,430.62,557,292S440.37,41,296.5,41L296.5,41z"/>
  20. </g>
  21. </g>
  22. <g id="Capa_2">
  23. <g>
  24. <circle class="st1" cx="171.5" cy="250.5" r="41"/>
  25. <path d="M171.5,210c22.33,0,40.5,18.17,40.5,40.5S193.83,291,171.5,291S131,272.83,131,250.5S149.17,210,171.5,210 M171.5,209
  26. c-22.92,0-41.5,18.58-41.5,41.5s18.58,41.5,41.5,41.5s41.5-18.58,41.5-41.5S194.42,209,171.5,209L171.5,209z"/>
  27. </g>
  28. <g>
  29. <circle class="st1" cx="408" cy="251" r="39.5"/>
  30. <path d="M408,212c21.5,0,39,17.5,39,39s-17.5,39-39,39s-39-17.5-39-39S386.5,212,408,212 M408,211c-22.09,0-40,17.91-40,40
  31. s17.91,40,40,40s40-17.91,40-40S430.09,211,408,211L408,211z"/>
  32. </g>
  33. </g>
  34. </svg>
  35.  
  36.  


En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: No cambia el color imagen SVG con js
« Respuesta #1 en: 15 Mayo 2020, 09:14 am »

No puedes.

O metes ambos en el mismo archivo sin el object o haces una petición GET al .svg y lo incluyes en el documento.


En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

EdePC
Moderador Global
***
Conectado Conectado

Mensajes: 2.041



Ver Perfil
Re: No cambia el color imagen SVG con js
« Respuesta #2 en: 15 Mayo 2020, 16:12 pm »

Exacto, si la estructura del SVG no forma parte del DOM no lo puedes manipular como si fuera parte del DOM XD:
En línea

SrTrp


Desconectado Desconectado

Mensajes: 323


Script/C#


Ver Perfil
Re: No cambia el color imagen SVG con js
« Respuesta #3 en: 16 Mayo 2020, 01:12 am »

No puedes.

O metes ambos en el mismo archivo sin el object o haces una petición GET al .svg y lo incluyes en el documento.


mmm tambien se podria como algo así
Código
  1. echo file_get_contents('/path/to/blank/us-map.svg');
}
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines