I'm using D3 to draw a certain shape layout for my map and the drew area has to be shaded. I am using line path to achieved the shape, What I couldn't figured out is how do I shade (fill) the area with a certain color. See picture for an example shape, just random in this case for visual aid.
you need to checkout the fill style property on paths.
<style>
path {
fill: red;
}
</style>
In order to fill the area described by these paths, simply assign the CSS attribute fill.
Related
I need to export my chart created in canvas as image file. I managed to do it but the image is transparent (no background). My question is, is there a way with code to add background color to existing image i got from canvas?
Example:
Canvas in browser:
Canvas when exported as .png:
You have several ways to accomplish your task.
By far the easiest is to fill the entire canvas with a background color before starting to draw your chart. Hint: you don't show code, but do this easy solution if possible. ;=)
context.fillStyle='white';
context.fillRect(0,0,canvas.width,canvas.height)
If you can't fill-before-starting, you still have some options.
You can save the chart to another canvas, fill the entire main canvas with background color and then redraw the saved chart back onto the main canvas.
// create a second canvas and draw the chart onto it
var secondCanvas=document.createElement('canvas');
var cctx=secondCanvas.getContext('2d');
secondCanvas.width=canvas.width;
secondCanvas.height=canvas.height;
cctx.drawImage(mainCanvas,0,0);
// fill the main canvas with a background
context.fillStyle='white';
context.fillRect(0,0,canvas.width,canvas.height)
// redraw the saved chart back to the main canvas
context.drawImage(secondCanvas,0,0);
You can use compositing to cause new drawings to be drawn behind existing pixels. The draw the entire background and it will appear behind the existing chart.
// set compositing to draw all new pixels (background) UNDER
// the existing chart pixels
context.globalCompositeOperation='destination-over';
// fill the main canvas with a background
context.fillStyle='white';
context.fillRect(0,0,canvas.width,canvas.height)
// always clean up ... reset compositing to default
context.globalCompositeOperation='source-over';
There is no need to use JavaScript, just give the image a background color using CSS.
<style>
img {
background-color: black;
}
</style>
<img src="...">
See this JSFiddle for another example: https://jsfiddle.net/3jch7z94/1/
I'm using svg/d3 for creating a chart made of 'rect' elements.
What is the best way for adding a partical border/stroke for each rectangle (only on top of the rectangle)?
Thanks
I don't think SVG supports stroking only portions of a rectangle or path - stroke isn't like a CSS border. You're left with a few other options, all of which take some extra work:
Stroke the entire rect and apply a clipPath to remove the other three edges - probably works best if you make the rectangles bigger than necessary.
Apply a linear gradient fill to each rect, using the gradient definition to show a "border" at the top of the shape.
Add a separate line element to act as the border for each rect.
Use the stroke-dasharray property (docs) to set a dash definition where the "dash" only covers the top of the rect. This might be tricky to get right, but I suspect it wouldn't be too hard, as the stroke probably begins at the top left of the shape.
I want to put some background image to my paper.path I've created with raphael
paper.path(arc([xCenter, yCenter], radius, startAngle, endAngle)).attr({
'stroke': "#ccc",
'stroke-width': rinc - 1
});
The result:
http://jsfiddle.net/n4Rvr/
I just want to put some image instead the #ccc color. Is it possible? However, I didn't find something interesting on internet.
You want to fill the stroke of the path? There's no support for using patterns on the stroke in Raphaël, so it's not as easy as it is in pure svg, where you can either stroke with a pattern or mask an image with the given path to get the effect you're after.
To get something similar in Raphaël you'll need to build the stroked path as a new path, basically tracing around the inner and outer arcs so that you can fill it. Then use 'fill' instead of 'stroke' and pass in the url of the image you want.
I want to create a sphere in Raphael which should look like
I am using Paper.ellipse with equal horizontal and vertical radius to draw sphere.
I think I need to tweak fill attribute to achieve effect as shown in image. Also I want sphere in different color with same effect.
Can anybody point out any helpful link about fill property in Raphael as I couldn't find enough information?
Used
function ball(x, y, r, colour) {
paper.ellipse(x, y, r, r).attr({
fill: "r(.3,.25) white-" + colour,
stroke: "none"
});
};
You can use any color like yellow or color code like #00CC33 for hue.
Demo.
Demo Source Code.
You can watch the source of this page: http://raphaeljs.com/ball.html. Basically, it consists in drawing several ellipses to simulate a single enlightened sphere.
You can learn more about gradient in Raphael on this topic.
Using jVectorMap on a site and would like to change the stroke color of state borders within the USA map. Have tried inserting a stroke color within each states coords within the path to no avail.
Has anyone been able to do such thing?
Appears you can add the stroke in the stylesheet.
.jvectormap-region {
stroke: white;
stroke-width: 2;
}
Unfortunately you can't achieve this easily now without modifying the code of the jVectorMap.
Just add the following code around line 123 of jquery.vector-map.js:
node.setAttribute('d', config.path);
node.setAttribute('stroke', '#000000'); // Whatever color you like!
node.setFill = function(color)...
Greetings!
Another question: my VML Fallback doesn't seem to work. The path coordinates are from an SVG created by Adobe Illustrator. Has anyone the same problem or can give me a solution which programm to use to create the path data?