How to properly apply styles to SVG classes?

Question

I have this SVG:

#lockSVG {
  display: block;
  width: 50px;
  height: 65px;
}

#lockSVG .lock-outer-line {
  stroke-dasharray: 20 !important;
}

#lockSVG .lock-circle {}

#lockSVG .lock-upper-line {}

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="lockSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 35" style="enable-background:new 0 0 25 35;" xml:space="preserve">
    <style type="text/css">
        .lock-outer-line {
            fill:none;
            stroke:#686868;
            stroke-width:2;
            stroke-linecap:round;
            stroke-linejoin:round;
            stroke-miterlimit:10;
        }
        .lock-circle {
            fill:none;
            stroke:#686868;
            stroke-width:2;
            stroke-linecap:round;
            stroke-miterlimit:10;
        }
        .lock-upper-line {
            fill:none;
            stroke:#686868;
            stroke-width:2;
            stroke-linecap:round;
            stroke-miterlimit:10;
        }
    </style>
    <path class="lock-outer-line" d="M4.4,13.5c-1.2,0.8-2,2.1-2,3.6v4c0,2.8,1.1,5.4,3.1,7.4c1.9,1.9,4.5,2.9,7.2,2.9c0.1,0,0.2,0,0.3,0
        c5.5-0.1,10-4.9,10-10.5v-3.8c0.1-1.8-0.9-3.3-2.4-4l-6.5-2.7c-0.8-0.3-1.8-0.4-2.6,0L10.1,11"/>
    <circle class="lock-circle" cx="12.7" cy="21.9" r="2.9"/>
    <path class="lock-upper-line" d="M7.1,15.1V9.9c0-3.1,2.5-5.6,5.6-5.6h0c3.1,0,5.6,2.5,5.6,5.6v8"/>
</svg>

and I'd like to style / play with some of its lines. The code inside the snippet works, the stroke-dasharray: 20 !important; part is rendered, yet, on my end, even if I am to paste <style></style> next to the SVG itself, after it and even in my original .css file, it just doesn't take effect.

My markup is: <img id="lock" src="<?php echo esc_url( ../../lock_animatable.svg'); ?>">, so I'm wrapping my SVG inside an img tag.

What could I be doing wrong? It's like the document isn't loading the CSS for this SVG alone.

You should check out [symbol defs](https://css-tricks.com/svg-symbol-good-choice-icons/). This is a very nice way to use the SVG and still have some style controls, although I haven't played with stroke-dasharray or others much... — random_user_name, Sep 25 '19 at 00:23

Rounin · Answer 1 · 2019-09-25T09:43:29.680

0

The standard syntax I usually use when adding CSS declarations to SVG files is:

<defs>
<style type="text/css"><![CDATA[

[... STYLES HERE...]

]]></style>
</defs>

Working Example:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 25 35">

<defs>
<style type="text/css"><![CDATA[

svg {
  display: block;
  width: 50px;
  height: 65px;
}

.lock-outer-line {
  fill: none;
  stroke: #686868;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  animation: strokeDashArray 6s linear forwards;
}

@keyframes strokeDashArray {
  0% {stroke-dasharray: 0;}
  100% {stroke-dasharray: 20;}
}

.lock-circle {
  fill: none;
  stroke: #686868;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.lock-upper-line {
  fill: none;
  stroke: #686868;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

]]></style>
</defs>


<path class="lock-outer-line" d="M4.4,13.5c-1.2,0.8-2,2.1-2,3.6v4c0,2.8,1.1,5.4,3.1,7.4c1.9,1.9,4.5,2.9,7.2,2.9c0.1,0,0.2,0,0.3,0 c5.5-0.1,10-4.9,10-10.5v-3.8c0.1-1.8-0.9-3.3-2.4-4l-6.5-2.7c-0.8-0.3-1.8-0.4-2.6,0L10.1,11" />

<circle class="lock-circle" cx="12.7" cy="21.9" r="2.9" />

<path class="lock-upper-line" d="M7.1,15.1V9.9c0-3.1,2.5-5.6,5.6-5.6h0c3.1,0,5.6,2.5,5.6,5.6v8" />
</svg>

edited Sep 25 '19 at 09:43

answered Sep 25 '19 at 00:20

Rounin

27,134
9
83
108

While this is a nice adition, my problem is actually the SVG not being inlined. If it's an `img src` or whatever, it's as if outer scripts don't have access to these ids from inside the SVG itself. What to do? I don't want to always inline SVGs. – coolpasta Sep 25 '19 at 00:21
If you want to `img` reference an SVG, then you need to include all the styles for the SVG in the `<![CDATA[ ... ]]>` as in the (updated) example above. – Rounin Sep 25 '19 at 00:25
Ah... wait. Do you want to ***animate*** the SVG using CSS? You didn't mention that explicitly in your question. See this question: https://stackoverflow.com/questions/46050871/css-animation-do-not-work-for-svg-in-img – Rounin Sep 25 '19 at 00:32
I see. What's wrong (even if I think it's ugly) with in-lining SVG so I can animate freely? – coolpasta Sep 25 '19 at 00:42
Nothing is wrong with inlining the SVG. See the example above (updated again) where I have inserted the animation into the CSS. – Rounin Sep 25 '19 at 09:45

How to properly apply styles to SVG classes?

1 Answers1