raphael - 渐变色拉斐尔

Question

当在 Raphael 中我将颜色设置为90-#7ADADD-#338A93路径时，它变成了渐变。然后，当我检查元素时，我可以看到它的fill属性设置为：url(#490-_7ADADD-_338A93).

如果我尝试将其更改为90-#7ADADD-#338A93黑色。问题是如何从外部改变渐变颜色？我怎样才能url(#490-_7ADADD-_338A93)从我原来的计算这个90-#7ADADD-#338A93？

Answer 1

如果您查看完整的 SVG 源代码，它可能看起来像这样

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="490-_7ADADD-_338A93" x1="0%" y1="0%" x2="100%" y2="0%">
      ....
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#490-_7ADADD-_338A93)" />
</svg>

该url(...)部分实际上是对在 中定义的渐变的引用defs。如果您将引用更改为不存在的内容，它将以黑色填充显示。

在 Raphael 中，合乎逻辑的做法是将渐变操作保留在库中。如果你这样做...

path.attr({"fill": "90-#fff-#000"})
path.attr({"fill": "90-#ccc-#666"})

然后 Raphael 将插入一个新的linearGradient并为您引用它。

如果您真的需要操作 SVG 源代码，那么您可以执行类似...

var gradient = document.getElementById('490-_7ADADD-_338A93');
var stops = gradient.querySelectorAll('stop');
stops[0].setAttribute("stop-color", "#c00");
stops[1].setAttribute("stop-color", "#00c");

但这会破坏 VML 兼容性（IE 8 或更低版本）。