We Keep Coding

Fill Color to rotator in transformer konva.js

I want my rotator of transformer to have icon, but first I add fill to learn.
var rot = transformer.findOne('.rotater');
console.log(rot); //Works fine
rot.fill('orange'); //Not working. no need for fill-priority
layer.batchDraw();

konva#7.0.4 doesn't have API to customize specific anchors of a Konva.Transformer.
Your code doesn't work, because Konva.Transfomer may reset its style at any point of time with internal tr.update() function.
As a workaround, you can overwrite update method and add your own styles there:
const tr = new Konva.Transformer({
nodes: [shape]
})
tr.update = function() {
Konva.Transformer.prototype.update.call(tr);
var rot = this.findOne('.rotater');
rot.fill('orange');
}
tr.forceUpdate();
layer.add(tr);
Demo: https://jsbin.com/lumisacayo/1/edit?html,js,output

How do I set the size of an SVG element using JavaScript?

I'm writing a snippet of code that creates a new SVG element but I'm having trouble setting the width and height properties.
var svg = document.createElement("svg");
while(!svg); // wait for it
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");
document.body.appendChild(svg);
Upon inspection, the element has the two properties correctly set, and the .getAttribute() method returns the correct values, but it is displayed as svg 0 × 0 when I hover my cursor on it. I'm probably missing something very obvious but I can't seem to make out what it is. Any ideas?

You can try this code
function svg(){
// create the svg element
const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
// set width and height
svg1.setAttribute("width", "500");
svg1.setAttribute("height", "500");
// create a circle
const cir1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
cir1.setAttribute("cx", "200");
cir1.setAttribute("cy", "200");
cir1.setAttribute("r", "200");
cir1.setAttribute("fill", "red");
// attach it to the container
svg1.appendChild(cir1);
// attach container to document
document.getElementById("svg54583").appendChild(svg1);
}
svg();
<div id="svg54583"></div>

How to update DOM after Maquette modifies it

As mentioned previously, I want to use Maquette as a basic hyperscript language. Consequently, I don't want to use the maquette.projector. However, despite being able to append SVG objects made with Maquette to the DOM, the DOM does not seem to be updating. For example, in the code below, I expect to be able to click a button to create a circle. If I inspect the DOM by using Chrome Dev tools, I can the the SVG circle object was added to the DOM, but the DOM hasn't been updated. How I am supposed to update the DOM?
var h = maquette.h;
var dom = maquette.dom;
var svg;
var svgNode;
var root;
var rootDiv;
function addCircle(evt) {
console.log("adding circle");
const c = h('g', [
h('circle#cool.sweet', {cx: '100', cy: '100', r: '100', fill: 'red'}),
]);
const g = dom.create(c).domNode;
svgNode.appendChild(g);
}
document.addEventListener('DOMContentLoaded', function () {
svg = h('svg', {styles: {height: "200px", width: "200px"}})
rootDiv = h('div.sweet', [
svg,
]);
root = dom.create(rootDiv).domNode;
document.body.appendChild(root);
svgNode = root.querySelector("svg");
const button = h('button', {
onclick: addCircle,
}, ["Add circle"]);
const buttonNode = dom.create(button).domNode;
root.appendChild(buttonNode);
});
<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>
Why is appendChild not rendering anything?

This was a tough one. The reason the circle does not appear on the screen (although it is added to the DOM) has to do with XML-namespaces.
SVG Elements and descendents thereof should get the SVG XML namespace. When you use maquette to render nodes that start in HTML with embedded SVG, you do not have to worry about this.
But now you start inside an SVG by creating a <g> node. Maquette assumes that you need a 'nonstandard' HTML <g> Node, because it does not know you were inside an SVG.
This is why maquette provides a second argument to its DOM.create method which you can use as follows to fix your problem:
const g = dom.create(c, {namespace: 'http://www.w3.org/2000/svg'}).domNode;

How to add title to svg rectangle using pure javascript (not d3.js)?

I made changes to the code.Are they in the right manner, because tooltip or title are still not showing up.
var use = document.createElementNS("http://www.w3.org/2000/svg", "use");
use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "mydefs.svg#hello");
var title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
title.textContent = data[i].status;//JSON Object
svg.appendChild(rect);
svg.appendChild(text);
//Use and Title added
svg.appendChild(use);
svg.appendChild(title);
document.body.appendChild(svg);

Your example is very confusing because you don't say what purpose of the <use> is. Plus what is text?
If you want to add a <title> to a <rect> element, all you have to do is this:
var title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
title.textContent = data[i].status;//JSON Object
rect.appendChild(title);

Get width or height svg rectangle javascript

I can get the width of my object svg in javascript and save the value in a variable. this is my object
<rect id="cercle1" x="5" y="25" width="50" height="50" stroke-width="1" stroke="#0E0E0E" style="fill:red; stroke:black; stroke-width:2"; />
I try this:
document.getElementById('cercle1').width.value;
thanks for help

You can use the getAttribute function:
document.getElementById('cercle1').getAttribute("width");
That will get you the String from the HTML code. As Phrogz mentioned it, you might want a number instead, or the actual value (that might be different). If so, refer to his answer.

The width attribute is an SVGAnimatedLength property. As such, you need to:
// If you want the original value
var w = document.getElementById('cercle1').width.baseVal.value;
// If it is animated and you want the current animated value
var w = document.getElementById('cercle1').width.animVal.value;
Or, if just want what's in the source code:
var w = document.getElementById('cercle1').getAttribute('width')*1; // convert to num

You can try this:
var obj = document.getElementById("cercle1"); // reference to the object tag
var rect = obj.getBoundingClientRect(); // get the bounding rectangle
alert(rect.width);
alert(rect.height);
Or this:
var obj = document.getElementById("cercle1"); // reference to the object tag
var svgdoc = obj.contentDocument; // reference to the SVG document
var svgelem = svgdoc.documentElement; // reference to the SVG element
alert(svgelem.getAttribute("width"));
Here is a working JSFiddle example.
From the comments from Phrongz: Note that the bounding rect will account for transforms, which may or may not be desired.

Just in case you had created your rect dynamically, then the below solution is valid
var rect = document.createElementNS(svgns, "rect");
rect.setAttribute('width', '200px');
rect.setAttribute('height', '200px');
var width= rect.width.baseVal.value;
var height= rect.width.baseVal.value;