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

 

 


Tema destacado: Tutorial básico de Quickjs


+  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 951 veces)
SrTrp

Desconectado Desconectado

Mensajes: 282


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
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.279


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

EdePC
Moderador Global
***
Conectado Conectado

Mensajes: 1.751



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: 282


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