SVG with text and graphic - how to style with CSS - css

Question

Trying to convert my auto-generated charts from PNG to SVG. Chart and axis are easy, but I don't know how to implement the legend in a nice + good-looking way.
My results so far are looking like this:
https://jsfiddle.net/m4zuqk12/ , an (absolute) minimum example would be:
graph.svg:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet href="graph.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="768" version="1.1">
<g class="trajectory trajectory-b">
<path d="M 142 307 L 333 307 L 333 242 L 353 242" fill="none"/>
<path d="M 100 718 m 0 11.5 l 50 0"/>
<text x="160" y="733" class="legend">Graph 2</text>
</g>
<g class="trajectory trajectory-c">
<path d="M 177 357 L 325 357 L 325 450 L 431 450" fill="none"/>
<path d="M 562 718 m 0 11.5 l 50 0"/>
<text x="622" y="733" class="legend">Graph 3</text>
</g>
<g class="trajectory trajectory-d">
<path d="M 232 542 L 332 542 L 332 507 L 432 507" fill="none"/>
<path d="M 100 718 m 0 34.5 l 50 0"/>
<text x="160" class="legend"><tspan dy="1.2em">Graph 4</tspan></text>
</g>
<g class="legend">
<path class="trajectory-b" d="M 100 668 m 0 11.5 l 50 0"/>
<path class="trajectory-c" d="M 562 668 m 0 11.5 l 50 0"/>
<path class="trajectory-d" d="M 100 668 m 0 34.5 l 50 0"/>
<text x="100" y="668">
<tspan class="trajectory-b" x="160" dy="1.2em">Graph 2</tspan>
<tspan class="trajectory-c" x="622" dy="0">Graph 3</tspan>
<tspan class="trajectory-d" x="160" dy="1.2em">Graph 4</tspan>
</text>
</g>
</svg>
graph.css:
g.axis {
stroke: black;
}
.legend .trajectory-b,
g.trajectory-b {
stroke: red;
fill: red;
}
.legend .trajectory-c,
g.trajectory-c {
stroke: green;
fill: green;
}
.legend .trajectory-d,
g.trajectory-d {
stroke: blue;
fill: blue;
}
g.trajectory:hover path {
stroke-width: 5px;
}
Note there are two legends: The upper one has better text placement but no hover-effects, the lower one has hover-effects, but worse placement.
Upper legend: seems to be a proper way to write multi-line texts; but I do not see any way to access the graphs via CSS this way - is there?
Lower legend: the texts are written within the of the respective graph. This way, hover-effects via CSS are easy, but I have to guess the y-positions (which ist not possible in real life, because the styling is left to different CSS-designers). Is it possible to simulate the 1.2em-placement? I know that I'd have to wait vor SVG2.0 to use "100px+1.2em", but perhaps there is a way to work around this limitation?
Bonus problem: how to place the lines in front of the legend text? I can't see any way at all to do this properly.