svg - 在 sass 中设置 svg 线性渐变创建的颜色值

Question

在 sass 中，我必须通过使用 svg 线性渐变来支持 IE9 渐变，它采用不带 # 的颜色十六进制字符串。这些是多色渐变，无法通过 ie 滤镜实现。

我已经定义了这样的颜色：

$颜色：#ff0000；

但要让 ie 工作，我需要有没有井号的颜色：仅 ff0000。

似乎无法使用 sass 删除字符串中的字符？

这是否意味着我必须在没有# 的情况下声明颜色，然后在每个 mixin 中添加它，除了 IE svg 声明？这似乎是一种不好的方法，但找不到更好的解决方案，有没有人遇到过类似的问题？

Answer 1

IE 9 将显示带有 # 颜色字符串的渐变，下面的示例在 IE9 中正确显示渐变。没有 # 的颜色是无效的 SVG，尽管 Webkit 没有一次强制执行。

<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>