Shine.js on SVG element

[edwardbattistini]

How to make Shine.js work on SVG elements or Font-icons ?

[benjaminbojko]

Right now Shine only supports text or box shadow.

I've looked into using CSS3 filters and SVG filters, but the performance hit was pretty big. If you're interested, feel free to look into this feature branch that I started a while ago but haven't had the time to finish:

https://github.com/bigspaceship/shine.js/tree/feature/filter-support

[mcguffin101]

This can work with icon fonts. The trick is not to use pseudo elements. When you create the font, map it to letter instead of a unicode. That may not be the best way of doing it but it worked for me. :)

[edwardbattistini]

Hi mcguffin,

Do you have an expemple of it ? for me the shadow does a square around the glyph…

— 
Edward Battistini 
Product Designer

On 23 September 2014 at 18:21:35, mcguffin101 ([email protected]) wrote:

This can work with icon fonts. The trick is not to use pseudo elements. When you create the font, map it to letter instead of a unicode. That may not be the best way of doing it but it worked for me. :)

—
Reply to this email directly or view it on GitHub.

[mcguffin101]

I don't have one live yet, I just figured it out.

When you create the font map the icon to the letter e (or any letter).

The html looks like this

<h2 id="headline" class="sicon ">e</h2>

And the css like this:
.sicon{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0); display: inline-block; font-family: "myiconfont" ; font-size: 80px; font-style: normal; font-variant: normal ; font-weight: normal; line-height: 1em; margin-left: 0.2em; margin-right: 0.2em; text-align: center; text-decoration: inherit; text-transform: none; width: 1em; }

[mcguffin101]

PS
The only thing that matters about the css is that you have the font family in there. The rest you can style anyway you want.

[Susie74TS]

Next

[hamblyfreeman]

Any updated on applying this to an SVG?

Seems like the SVG shadow is very similar to the box and text ones, so surely simple enough to modify?

https://jsfiddle.net/jamblo/kojh2xLk/387/