如何使用Raphael创建渐变对象 [英] How to create gradient object with Raphael
本文介绍了如何使用Raphael创建渐变对象的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图使用Raphael JS图形库.我想使用应该接受一个对象的属性渐变.文档说要参考SVG规范.我在SVG中找到了渐变对象,例如
I was trying to use Raphael JS graphics library. I would like to use the attribute gradient which should accept an object. Documentation says to refer to SVG specs. I found the gradient object in SVG, for instance
<linearGradient id="myFillGrad" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="5%" stop-color="red" />
<stop offset="95%" stop-color="blue" stop-opacity="0.5" />
</linearGradient>
但是如何在我的JavaScript中引用呢?
but how can I reference that from within my javascript?
circle.attr("gradient", "myFillGrad");
不起作用:) 预先感谢
doesn't work :) Thanks in advance
推荐答案
更新: 为最新的Raphael API进行了重写:
UPDATE: Rewritten for the latest Raphael API:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Linear Gradient</title>
<script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
var paper = Raphael(10, 10, 800, 600);
var circle = paper.circle(150, 150, 150);
circle.attr({
"fill": "90-#f00:5-#00f:95",
"fill-opacity": 0.5
});
</script>
</body>
</html>
在此处找到了新的attr()
API的文档.
The documentation for the new attr()
API is found here.
这篇关于如何使用Raphael创建渐变对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文