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

【问题标题】：Set color values for svg linear gradient creation in sass在 sass 中设置 svg 线性渐变创建的颜色值
【发布时间】：2013-07-16 16:49:10
【问题描述】：

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

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

$颜色：#ff0000;

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

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

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

【问题讨论】：

标签： svg internet-explorer-9 sass

【解决方案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>

【讨论】：

谢谢，不过，我必须通过 css 添加属性，并且对 xml 进行编码。请参阅colorzilla.com/gradient-editor，在 css 下。属性为 url(data:image/svg+xml;base64 ...
该网站正在使用哈希创建 base64 编码的 url。尝试解码答案，你会看到。
似乎可以使用 utf8 但仍然 # 需要编码，所以我无法创建我的 sass mixin ...stackoverflow.com/questions/10768451/inline-svg-in-css
# 在 colorzilla 示例中未编码为 %23，它只是 base64 编码。如果您不要对其进行base64编码，那么是的，您确实需要对其进行转义。