No cambia el color imagen SVG con js

Iniciado por SrTrp, 15 Mayo 2020, 08:11 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

SrTrp

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 (html4strict) [Seleccionar]

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style="background:#e9e9">
<object id="cabeza" width="500" height="500" class="svgClass" type="image/svg+xml" data="testsvg.svg"></object>
<button onclick="change();">change color</button>
  <script>
  var _currentFill = "#f00";

  function change(){
      console.log("entro");
      $('.st0').removeClass("rojo").addClass("verde");
      $("#xcapa").css("fill", "#f00");
  }
  </script>


</body>


y este es mi capa svg
Código (html4strict) [Seleccionar]

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.5, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
<style type="text/css">
.st0{fill:#171200;}
.st1{fill:#FFFFFF;}
.st2{fill:#f00000;}
</style>
<g id="Capa_1">
<g>
<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
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
s-27.04,129.81-76.15,177.12C431.25,516.44,365.95,542.5,296.5,542.5z"/>
<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
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
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
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
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
C152.63,41,36,153.38,36,292s116.63,251,260.5,251S557,430.62,557,292S440.37,41,296.5,41L296.5,41z"/>
</g>
</g>
<g id="Capa_2">
<g>
<circle class="st1" cx="171.5" cy="250.5" r="41"/>
<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
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"/>
</g>
<g>
<circle class="st1" cx="408" cy="251" r="39.5"/>
<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
s17.91,40,40,40s40-17.91,40-40S430.09,211,408,211L408,211z"/>
</g>
</g>
</svg>

@XSStringManolo

#1
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.

EdePC

#2
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:

SrTrp

#3
16 Mayo 2020, 01:12 AM
Cita de: @XSStringManolo 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.


mmm tambien se podria como algo así
Código (php) [Seleccionar]
echo file_get_contents('/path/to/blank/us-map.svg');}
Imprimir
Ir Arriba Páginas1
Acciones del Usuario