0

I have a map of the world as an SVG file. I am wanting to make all of the countries the same color.

I'm new to all of this. So I found out about CSS and I have some code like follows for the SVG

<path
     inkscape:connector-curvature="0"
     id="AF"
     data-name="Afghanistan"
     data-id="AF"
     d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z"
     style="fill:#f2f2f2;fill-rule:evenodd" />

So in a CSS file I wrote the following as a test:

#AF{
    fill: yellow;
}

however it doesn't work.

If i want to get all countries to be the same colour then I guess I need to try and write some loop, or wrap the entire svg tags inside some class and can just target that class?

Improve this question
2
  • @DBS thanks I'm not too sure. So I have all of my SVG inside of an html document and then add a link tag to reference my css file in the head tag of my html document.
    – Mathlearner
    Commented Apr 24, 2020 at 8:56
  • @DBS I don't think that applies because the question is not about an SVG element embedded in an <object>.
    – Andrew Morton
    Commented Apr 24, 2020 at 8:58

1 Answer 1

Reset to default
2

You already have a style set on that element so you'd either have to remove all the element fill styles in the markup i.e. the style="fill:XXX" parts or use !important to override the style.

I've used !important below.

#AF{
    fill: yellow !important;
}
<svg viewBox="1300 300 600 600">
<path
     inkscape:connector-curvature="0"
     id="AF"
     data-name="Afghanistan"
     data-id="AF"
     d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z"
     style="fill:blue;fill-rule:evenodd" />
</svg>

Improve this answer
0

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