Adding Class to SVG - css

Question

I grabbed an SVG file, a map of NY State, and would like to add classes to various elements (the counties).
I tried adding a class via javascript. The class was added but visually nothing happened. I tried inserting the class directly. That didn't work. I tried adding a fill to an existing ID but that didn't do anything.
The existing code looks something like:
<polygon id="St_Lawrence" class="highlight" points="404.480957,7.098633
As said I tried adding a class, adding fill information to the existing ID (St_Lawrence) but that didn't work. However adding a style inline worked (see below)
<polygon id="St_Lawrence" style="fill:#FF0000;" points="404.480957,7.098633
That, unfortunately, doesn't really help.
The basic code is below:
<svg xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
width="633.475098" height="475.573242" viewBox="0 0 633.475098 475.573242"
style="overflow:visible;enable-background:new 0 0 633.475098 475.573242" xml:space="preserve">
<g id="Layer_1">
<g fill="#FFFFFF" stroke="#000000" stroke-width="0.25">
<polygon id="St_Lawrence" points="404.480957,7.098633 404.581543,7.098633 404.581543,7.098633
406.171387,7.099609 406.171387,7.099609 406.218262,7.109375 406.218262,7.109375 406.313965,7.109375 408.001465,7.123047
408.001465,7.123047 408.050293,7.123047 408.050293,7.123047 410.122559,7.138672 410.591309,11.53125 410.591309,11.53125
EDIT:
I worked with another SVG file and got classes to work as they should. Don't know SVG well enough to decipher why this one works while the first one doesn't.

Answer 1

You can use CSS styles (whether based on class, id, or some other CSS selector) in SVG. It's a little tricky to mix inline attributes (such as individual fill="blue"), the style attribute (e.g. style="fill: blue;"), and stylesheets, because SVG doesn't interpret them in the order of precedence you might expect (or at least, I expect).
In the above map, id-based selectors are probably going to be more convenient, because the counties are named by id.
Here's an example of CSS styling by id:
<svg xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
width="633.475098" height="475.573242" viewBox="0 0 633.475098 475.573242"
style="overflow:visible;enable-background:new 0 0 633.475098 475.573242" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#FFFFFF;stroke:#000000;stroke-width:0.25;}
.st1{fill:none;stroke:#000044;stroke-width:0.5;}
#St_Lawrence {
fill: blue; fill-opacity: 0.3;
}
#Queens {
fill: orange; fill-opacity: 0.9;
}
]]>
</style>
(with the rest of the document the same)
This highlights the two counties with fill colors:

Answer 2

Works fine with the following:
<style type="text/css">
<![CDATA[
.st0{fill:#FFFFFF;stroke:#000000;stroke-width:0.25;}
.st1{fill:none;stroke:#000044;stroke-width:0.5;}
.highlight{fill:#00ff00;stroke:#000044;stroke-width:0.5;}
]]>
</style>
<g fill="#FFFFFF" stroke="#000000" stroke-width="0.25">
<polygon id="St_Lawrence" class="highlight" points="404.480957,7.098633
However, <polygon> already has a class="st0" which has a fill:#FFFFFF, so you probably want to change or remove the st0 class.
As a test you could just add .st0:hover{fill:red;} which will highlight the county when the mouse is moved over it:
<style type="text/css">
<![CDATA[
.st0{fill:#FFFFFF;stroke:#000000;stroke-width:0.25;}
.st0:hover{fill:red;}
.st1{fill:none;stroke:#000044;stroke-width:0.5;}
]]>
</style>

Answer 3

You need to apply the style to the icon enclosed in the <path> tag: style="stroke:var(--button-bg-color)"
<svg width="32" height="62" viewBox="0 0 32 62" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25 37L31 31C31 31 27.3431 27.3431 25 25" style="stroke:var(--button-bg-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M31 61C14.4315 61 1 47.5685 1 31C1 14.4315 14.4315 1 31 1" stroke="#C4C4C4"/>
</svg>