CODEWITHSUNDEEP
csssvg
Mayo
Mayo

Reputation: 379

Adding Class to SVG

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.

Upvotes: 7

Views: 29013

Answers (3)

Евгений Горелов
Евгений Горелов

Reputation: 19

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>

Upvotes: 0

Danny_ds
Danny_ds

Reputation: 11406

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>

Upvotes: 1

Jonathan Eunice
Jonathan Eunice

Reputation: 22443

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:

example

Upvotes: 6

Related Questions