0

I've got a svg

tick.svg:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px" viewBox="0 0 200 200"><circle cx="150" cy="150" r="40" stroke="#000" fill="none" stroke-width="6" class="tickCol" stroke-linecap="round></svg>

And I use it as

#checkBox{
    background: url('tick.svg') 50% 50% no-repeat #000;
}

I need to change the stroke color using css. I tried the below but no luck. How do I change the stroke color in css?

.tickCol{
  stroke: #f60;
}
Becky
  • 5,467
  • 9
  • 40
  • 73
  • Did you put the CSS in the SVG file? If not, that's your problem. – Robert Longson Aug 14 '15 at 17:42
  • @RobertLongson Thanks for your reply. Yes the url path is fine. – Becky Aug 14 '15 at 17:44
  • 1
    What URL path? There can't be a URL path if the CSS is embedded in the SVG file. – Robert Longson Aug 14 '15 at 17:44
  • I meant the `background: url('tick.svg')`. The I'm using an external css file. I want to be able to control the stroke color from my main css (external). – Becky Aug 14 '15 at 17:47
  • 1
    You're dead in the water then as that's not possible. An SVG used as a background image must be complete in a single file. No external references allowed. – Robert Longson Aug 14 '15 at 17:47
  • oh! should the svg be in an `img` tag to be able to update its stroke color? – Becky Aug 14 '15 at 17:50
  • 1
    only `` `` and ` – Robert Longson Aug 14 '15 at 17:52
  • Can you show how I could update my svg's circle using an `object` tag? – Becky Aug 14 '15 at 17:55
  • There are existing questions that cover that: http://stackoverflow.com/questions/4906148/how-to-apply-a-style-to-an-embedded-svg – Robert Longson Aug 14 '15 at 17:58
  • Thank you. I saw your stackoverflow profile and I was so happy to be able to communicate with you. :) I would be grateful if you could show me this as I'm going to be involve working with in inline svg in my carrier. – Becky Aug 14 '15 at 18:04
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/87021/discussion-between-robert-longson-and-becky). – Robert Longson Aug 14 '15 at 18:08

1 Answers1

0

If you want to use CSS to style individual parts of an SVG, you should be using the SVG inline rather than loading an SVG file as a background image.

Chris Coyier wrote an article called Using SVG, which gives a good overview of the different ways you can use SVGs and the limitations of each approach.

Here's a pen I made of a simple inline SVG with some basic styles applied. Aside from changing the stroke and fill properties, you can apply all sorts of styles to inline SVGs, regardless of how complex the shapes are.

<!-- HTML -->

<svg width="720" height="120">
  <circle class="foo" cx="90" cy="60" r="40"></circle>
  <circle class="bar" cx="180" cy="60" r="40"></circle>
  <circle class="baz" cx="270" cy="60" r="40"></circle>
</svg>

/* CSS */

.foo {
  /* default styles */
}
.bar {
  fill: blue;
}
.baz {
  fill: red;
  stroke: blue;
}

Hope this helps!

dmbaughman
  • 578
  • 2
  • 7