Set color values for svg linear gradient creation in sass

Question

In sass, I have to support IE9 gradients by using svg linear gradient, which takes color hex string without #. Those are multi color gradients, that cannot be achieved by ie filters.

I have defined colors like this:

$color: #ff0000;

But for ie stuff to work, I need to have color without hash sign: ff0000 only.

It seems it is not possible to remove a character in string with sass ?

Does that mean that I must declare colors without #, and then add it in every mixin, except IE svg declarations ? This seems as bad approach but can't find a better solution, has anyone run into a similar issue ?

Answer 1

IE 9 will display gradients with # colour strings, the example below displays the gradient correctly in IE9. It wouldn't be valid SVG to have colours without the # although Webkit didn't enforce that at one time.

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="gradient" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#ff0000" stop-opacity="1"/>
            <stop offset="100%" stop-color="#0000ff" stop-opacity="0"/>
        </linearGradient>
    </defs>

    <circle r="120" cx="120" cy="120" fill="url(#gradient)"/>
</svg>