[Pro] How to give SVGs a rollover (hover) color

Freeway
19

After 2.5 years, there’s no better time than the present to reopen an old thread, especially one that was left with no answer at all!

As everyone can read in my earlier post (stamped “23 Jul 2014, 12:16 pm”), a code-hack of “svg-shim.js” does NOT work to make SVG’s change color on mouseover.

So you folks don’t need to re-read this entire thread, let me just say that I am trying to achieve 2 things:

  1. Put a clickable link on an SVG.
  2. Change the color of the SVG on mouseover (i.e., a rollover).

That’s it. SOOOOO SIMPLE. Yet so stinking hard to get to work.

Yesterday I spent all afternoon exploring what might be possible using CSS, rather than hacking that"svg-shim.js" . I found the following site a good read:

https://svgontheweb.com

Since Freeway’s SVGimage action uses the tag when Freeway generates the page HTML, I focused on how to manipulate that.

Here’s what I did:

(1) New document.

(2) Sketch a graphics box and import a small SVG.

(3) Apply the SVGimage action to that box.

(4) Preview in browser. (Of course, there’s no link and no mouseover/rollover yet.)

(5) I used TextWrangler to edit the Freeway-generated “index.html” file, specifically the tag to add the HREF link, as follows:

<div id="DigiLinkIcon">
<a href="https://kiramek.com" style="display: block;">
<object style="pointer-events: none;" type="image/svg+xml" data="DigiLink_Icon.svg">
</a>
<img src="digilinkicon.png" width="57" height="62" alt="DigiLinkIcon" style="float:left"/></object></div>

(6) I then changed “sheet1.css” to add these 2 lines:

.path1:link { fill: #646464; }
.path1:hover { fill: #ff0000; }

(7) And then I edited the SVG code to add a “class” tag within every “path” tag, like this:

<g>
	<path class="path1" fill="#646464"...

(8) I then previewed my handiwork in Safari. The clickable link is now working, but still no mouseover/rollover SVG color-change! I’ve read in various places that the SVG tag “cannot be manipulated” and that would appear to be the case, seeing my code-hack of “svg-shim.js” (despite Walter’s help) and now my CSS trick hasn’t worked either.

So unless one of you kind people can see a flaw in my CSS implementation, then it is settled – cannot be manipulated.

I know that I can get the job done when the SVG is placed inline inside the HTML code. But the problem with that is the SVG is not cached, and I intend to use the same SVG on many pages, making caching more important.

Since this discussion can be applying to any web design tool, not just the now-defunct Freeway, I think it is good to discuss and find a solution. I would therefore appreciate hearing your thoughts and advice. (Surely I cannot be the only one among us who uses SVG and has tried to add links and mouseover color-changes on them!)

Thanks,

James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at: