A couple of days ago I received an SVG from some designers, and I am to implement it with some color alterations and the typical hover effects and such, /edit: but the main thing for now is to just be able to control the background color /edit/.
The HTML looks like this:
<div>
<svg class="drawelements" viewBox="50 200 550 360">
<polygon fill="red" points="312.200 265.600, 312.200 332.300, 265.600 332.300, 265.600 265.600, 312.200 265.600, 312.700 265.100, 265.100 265.100, 265.100 332.800, 312.700 332.800, 312.700 265.100, 312.700 265.100"></polygon>
<path class="st0" d="M369 265.6v66.7h-46.6v-66.7H369M369.5 265.1h-47.6v67.7h47.6V265.1L369.5 265.1z"></path>
<path class="st0" d="M425.7 265.6v66.7h-46.6v-66.7H425.7M426.2 265.1h-47.6v67.7h47.6V265.1L426.2 265.1z"></path>
<path class="st0" d="M480.6 265.6v66.7H434v-66.7H480.6M481.1 265.1h-47.6v67.7h47.6V265.1L481.1 265.1z"></path>
<path class="st0" d="M537.3 265.6v66.7h-46.6v-66.7H537.3M537.8 265.1h-47.6v67.7h47.6V265.1L537.8 265.1z"></path>
<path class="st0" d="M255.5 265.6v66.7H209v-66.7H255.5M256 265.1h-47.6v67.7H256V265.1L256 265.1z"></path>
<path class="st0" d="M537.3 207.3v49.4H209v-49.4H537.3M537.8 206.8H208.5v50.4h329.3V206.8L537.8 206.8z"></path>
</svg>
</div>
Here is a fiddle of how it looks: fiddle
I wanted to test with a polygon at the top, just to make sure that it was not the path element that was working against me.
Regular styling with CSS doesn't work, and hard coded styling within each element does not work. Is it because I need to use something else than background-color or fill?
If you look at the fiddle, please don't mind the viewBox. The actual svg contains many more elements which I removed for this post.