Imprimir Página - No cambia el color imagen SVG con js

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

<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

<?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>

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: SrTrp en 15 Mayo 2020, 08:11 am