如何使用Raphael创建渐变对象 [英] How to create gradient object with Raphael

查看:76
本文介绍了如何使用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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆