Question

在拉斐尔时，我在路径上将颜色设置为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中定义的渐变的引用。如果您将引用更改为不存在的内容，则会显示黑色填充。

在拉斐尔做的合乎逻辑的事情是在图书馆内保持你的渐变操作。如果你这样做......

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或更低版本）。

渐变色拉斐尔

1 个答案: