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>

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!