Set inline SVG fill color by CSS related to outside classname

I want to load a SVG several times on my html page, and change the color of a path to different values related to a class outside the svg:

.red svg path {
  fill: #ff0000;
}

.green svg path {
  fill: #00ff00;
}

But is does not work. All the paths have the color of the first svg on the page.

Why is it like that, and what are the possibilities to have the same inline SVG with different fill colors on one page?

I build a jsfiddle: https://jsfiddle.net/1p0svg9u/