Playing around with SVG

HTML & CSS
1

I’m sort of toying around with SVG and learning how cool it is
http://lukesspot.com/indus_links/SVG/
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?

2

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

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

<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,
text:hover tspan,
.system:hover + text,
.system:hover + text tspan  {fill:red}

.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</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" dx="-98" dy="16">Hovered</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>


</body>
</html>
3

im trying to get the to work
http://lukesspot.com/indus_links/SVG/system_169.html
can I not center the text in the polygon, it seems tp go haywire when I try to mess with the 3rd line

4

Hi there lurtnowski,

this link…

How To Work With SVG Text

…may possibly be helpful. :winky:

coothead

2 Likes
5

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

1 Like
6

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

7

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