Playing around with SVG

I’m sort of toying around with SVG and learning how cool it is
is there a way to change the text when the mouse hovers over a room? (so when you put a mouse over room 180, that text changes to Room 180 title?

There may be a better way to do it but here is some trickery with a <tspan>

<!DOCTYPE html>
<head><title>SVG: FID</title>

<svg viewBox="0 0 1000 800" xmlns="">
text { font: bold 18px verdana; }
.system {
  fill: lightgray;
  pointer-events: all;
.system:hover { 
  fill: silver;
  stroke: blue;

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

.connector {
.connector:hover { 
  stroke: blue;

  <a xlink:href="system_169.html">
   <rect width="300" height="200" class="system"/>
   <text x="95" y="20" fill="black">Room 169</text>
  <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" dx="-98" dy="16">Hovered</tspan></text>
  <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"/>



im trying to get the to work
can I not center the text in the polygon, it seems tp go haywire when I try to mess with the 3rd line

Hi there lurtnowski,

this link…

How To Work With SVG Text

…may possibly be helpful. :winky:



The first example I posted added text on hover.
Here’s one that changes the text on hover, using the same concept.

1 Like

Great, will dl that, didn’t know you could do that over many shapes.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.