How to apply an outline for a text in Raphael.js - javascript

I have a site for customize football jersey design. I'm using Raphael.js customization and I need to know how we can apply outline for a text in Raphael.
On searching, I got the suggestion of using the stroke property of Raphael. But this is not giving an outline effect. Stroke is actually Inline. When we increase stroke width, the width of the text will decrease.
How do I apply outline for a text in Raphael without reducing width of text?
Text before stroke :
Text after stroke:
Text needs to be like this on applying stroke/outline (just demo from photoshop):

Try this.
text.attr({
"font-size": 100,
"font-family": "Arial, Helvetica, sans-serif",
"stroke":"red",
"stroke-width":"5px",
"stroke-linecap": "square",
"stroke-linejoin": "bevel"});

"The paint-order attribute specifies the order that the fill, stroke, and markers of a given shape or text element are painted."
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order
What you want would be
var paper = Raphael("playarea", 500, 500);
var text = paper.text(200, 100, "RAPHAEL!!");
text.attr({ "font-size": 100, "font-family": "Arial, Helvetica, sans-serif", "stroke":"red", "stroke-width":"5px", "paint-order":"stroke"});
Dan, expanding on the example you gave
Beware for IE does not support

I just had this problem. An easy solution is to add the text twice at the same position. First add text in the color you want the stroke to be, and add your stroke. Then, add the text again with the desired fill color and no stroke. Adjust the stroke width on the first text element until you achieve the desired effect.

Related

how would I change the outline color of an svg path with d3?

I have an SVG image that looks like this:
I was playing around with the styling in Chrome Dev Tools, trying to change the outline color. However, I'm having problems doing this. The CDT Styles tab has the following info:
element.style {
fill: cyan;
stroke: red;
stroke-width: 10;
}
As you can see in the picture, the fill style attribute works as expected. The stroke and stroke-width are not working in the way that I'm intending. stroke and stroke-width seems to be applied to an area around the outline but I'm trying to change the characteristics of the outline itself.
Any idea how I would do this? In this plunkr, the SVG path element definition is in the file MySvgElement.txt.
I suspect that the map probably has two paths that form that area:
The "fill" part, which you are changing the fill and stroke of.
The "border" path (or paths), which are black and are somewhere else in the SVG file.

Assign d3.js Axis a Background Color and Change Layer Ordering

Currently when you move the circles around, they will move over the axes and obscure them. I am trying to assign a background color to the axes so the circles move underneath the axe. However using CSS background attribute does not seem to do anything.
How would you create an opaque axis that will be a layer above the circles?
JSFIDDLE: http://jsfiddle.net/PXw5E/1/
Getting the axes to be drawn on top of the dots is done easily by changing the order in which you append the dom elements. See example.
Assigning a css background to the axes is not possible, because they are drawn with SVG. You'll need to draw it either using rects or a path.
If the background you intend to draw is fully opaque (i.e. alpha of 1), it would be more straight forward to skip drawing a background and instead use svg clip-rect to crop the circles. That would not work if you want the axes to have a semi-transparent background though.
SVG stack graph in orden you add it, to change it change added order.
You can change axes style on your CSS
.axis text {
font: 9px sans-serif;
color: #8c8c8c;
}
.axis path,
.axis line {
fill: none;
stroke: #d9dee9;
shape-rendering: crispEdges;
}
On d3 you have line, path and text 'stroke' surrounding 'fill'
here you can see working styling, including layering objects: http://jsfiddle.net/klaujesi/rwhp8yjq/

Ignore hover event completely for text on Raphael object

I am binding hover events to Raphael circles. This all works well and as expected.
When drawing a text string "over" the circle, using Raphael, the text character "steals" the hover and the circle hover exits. When exiting the text character, into the circle, the hover is restored.
The text is obviously a new, different object. Can I disable hover events completely for this text object?
I cannot draw the text behind the circle, as the circle has a solid color.
I am not specifically binding any hover events to the text object
Are there ways to solve this?
var paper = Raphael("myMap", 721, 1017);
paper.clear();
newcircle.attr({ fill: "#727272", "cursor": "pointer", stroke: "#A4A2A2"});
paper.text(x, y, "X");
Try adding pointer-events:none; for the object.
For you that'd look something like paper.node.setAttribute("pointer-events","none");
From comments: Actual fix: paper.text(x, y, "?").node.setAttribute("pointer-events", "none");
Edit For IE, the solution is more complex. You either have to use javascript like this or a plugin like this one. I got this answer from this SO post

Adding arbitrary text to graphael chart

How would I go about adding a bit of text in the bottom left corner of a graphael chart area? I've googled, but the docs for raphael aren't very good :(
Cheers!
John.
Suppose your drawing placeholder defined as
var r = Raphael("holder");
so you place text on it like this
r.text(320, 100, "Interactive Donut Chart").attr({ font: "20px sans-serif" });
take a look at my jsfiddle
g raphael js interactive donut

Setting text background color in Raphael

I am using Raphael-js to position text on a canvas. Is it possible to have a background color for the text? I would like different text elements to have different backgrounds colors.
Thanks,
Yes, there is no way to specify background for text, here is how to create rectangle that will serve as a background:
var text = canvas.text(p.x, p.y, poly.title).attr(textAttr);
var box = text.getBBox();
var rect = canvas.rect(box.x, box.y, box.width, box.height).attr('fill', 'black');
text.toFront();
The background of text is known as "fill" and can be applied using the attr function as follows:
paper.text(50, 50, "Example").attr("fill", "#000000");
For a full listing of the properties, see the Raphael Documentation

Categories

Resources