PHP CSS control of SVG

Question

I am attempting to use CSS to control the colors of an .svg file. I use an html to call the svg. The colors on my page are controlled by .php (everything else is in . I am certain i must be missing a step as I am unable to get the color php page to control the svg.

<div class="headerPhoto">
    <img src="images/icon.svg">       
</div>

<rect class="iconRect" x="-7.7" y="-6.37" width="234.25" height="233.795" />
    <g>
        <path d="M119.575,125.577l-22.755,44.607l-71.538,-0.213l58.744,-115.155l35.549,70.761ZM46.732,156.877l42.041,0.125l16.054,-31.47l-20.891,-41.585l-37.204,72.93Z" style="fill:#383b40;"/>
        <path d="M199.718,169.971l-71.538,0.213l-22.755,-44.607l35.549,-70.761l58.744,115.155ZM120.173,125.532l16.054,31.47l42.041,-0.125l-37.204,-72.93l-20.891,41.585Z"/>
    </g>

    <path d="M240.789,48.355c0,-35.402 -28.742,-64.144 -64.144,-64.144l-128.29,0c-35.402,0 -64.144,28.742 -64.144,64.144l0,128.29c0,35.402 28.742,64.144 64.144,64.144l128.29,0c35.402,0 64.144,-28.742 64.144,-64.144l0,-128.29Z" style="fill:none;stroke-width:47.37px;stroke:#fff;"/>

<?php 
  header('content-type: text/css;');

  $color1 = $colorDarkGreen;
  $color2 = $colorWhite;
  $color3 = $colorGray;
?>

.iconRect {fill:<?=$color2?>;}

I am able to directly change the style values in the .svg file, but can't get the external stylesheets to work.

I am not certain what I am missing, any help would be great!

Answer 1

Most WordPress themes work like this, where the PHP variable echos in the style attribute of the PHP/HTML

<?php

  $colorWhite = #efefef;

?>

<element style='color: <?php echo $colorWhite ?>;'></element>

and that builds out the HTML

<element style='color: #efefef;'></element>

You can't use JavaScript or PHP or ... well - anything but CSS in CSS. ( you can do some functional stuff with a pre-processor ) but it still gets output to CSS.