SVG stroke

HTML & CSS
1

I’m trying to change the stroke color of the line connecting the 2 rooms
http://lukesspot.com/indus_links/SVG/fid.html

I put the shape in a class, and have

.connector:hover { 
	stroke: blue;
}

in the css

2

Try removing the in-line stroke styling from the element as this will override the CSS.

1 Like
3

I tried, and put the stroke: black;
in the head for the class, took out the inline style for the color and its gone.

Is it not seeing the class?

Oh, my bad.

It works great now, so now Im going to figure out how to do this using paths instead.

4

Hi there lurtnowski,.

you may find that this amendment makes the line hover more accessible…

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

  </style>
  <a xlink:href="#openModal_169">
   <rect width="300" height="200" style="stroke-width:2;stroke:rgb(0,0,0)" class="link"/>
   <text x="95" y="20" fill="black">Room 169</text>
  </a>
  <a xlink:href="#openModal_180">
   <rect x="400" y="250" width="200" height="150" style="stroke-width:2;stroke:rgb(0,0,0)" class="link"/>
   <text x="450" y="270" fill="black">Room 180</text>
  </a>
  <a xlink:href="#openModal_169-180" class="connector">
   <rect width="512" height="48" x="49" y="201" fill="transparent" stroke="none"/>
   <polygon points="50,200, 50,225, 560,225, 560,250
					560,250,560,225,50,225,50,200" />  
  </a>
 
  </svg>

coothead

1 Like
5

ok, now that I got this example working, now I am going to do the same thing using your second example from before where you use paths.

Drawing the connector line was kind of confusing, I had to draw the polygon, then because I was getting a diagonal line from the start to the end point, I drew it again in reverse.

Is it better if I follow your lead and use for everything?

6

Hi there lurtnowski

I didn’t notice that your line retraced it’s steps. :unhappy:

Using “path” instead of “polygon” will rectify that…

  <a xlink:href="#openModal_169-180" class="connector">
   <rect width="512" height="48" x="49" y="201" fill="transparent" stroke="none"/>
   <path d="M50,200, 50,225 560,225 560,250"/>
  </a>

coothead

7

ok, whats the deal with the <rect>?

8

If you are asking that question. then I must presume
that you have not tested the code. :wonky:

The “deal” is that instead of having to hover over
the thin line to change it’s color, hovering over the
area that contains the line, will change it’s color. :winky:

coothead

1 Like
9

result

image
image1308×897 9.9 KB

10

Hi there lurtnowski,

oooooooops, sorry about that. :unhappy:

The code should, of course, have been…

   <path d="M50,200, 50,225 560,225 560,250" fill="transparent"/>

coothead

1 Like
11

Hey, why does the SVG render small when using IE as a browser, but perfect in Chrome?
http://lukesspot.com/indus_links/SVG/fid2.html#close

12

I honestly don’t know, but I also discovered some strange behavior of IE displaying SVGs over the weekend. I was thinking of making a topic to find out why.
It’s probably just another of IE’s many quirks.

1 Like
13

This problem was discussed in another thread of yours, starting
round about post #9…

Whats the best method?

coothead

1 Like
14

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