<svg viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg">
<style>
text { font: bold 18px verdana; }
.system {
  fill: lightgray;
  stroke-width:2;
  stroke:black;
  pointer-events: all;
}
.system:hover {
  fill: silver;
  stroke: blue;
}

text:hover,
.system:hover + text {fill:none}

text:hover tspan,
.system:hover + text tspan  {fill:green}

.connector {
  stroke-width:5;
  stroke:black;
  fill:none
}
.connector:hover {
  stroke: blue;
}
</style>

  <a xlink:href="system_169.html">
   <rect width="300" height="200" class="system"/>
   <text x="95" y="20" fill="black">Room 169 <tspan fill="none" x="85" y="20">Title of Room</tspan></text>
  </a>
  <a xlink:href="system_180.html">
   <rect x="400" y="250" width="200" height="150" class="system"/>
   <text x="450" y="270" fill="black">Room 180 <tspan fill="none" x="430" y="270">Title of Room</tspan></text>
  </a>
  <a xlink:href="cable_169-180.html" class="connector">
   <rect width="512" height="48" x="49" y="201" fill="transparent" stroke="none"/>
   <polyline points="50,200, 50,225 560,225 560,250"/>
  </a>

</svg>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.