Develop Reference

Dynamic SVG creation using JavaScript - adding extra spacing to textContent with IE11 Support [duplicate]

To preserve spaces in a textelement of svg, one should use 'xml:space="preserve"' as an attribute of the text (jsfiddle). However, it isn't working. What am I doing wrong?
// init snap
var svgElement=document.getElementById("mainSvgId");
var s = Snap(svgElement).attr({height: 300, width: 300});
// greate group with rectanle
var parentGroup=s.g().attr({id: "parent"});
var rect1 = s.rect(0, 0, 200, 200).attr({fill: "#bada55"});
parentGroup.add(rect1);
// add text with preserve attribute
var text = s.text(0, 20, " text1 text2");
text.node.setAttribute("xml:space", "preserve");
parentGroup.add(text);

You're almost there. You need to properly create the attribute in the xml namespace for which you need setAttributeNS rather than setAttribute
text.node.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve");

How do you get the width value of a text element via a plugin in XD?

I am trying to build a plugin for XD to automate the creation of design elements. I have written a function to build the button (first picture below) using a text element and a rectangle. The only problem with this is that shape of the rectangle is not based on the width of the text, so when the text is longer you end up with the text overlapping the rectangle (see second picture below).
I have been trying to figure out how to get the width value of the text element so that I can size the rectangle appropriately. Can anyone help me with this?
I have figured out that by adding the line console.log (selection.items); I can output a full list of properties to the log, but how do I access the width property?
Here is the log output showing the rectangle and text elements...
[ Text ('Submit Button') {
width: 113, height: 20
global X,Y: -3, -74
parent: Artboard ('iPad – 1')
fill: ff000000
},
Rectangle ('Rectangle 6') {
width: 100, height: 50
global X,Y: -3, -58
parent: Artboard ('iPad – 1')
stroke: ff2d3494
} ]
and here is my full code...
const {Rectangle, Color, Text, Selection} = require("scenegraph");
let commands = require("commands");
function createButton(selection) {
// Create the outline of the button
const newButtonOutline = new Rectangle();
newButtonOutline.width = 100;
newButtonOutline.height = 50;
newButtonOutline.stroke = new Color("#2D3494");
newButtonOutline.strokeWidth = 2;
newButtonOutline.cornerRadii = {
topLeft: 10,
topRight: 10,
bottomRight: 10,
bottomLeft: 10
};
// Create the text for the button
const newButtonLabel = new Text();
newButtonLabel.text = "Submit Button";
newButtonLabel.fontSize = 18;
newButtonLabel.fill = new Color("#000000");
// Add the text and outline to the artboard
selection.insertionParent.addChild(newButtonOutline);
newButtonOutline.moveInParentCoordinates(100, 100);
selection.insertionParent.addChild(newButtonLabel);
newButtonLabel.moveInParentCoordinates(100, 100);
selection.items = [newButtonLabel, newButtonOutline];
console.log (selection.items);
//align the button elements and group together
commands.alignHorizontalCenter();
commands.alignVerticalCenter();
commands.group();
}
I hope someone can help!

So it turns out to get the width of a text node you need to get it from the localBounds, something like...
textNode.localBounds.width
or to get the width of a graphic node it is just...
graphicNode.width

SVG Snap select a group by it's ID

I'm trying to get an SVG Snap element by it's id. First I create a canvas:
var s = Snap("#svgout"), //creates the canvas
Then I cerate a group:
var rect = s.rect(posx, posy, 40, 40, 6).attr({
fill: "none",
stroke: "#F44336",
strokeWidth: 3,
});
var group = s.group(rect).attr({
cursor: "move",
});
and next I get the id of the group that is defaulted by SVG Snap
var currGroupId = group.id;
Now, when I try to reference my group later in my code and get it by it's id,
s.select(currGroupId);
I get null. How do I properly select an element by it's id?

select will use a cssSelector, as in container.queryAll.
So I don't think Snap sets an id as an svg attribute (do correct me if I'm wrong). Which means if you want to use select, you may have to manually set it.
Also I susect s.select(id) wouldn't work, I think it would have to be s.select('#'.id) but I may be wrong. If you can get a fiddle up, it will be easier to test.

SnapSVG doesn't automatically set the ID attribute of the group. Instead it adds a field to the object itself. One way of getting around this limitation is to do the following.
var s = Snap("#svgout");
var rect = s.rect(posx, posy, 40, 40, 6).attr({
fill: "none",
stroke: "#F44336",
strokeWidth: 3,
});
var group = s.group(rect).attr({
cursor: "move",
});
Explicitly set the ID.
group.attr({
id: group.id
});
var currGroupId = group.id;
select uses CSS selectors. So we must add a '#' to the start of the ID.
s.select("#" + currGroupId);
Note: This method has been tested by me using SnapSVG V0.4.1
If this does not work and you are using jQuery. try:
$("#"+currGroupId);

how to put black text on top of gray rect in jspdf

I am using jspdf to convert my html page to PDF. So far I have figured out styles in the HTML don't apply to the PDF document. So I'm using doc.text and doc.rect.
I need the text on top of the rectangle but it seems to be that the rectangle is always on the top and it covers the text. How can I resolve this?
This is what I have tried:
var doc = new jsPDF();
doc.setFontSize(17);
doc.setTextColor(255, 0, 0);
doc.text(100,25, 'USD.00');
doc.setFillColor(255,255,200);
doc.rect(100, 20, 10, 10, 'F')

Draw your rectangle before you draw your text
var doc = new jsPDF();
doc.setFontSize(17);
doc.setFillColor(255,255,200);
doc.rect(100, 20, 10, 10, 'F');
doc.setTextColor(255, 0, 0);
doc.text(100,25, 'USD.00');

In jsPDF must be write code in sequence, then first draw the retangle and last write your text.
var doc = new jsPDF();
doc.setDrawColor(0);
doc.setFillColor(255, 0, 0);
doc.rect(40, 50, 30, 12, 'FD'); //Fill and Border
doc.setFontSize(8);
doc.setFontType('normal');
doc.text('hello', 42, 51);

You can use getTextWidth method to set proper width for a rectangle, but then you have to set font size/type before getting the width.
http://raw.githack.com/MrRio/jsPDF/master/docs/module-annotations.html#~getTextWidth

svg appending text element - gives me wrong width

i'm appending a text element to a svg via javascript. After appending i wanna set x and y coordinate, however, it returns me the wrong width of the text element when using it to calculate x.
Interesting:
In Chrome, when actualize the page via F5 or button it returns wrong width, when pressing enter in the adress bar, the width is right - strange!
Here is the small code:
var capt = document.createElementNS("http://www.w3.org/2000/svg", "text");
// Set any attributes as desired
capt.setAttribute("id","capt");
capt.setAttribute("font-family","Righteous");
capt.setAttribute("font-size","30px");
capt.setAttribute("fill", "rgb(19,128,183)");
var myText = document.createTextNode(this.options.captTxt);
capt.appendChild(myText);
this.elements.jSvgElem.append(capt);
capt.setAttribute("x", this.options.windowWidth-this.options.spacer-document.getElementById("capt").offsetWidth);
capt.setAttribute("y", this.options.captY+$('#capt').height());

OK, the problem seems to be that the browser doesn't calculate the correct width when using an other font. Not setting a font results in a correct width.
I solved the problem by setting the reference point ("alignment-point") to the upper right corner ot the text element by setting attributes:
capt.setAttribute("text-anchor", "end");
capt.setAttribute("alignment-baseline", "hanging");
This way i do not have to subtract the width and add the height of the element!

There is a bug:http://code.google.com/p/chromium/issues/detail?id=140472
it just pre init some functions that calculates text width so you should call this function before(i'm sure that there is several extra lines that can be deleted):
fixBug = function () {
var text = makeSVG("text", { x: 0, y: 0, fill: "#ffffff", stroke: '#ffffff'});
text.textContent = "";
var svg = $("svg")[0];
svg.appendChild(text);
var bbox = text.getBBox();
var Twidth = bbox.width;
var Theight = bbox.height;
svg.removeChild(text);
}
$("svg") - Jquery selector