Changing SVG color (with object tag) in CSS and/or javascript, does not do anything

Question

I know you can't change the color of an svg with css if you use and img tag, and instead should make the svg inline, but in my case I have multiple large svg's and I want to change the color dynamically with javascript, so making them inline is not my best option.

Then I read about using object tag because that should work, but it doesn't in my case.

I have read some other questions but they didn't help me f.e. : How to access SVG elements with Javascript

1 of the 5 svg's:

  <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#D1D3D4;}
.st1{fill:#48484A;}
.st2{fill:#A7A9AC;}
.st3{fill:#A5A7AA;}
.st4{fill:#999B9E;}
.st5{fill:#86888A;}
.st6{fill:#6F7173;}
.st7{fill:#919396;}
.st8{fill:#95979A;}
.st9{fill:#9D9FA2;}
.st10{fill:#5C5D60;}
.st11{fill:#4D4D4F;}
.st12{fill:#B3B5B8;}
.st13{fill:#848689;}
.st14{fill:#464547;}
.st15{fill:#5F6062;}
</style>
<circle class="st0" cx="256" cy="256" r="72"/>
<rect x="205.27" y="248.48" class="st1" width="28.58" height="28.58"/>
<rect x="182.46" y="235.71" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -51.9599 51.6119)" 
class="st2" width="18.87" height="18.87"/>
<rect x="232.86" y="243.14" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -52.2999 63.5915)" 
class="st3" width="18.87" height="18.87"/>
<rect x="245.75" y="176.51" transform="matrix(0.9741 0.2262 -0.2262 0.9741 49.4071 -53.4856)" 
class="st4" width="24.77" height="24.77"/>
<rect x="210.3" y="288.4" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -62.63 58.4723)" class="st5" 
width="10.44" height="10.44"/>
<rect x="228.98" y="203.02" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -42.0119 60.2779)" 
class="st6" width="8.94" height="8.94"/>
<rect x="200.81" y="210.44" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -44.5261 53.9019)" 
class="st7" width="8.94" height="8.94"/>
<rect x="315.69" y="239.1" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -48.0412 81.5338)" 
class="st8" width="8.94" height="8.94"/>
<rect x="259.63" y="258.29" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -54.0773 68.9685)" 
class="st6" width="8.94" height="8.94"/>
<rect x="266.1" y="187.31" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -37.3152 68.5146)" 
class="st6" width="8.94" height="8.94"/>
<rect x="213.46" y="217.63" transform="matrix(0.8976 0.4409 -0.4409 0.8976 122.5313 -74.7543)" 
class="st9" width="17.34" height="17.34"/>
<rect x="258.74" y="208.67" transform="matrix(0.888 -0.4598 0.4598 0.888 -69.489 146.4779)" 
class="st6" width="14.47" height="14.47"/>
<rect x="228.74" y="219.06" transform="matrix(0.888 -0.4598 0.4598 0.888 -77.6288 133.849)" 
class="st10" width="14.47" height="14.47"/>
<rect x="291.47" y="278.06" transform="matrix(0.888 -0.4598 0.4598 0.888 -97.7318 169.2965)" 
class="st6" width="14.47" height="14.47"/>
<rect x="319.19" y="216.97" transform="matrix(0.8976 0.4409 -0.4409 0.8976 137.6805 -124.3104)" 
class="st6" width="34.3" height="34.3"/>
<rect x="248.1" y="228.29" transform="matrix(0.9966 -0.0818 0.0818 0.9966 -19.1719 22.5035)" 
class="st11" width="33.7" height="33.7"/>
<rect x="287.65" y="191.42" transform="matrix(0.8976 0.4409 -0.4409 0.8976 119.873 -110.9557)" 
class="st12" width="22.11" height="22.11"/>
<rect x="241.11" y="302.53" transform="matrix(0.8976 0.4409 -0.4409 0.8976 164.0936 -79.0563)" 
class="st13" width="22.11" height="22.11"/>
<rect x="263.89" y="275.74" transform="matrix(0.9922 -0.1245 0.1245 0.9922 -32.8863 35.6894)" 
class="st6" width="10.62" height="10.62"/>
<rect x="297.3" y="270.02" transform="matrix(0.9966 -0.0818 0.0818 0.9966 -22.6692 26.938)" 
class="st3" width="40.01" height="40.01"/>
<rect x="295.93" y="254.04" transform="matrix(0.8976 0.4409 -0.4409 0.8976 145.5914 -106.4894)" 
class="st14" width="12.03" height="12.03"/>
<rect x="279.98" y="249.98" transform="matrix(0.8976 0.4409 -0.4409 0.8976 142.1704 -99.8705)" 
class="st6" width="12.03" height="12.03"/>
<rect x="290.83" y="222" transform="matrix(0.9884 0.1518 -0.1518 0.9884 38.6111 -42.8973)" 
class="st7" width="19.04" height="19.04"/>
<rect x="235.2" y="284.39" transform="matrix(0.9988 0.0483 -0.0483 0.9988 14.4773 -11.4712)" 
class="st6" width="18.46" height="18.46"/>
<rect x="258.71" y="295.04" class="st15" width="30.48" height="30.48"/>
<rect x="182.44" y="265.81" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -60.1883 53.9574)" 
class="st6" width="30.48" height="30.48"/>
</svg>

HTML:

<object data="path/exp1.svg" type="image/svg+xml" id="svg" width="100%" height="100%"></object>

I know I said I wanted to change them with javascript dynamically, but even changing them in CSS with '!important' didn't work.

CSS

svg {
  fill: blue !important;
}

.exp0 {
   fill: blue !important;
}

I tried to use 'svg' and '.exp1' but neither of them worked. (blue is also just a test value).

Answer 1

Your problem is that your CSS is global for the host page itself. The HTML <object> element represents an external resource (think along the lines of an <iframe />) and have their own internal CSS contexts.

Unfortunately you can not style the nested elements inside it using global CSS - the stuff inside is essentially a separate web page.

You have to select individual SVG elements you want styled with javascript and apply styles programatically like here

Alternatively you can embed a <style> tag with your CSS inside the object, with the help of Javascript.

In any case, please note that these approaches work only if the object data attribute points to the same domain as the host page!

EDIT: Your SVG does not seem that big. Just inline it. Even if there are 10 big SVGs on your page just inline them. The downsides are not that big for smaller projects.