Question

8

How to create gradient object with Raphael

rated 0 times [ 13] [ 5] / answers: 1 / hits: 18191 / 16 Years ago, sun, february 22, 2009, 12:00:00

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>

but how can I reference that from within my javascript?

circle.attr(gradient, myFillGrad);

doesn't work :)
Thanks in advance

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

muhammadbrandend

Add To Favorites

Follow

Total Points: 670

Total Questions: 95

Total Answers: 97

Location: Saint Vincent and the Grenadines

Member since Sat, Sep 11, 2021

3 Years ago

answered 16 Years ago ravenl · Accepted Answer

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>

The documentation for the new attr() API is found here.