javascript - examples - Cómo crear un objeto degradado con Raphael
raphael js examples (2)
ACTUALIZACIÓN: reescrito para la última API de Raphael:
<!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>
La documentación para la nueva API attr() se encuentra aquí .
Intentaba usar la biblioteca de gráficos Raphael JS. Me gustaría usar el degradado de atributo que debería aceptar un objeto. La documentación dice que se refieren a las especificaciones SVG. Encontré el objeto degradado en SVG, por ejemplo
<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>
pero ¿cómo puedo hacer referencia a eso desde mi javascript?
circle.attr("gradient", "myFillGrad");
no funciona :) Gracias de antemano
No creo que la API raphael actual le permita establecer las opacidades de detención individuales que no sean la última, a la que se le asigna el valor pasado al atributo "opacidad", por ejemplo:
this.ellipse(x, y, r, r).attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0})
... tendrá una opacidad de stop de 0 en su última parada. Para un control más detallado agregué este "caso" al modificador de análisis de atributos en mi raphael.js:
case "opacityStops":
if (attrs.gradient) {
var gradient = doc.getElementById(node.getAttribute(fillString)[rp](/^url/(#|/)$/g, E));
if (gradient) {
var stops = gradient.getElementsByTagName("stop");
var opacs=value.split("-");
for(var ii=0;ii<stops.length;ii++){
stops[ii][setAttribute]("stop-opacity", opacs[ii]||"1");
}
}
break;
}
También debe agregar una entrada correspondiente en el objeto "availableAttrs", por ejemplo:
availableAttrs = {<other attrs here>..., opacityStops:"1"}
Entonces se vería una llamada para crear un círculo con un degradado radial con diferentes paradas de opacidad:
this.ellipse(x, y, r, r).attr({stroke: "none", fill: "r(.5,.5)#fff-#fff:70-#000", "opacityStops": "1-0-0.6"}