Adding Class to SVG

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: