1

I have a simple SVG made in Illustrator, and each part of it I'd like to have a different color. The SVG currently looks like this.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Ellipse_2_xA0_Image_1_"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000"
     xml:space="preserve">
<circle cx="500" cy="500" r="13"/>
<circle fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="500" cy="500" r="20"/>
<circle cx="911" cy="500.5" r="7"/>
<circle cx="91" cy="500.5" r="7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="218.2" y1="501.5" x2="501" y2="218.7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="781.8" y1="501.5" x2="499" y2="218.7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="781.8" y1="499.5" x2="499" y2="782.3"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="501" y1="782.3" x2="218.2" y2="499.5"/>
</svg>

The class currently sits in a style sheet requested before the SVG. I've tried adding classes to the SVG, line, and circle tags to try and change the colors with either fill or stroke and it remains black. I've tried removing the stroke parameter as well (even though others said to keep it), yet it'll just remove it completely than allowing the CSS to take over. What am I doing wrong?

CSS:

.svgColor {
  stroke: #a90000;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <link href="/css/loading.css" rel="stylesheet"/>
</head>
<body>
  <img src="/svg/loadingSymbol.svg" alt="Loading Symbol">
</body>

Improve this question
4
  • I don't see the classes or the css...
    – miguel-svq
    Commented Jan 30, 2015 at 19:01
  • Fixed, sorry about that.
    – Dustin
    Commented Jan 30, 2015 at 19:03
  • It seems to be ok: jsfiddle.net/w0z7bxb7
    – miguel-svq
    Commented Jan 30, 2015 at 19:10
  • Seems I've made a fool of myself. I forgot of course the important part of my question. I've updated the first post. Apologies.
    – Dustin
    Commented Jan 30, 2015 at 19:24

2 Answers 2

Reset to default
3

If you are using an external css file you have to link it from your csv. Your svg is not inlined in the html, so the html css is not appliet to it.

Before the svg tag: <?xml-stylesheet type="text/css" href="/css/loading.css" ?> shoud work. If it doesn't try to insert the svg with <object>.

Improve this answer
1
  • Yep, that's it. You can think of it as a barrier, that the <img> tag is creating between the HTML and SVG. There are also some other alternatives to get the CSS to the SVG: <style>@import</style> in the SVG, or a Link HTTP header attached to the SVG (might not work cross-browser, but you don't need to touch the SVG file).
    – Boldewyn
    Commented Jan 30, 2015 at 19:38
-2

Since the strokes are defined directly on the elements, you'll need to use !important in your css to override them.

.svgColor {
  stroke: #a90000 !important;
}
Improve this answer
1
  • Nope. CSS always takes advantage over attributes: style attribute -> <style> declarations -> fill="green" That was made deliberately to allow for automatic transformations (think XSLT) to be overwritten later by stylesheets.
    – Boldewyn
    Commented Jan 30, 2015 at 19:35

Not the answer you're looking for? Browse other questions tagged or ask your own question.