[Turtle91]

Hi all!

After playing around a bit I thought I'd post my results in case anyone else was interested.
I built this using ePub2. If you are creating an ePub3 only book then you could possibly use javascript. The device/app would also need to support some specific css...so, definitely test on your device...

Using fill:currentcolor and stroke:currentcolor in your css works but only under certain circumstances.
In an ePub you could embed the svg code directly in the html page:

svg path, svg stroke {fill:currentcolor; stroke:currentcolor}

<p>yadda yadda</p>
<svg><g><path d="......"/></g></svg>
<p>yadda yadda</p>

Unfortunately, the last I heard, some readers/apps (kindle) don't support embedded svg very well. They want you to wrap the svg in an <img> tag (<img alt="" src="img.svg"/>). The value for currentcolor wont translate into the <img> tag. Also, embedding all that svg code can get a bit clunky, especially if you are using it a lot.

After practicing a bit more google-fu I found that you could use image masks in your css and simply set the backgound-color to currentcolor. Image masks are almost universally supported in browsers (except IE...go figure...), so there is a decent chance they will work on your device/app as well! The downside is that you are limited to fairly simple, monochrome style, images...but since these are used for scene breaks, and we're mostly worried about a dark image on a dark background, that's not too bad.

hr {border:none; margin:1.5em auto; text-align:center; overflow: hidden;
    page-break-inside: avoid; break-inside: avoid} 
    //*This is just the defaults I use for an hr...style yours however you wish *//

hr.ChDiv {
    height:.3em;
    background-color:currentcolor;
    -webkit-mask-image: url('../Images/img_ChDiv.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: auto 100%;
    -webkit-mask-position: center;

//* if your device doesn't support webkit, 
    then you could try the non-webkit version *//
    mask-image: url('../Images/img_ChDiv.svg');
    mask-repeat: no-repeat;
    mask-size: auto 100%;
    mask-position: center;
}

You will just need to set the height and mask-size to the proper size.

Here are a few screenshot examples:


Also, this technique is not limited to svg...it works fine with .png and .jpg...just remember it is using a mask, so none of the image detail will be visible, just a silhouette. Here are some screenshots with a .png

-webkit-mask-image: url('../Images/img_ChDiv.png')
        mask-image: url('../Images/img_ChDiv.png')

Hope that helps someone!

Cheers!


edit: it works with .jpg but jpg normally doesn't have a transparency channel, so it will just show up as a silhouette of the entire picture including the background. ie it will just be a solid rectangle...

edit: edit: you don't have to specify the mask-size separately...you can just leave it as mask-size: auto 100%; then you only need to change the height.