Highlight an edge in a graphviz generated svg

highlight-graphviz-edge.html

<!-- slap this somewhere at the top -->
<style>
      /* the lines within the edges */
      .edge:active path,
      .edge:hover path {
        stroke: fuchsia;
        stroke-width: 3;
        stroke-opacity: 1;
      }
      /* arrows are typically drawn with a polygon */
      .edge:active polygon,
      .edge:hover polygon {
        stroke: fuchsia;
        stroke-width: 3;
        fill: fuchsia;
        stroke-opacity: 1;
        fill-opacity: 1;
      }
      /* If you happen to have text and want to color that as well... */
      .edge:active text,
      .edge:hover text {
        fill: fuchsia;
      }
</style>

Thank you for providing this. It really helped. Just one comment, do you happen to know any way to bring edge to front when hovered on? Thanks.

and that code snippet makes the lines highlighted, not the arrows, is there any way to highlight arrows as well? Thanks.

@yijunwu Currently I use a different variant of this which also highlights arrows (and text attached to the edge if so desired) I'll update the snippet

<style>
      /* the lines within the edges */
      .edge:active path,
      .edge:hover path {
        stroke: fuchsia;
        stroke-width: 3;
        stroke-opacity: 1;
      }
      /* arrows are typically drawn with a polygon */
      .edge:active polygon,
      .edge:hover polygon {
        stroke: fuchsia;
        stroke-width: 3;
        fill: fuchsia;
        stroke-opacity: 1;
        fill-opacity: 1;
      }
      /* If you happen to have text and want to color that as well... */
      .edge:active text,
      .edge:hover text {
        fill: fuchsia;
      }
</style>

An edge within an svg generated by graphviz typically looks like this (taken from this graph of yarn v2)

<g id="edge27" class="edge">
<title>packages/plugin-node-modules-&gt;packages/yarnpkg-libzip</title>

<!-- this would be the line -->
<path fill="none" stroke="#007700" stroke-width="2" stroke-opacity="0.466667" d="M120.3,-726.1C224.56,-726.1 454.65,-726.1 454.65,-726.1 454.65,-726.1 454.65,-523.51 454.65,-523.51"></path>

<!-- this is typically the arrow/ endpoint --> 
<polygon fill="#007700" fill-opacity="0.466667" stroke="#007700" stroke-width="2" stroke-opacity="0.466667" points="456.75,-523.51 454.65,-517.51 452.55,-523.51 456.75,-523.51"></polygon>
</g>

@sverweij It works, thank you for sharing that!