Add custom CSS in SVG network map

[dxeon]

It is possible to add custom CSS element to generated SVG network map?

I want to add these strings for highlight net links over by mouse in SVG file:

<style type="text/css">
.edge:hover {
    stroke:red;
    fill:red;
}

.edge:hover path{
    stroke:black;
    }
</style>

but i can`t locate the place in code where i can add it.

Thank you.

[wilpig]

https://github.com/samilliken/openDCIM/blob/master/report_network_map.php#L596

Below this line, above the first script line. This sounds like a clever css hack, i'll watch for your pull request.

[dxeon]

Hello Wilpig. We already tried something similar. Problem is that it puts it on page where you choose parameters. After choosing SVG it loads separate page and only consists of SVG code, without html tags.

[wilpig]

We're discussing it on irc.

[dxeon]

Actually, we have more advanced variant where you can click on links so they stay highlited. It consists of 2 parts:

1. CSS:

   <style type="text/css">
   .edge:hover {
   stroke: black;
   fill: red;  
   }
   .edge:hover path {
   stroke: black;
   stroke-width: 5;
   }
   .edge:hover text{
   font-size: 28px;
   }
   a:focus  {
   stroke: red;
   }
   a:focus > path  {
   stroke: black;
   stroke-width: 5;
   }
   a:focus a text{
   font-size: 28px;
   }
   </style>

2. Additional anchor to edge: <a xlink:href="#0"> and </a>

The end result of edge should look something like this:

<g id="edge1" class="edge">
<a xlink:href="#0">
<title>1392:1--1415:6</title>
<path fill="none" stroke="deepskyblue" opacity="1.0" d="M1287,-407C1287,-407 1580,-408 1580,-408 1580,-408 1598,-409 1598,-409 1598,-409 1740,-409 1740,-409 1740,-409 1758,-348 1758,-348 1758,-348 1973,-340 1973,-340"/>
<text text-anchor="middle" x="1669" y="-412.8" font-family="Times,serif" font-size="14.00">Port1--Port6</text>
</a>
</g>

Not sure if linking to other sites are allowed but I can demonstrate it on jsfiddle website

[wilpig]

The original author of the network map is discussing using https://github.com/mountainstorm/jquery.graphviz.svg/ and moving the svg inline to the page. It's a matter of having time to work with it though.

[dxeon]

Here is what we came up with. Just didn't know how to implement.

http://jsfiddle.net/V9bNT/329/

Lines 72 and 75 allows link PF.3.35.10 - PF.1.89.3 8--RF.3.35.10 - PF.1.89.3 8 to be clickable.

What he suggest using is even better I think.