How to append an svg loaded by d3.xml into an svg - javascript

Trying to load external svgs in to a dynamically created svg but still access the properties of the loaded svgs. That is why I'm using d3.xml but haven't figured out how to integrate it in to the dynamic svg created with d3.
Code and js console here
The code produces this svg
<svg id = "svgObj">
<g class = "grp"></g>
<g class = "grp"></g>
</svg>
I'm trying to load circle.svg within each element so it looks like this
<svg id = "svgObj">
<g class = "grp"><svg id=minus>...</svg></g>
<g class = "grp"><svg id=minus>...</svg></g>
</svg>
I tried the code below but console errors that there is no appendChild method
var grps = d3.selectAll( "g" );
img = grps.appendChild( svgNode.cloneNode( true ) );
Thanks ahead

As #helderdarocha explained, you're mixing up your d3 methods with your plain Javascript methods. That answer gave you how to do it with plain Javascript methods, I'll balance that out by explaining how to do it with d3 methods.
To append a new element within each element of a d3 selection, the method name is simply append, not appendChild. The parameter to append is either a tag name (for which d3 creates a new element of that type for each element in the selection) or a function that returns an actual DOM element (the function will get called for each element in the selection with the data value and index as parameters). Since you're cloning an existing node, that's the version you want to use:
var grps = d3.selectAll( "g" );
img = grps.append( function(){return svgNode.cloneNode( true );} );

I haven't used D3 before but it seems easy to understand. The error message says that Array has no appendChild() method. I read the documentation and discovered that the selections return as double nodes (see Operating on selections) so you would have to add [0][0] (which would select the first node) to be able to use appendChild().
This selects the first node using plain DOM and produces no error (and draws a partial shape on the output):
var grps = d3.selectAll( "g" )[0][0];
Since you need to insert code in each node, you can use each() (see Control) like this:
d3.selectAll( "g" ).each(function() {
img = this.appendChild( svgNode.cloneNode( true ) );
});
I tested it on your code and it produces a black circle with a white dash in the middle. Is that what you expected?

Related

SVG <image> element created in JS does not display

I have an <svg> element (with viewBox set) and I append a programmatically constructed <image> element to it, like this:
const img=document.createElementNS('http://www.w3.org/2000/svg','image');
img.setAttribute('width','100');
img.setAttribute('height','100');
img.setAttribute('xlink:href','data:image/png;base64,iVBORw0KGgoAAA'+
'ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4'+
'//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU'+
'5ErkJggg==');
document.querySelector('svg').appendChild(img);
It is present in the SVG but nothing is displayed. However when I call img.outerHTML = img.outerHTML; to sort of recreate it from its text representation, it starts displaying properly.
Anyone could help me understand what's going on? How should I create the element in JS to make it display properly?
JSFiddle
For SVG-2 ready browsers you can simply do setAttribute("href", url).
However, in SVG-1.x you must use setAttributeNS('http://www.w3.org/1999/xlink', 'href', url);
Actually with setAttributeNS, you can also use 'xlink:href' for the second parameter or 'foo:href', since setAttributeNS takes care of mapping to the correct NameSpace and kind of discards what comes before :, but setAttribute doesn't and thus creates a kind of null:xlink:href attribute, which doesn't map to anything known by the browser and thus fails.
const url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
const img = document.createElementNS('http://www.w3.org/2000/svg','image');
img.setAttribute('width','100');
img.setAttribute('height','100');
img.setAttribute('href', url); // SVG-2
img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', url); // SVG-1.x
document.querySelector('svg').appendChild(img);
<svg viewBox="0 0 100 100"></svg>

Convert svg into base64

SVG which was created programmatically does not convert into base64 correctly.
In my application I've got a service which get a response with g-element and then put into created svg-element and convert it into base64, but if I try to open a link I find that svg does not render on the page.
var xmlns = 'http://www.w3.org/2000/svg',
IMAGE_TEMPLATE = document.createElementNS(xmlns, 'svg');
IMAGE_TEMPLATE.appendChild(document.body.querySelector('#ico-appliance-thermostat-128'));
IMAGE_TEMPLATE.setAttribute('id', 'svg');
IMAGE_TEMPLATE.setAttributeNS(null, 'width', 128);
IMAGE_TEMPLATE.setAttributeNS(null, 'height', 128);
IMAGE_TEMPLATE.setAttributeNS(null, 'viewBox', '0 0 128 128');
document.body.querySelector('#test').appendChild(IMAGE_TEMPLATE);
test = function(){
var s = new XMLSerializer().serializeToString(document.getElementById("svg"))
var encodedData = window.btoa(s);
console.log('data:image/svg+xml;base64,' + encodedData);
}
https://jsfiddle.net/6sra5c5L/
Try adding <svg></svg> around <g> element , closing } at test function ; defining test as a named function
var xmlns = 'http://www.w3.org/2000/svg',
IMAGE_TEMPLATE = document.createElementNS(xmlns, 'svg');
IMAGE_TEMPLATE.appendChild(document.body.querySelector('#ico-appliance-thermostat-128'));
IMAGE_TEMPLATE.setAttribute('id', 'svg');
IMAGE_TEMPLATE.setAttributeNS(null, 'width', 128);
IMAGE_TEMPLATE.setAttributeNS(null, 'height', 128);
IMAGE_TEMPLATE.setAttributeNS(null, 'viewBox', '0 0 128 128');
document.body.querySelector('#test').appendChild(IMAGE_TEMPLATE);
function test() {
var s = new XMLSerializer().serializeToString(document.getElementById("svg"))
console.log(document.getElementById("svg"))
console.log(s)
var encodedData = window.btoa(s);
console.log('data:image/svg+xml;base64,' + encodedData);
}
<svg>
<g id="ico-appliance-thermostat-128" transform="scale(2)">
<path d="M106.949,128.009 L105.294,124.692 C115.967,119.333 123.298,108.278 123.298,95.500 C123.298,82.722 115.967,71.666 105.294,66.308 L106.949,62.990 C118.835,68.958 126.999,81.270 126.999,95.500 C126.999,109.730 118.835,122.042 106.949,128.009 ZM117.376,95.500 C117.376,105.954 111.378,115.000 102.645,119.384 L100.990,116.067 C108.510,112.292 113.676,104.502 113.676,95.500 C113.676,86.497 108.510,78.708 100.990,74.933 L102.645,71.615 C111.378,76.000 117.376,85.045 117.376,95.500 ZM106.999,95.213 C106.999,98.063 104.756,100.373 101.988,100.373 C100.251,100.373 98.720,99.462 97.822,98.080 L91.490,98.080 L85.840,116.427 L85.662,116.427 L85.840,117.000 L80.829,117.000 L70.082,82.422 L65.795,97.506 L65.795,98.080 L54.999,98.080 L54.999,92.920 L62.087,92.920 L67.465,74.000 L72.477,74.000 L83.234,108.615 L88.067,92.920 L89.738,92.920 L93.079,92.920 L97.504,92.920 C98.324,91.222 100.021,90.053 101.988,90.053 C104.756,90.053 106.999,92.363 106.999,95.213 ZM24.999,128.000 C11.787,128.000 0.999,117.189 0.999,103.993 C0.999,96.779 4.177,90.380 8.986,85.988 C8.986,85.173 8.986,84.776 8.986,83.981 L8.986,15.997 C8.986,7.193 16.177,-0.000 24.979,-0.000 C33.780,-0.000 40.972,7.193 40.972,15.997 L40.972,83.981 C40.972,84.796 40.972,85.194 40.972,85.988 C45.780,90.380 48.979,96.779 48.999,103.993 C48.999,117.210 38.212,128.000 24.999,128.000 ZM33.999,90.000 L33.999,17.000 C33.999,12.373 29.662,8.009 24.988,8.009 C20.314,8.009 16.000,12.373 16.000,17.000 L16.000,90.000 C10.903,92.952 7.985,97.813 7.985,104.136 C7.985,113.411 15.641,120.990 25.011,120.990 C34.380,120.990 42.037,113.389 41.992,104.114 C41.992,97.791 39.118,92.952 33.999,90.000 ZM24.999,112.990 C19.904,112.990 15.999,109.082 15.999,103.983 C15.999,100.092 18.383,96.796 21.989,95.588 C21.989,95.290 21.989,95.290 21.989,94.992 L21.989,38.991 C21.989,37.500 23.181,35.994 24.984,35.994 C26.787,35.994 27.979,37.187 27.979,38.991 L27.979,95.008 C27.979,95.306 27.979,95.306 27.979,95.604 C31.585,96.812 33.984,100.107 33.999,103.983 C33.999,109.082 30.095,112.990 24.999,112.990 Z"
style="fill: #5aac21;fill-rule: evenodd;"></path>
</g>
</svg>
<div id="test"></div>
<button onclick="test()">Test</button>
jsfiddle https://jsfiddle.net/6sra5c5L/5/
Difference between #guest271314 and my answer:
#guest271314 his answer:
Wrap the g element inside a svg element to make sure that the browser renders the g element onload.
My answer:
Forces the svg element inside #test to render the g element since the g element wasn't rendered onload.
Best answer in this case: #guest271314
Reason: A g element should be inside a svg element in valid html.
When should my answer be used?
In the case that the g element is not an element in the html document.
You didn't close test() with a }.
Code below returns a base64 encoded svg:
https://jsfiddle.net/seahorsepip/6sra5c5L/1/
Edit:
svg render issue is something I ran into myself before, here's the fix with a line of jquery:
https://jsfiddle.net/seahorsepip/6sra5c5L/3/
//Force refresh svg
$("#test").html($("#test").html());
Here's the original SO thread about the issue: jquery's append not working with svg element?
I don't know the javascript equivalent for the jQuery code I added, I tried to write it but it didn't work :/
Edit 2:
Here's the pure js equivalent:
https://jsfiddle.net/seahorsepip/6sra5c5L/4/
//Force refresh svg
var svg = document.body.querySelector('#test').innerHTML;
document.body.querySelector('#test').innerHTML = "";
document.body.querySelector('#test').innerHTML = svg;
HTML elements and SVG elements have different namespaces. By putting the <g> element in your HTML you have created an <html:g> element. When it is moved inside the <svg>, it is still an <html:g> and won't be recognised by the SVG renderer.
You either have to put it inside soem <svg> tags as #guest271314 described. Or, after you append to the SVG, go through all the elements in the <g> and change all their namespaces to the SVG one.
I don't see a full explanation what actually happened anywhere here, so here it goes.
Browsers parse HTML as HTML
While this seems obvious, it is not so in the case, when you put non-HTML (SVG, XML, ...) elements into it.
Browsers are too nice and when you provide valid SGML (parent of XML, HTML, ...) and they find element that doesn't belong there(<g>) according to what you said will be there (HTML) - they don't complain and only treat the unknown elmenents as unknown HTML elements, resulting in class HTMLUnknownElement.
Browsers generally don't change element object class
So you are basically putting HTMLUnknownElement into SVGSVGElement, which will put the tag content into the svg, but since the underlying object is not a valid subelement of SVG (SVGGElement) it won't do anything.
This is the same reason why dynamically created <svg> has to be created with namespace => the namespace, when combined with <svg> element, is telling browser - hey!, this tag is from SVG specification => treat it as an SVG!
Solutions
Your current example code has a syntax error, which I will not address, since that is not the real issue.
Statically defined <g> template
If the template is already in the original document - force browser to take it as SVGSVGElement by wrapping with <svg xmlns="http://www.w3.org/2000/svg"></svg> (browsers may eat it without xmlns attribute, but it is the safer way).
Worried that it would display? Just hide it with CSS display: none; - it will not affect the rendering.
Dynamically defined <g> template
If you are creating <g> element dynamically, you should create it while specifying the namespace using createElementNS() like:
document.createElementNS('http://www.w3.org/2000/svg', 'g');
Static, but non-changable <g> template
If you are stuck in the middle and can't change the static template, you can still build upon the dynamic approach:
create new <g> with the right namespace
var newGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
get the "raw" old <g> - it will be HTMLUnknownElement, but it is ok, since it is built upon HTMLElement and that gives us enaugh API to transfer all we need
var oldGroup = document.querySelector('oldGroupSelector');
possibly transfer old group attributes to new group - handy is element.attributes
for (var i = 0; i < oldGroup.attributes.length; ++i) {
newGroup.setAttribute(
oldGroup.attributes.item(i).name,
oldGroup.attributes.item(i).value
);
}
Now browser already knows contents of newGroup <g> are actually svg - newGroup is SVGGElement - now we can just refill the contents
newGroup.innerHTML = oldGroup.innerHTML;

Load SVG into a specific div with Snap SVG

What is the correct way to load an SVG file into a specific div using SnapSVG?
Following the documentation I have this JS:
var s = Snap();
Snap.load("fox.svg", function (f) {
s.append(f.select("g#fox"));
});
This loads the SVG just above the body tag, however if I try to set it's location, nothing happens, there is no error. This is what I have attempted so far:
var s = Snap('#myDiv');
Where am I going wrong?
This should work, its not far removed from your example, so its hard to tell whats wrong with yours without a live example and the svg to look at.
If you want to upload a fiddle or something, it may help.
var s = Snap("#svgdiv");
var l = Snap.load("path.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}
Edit: Just to extend on Duopixels answer, the element you are trying to add, should be an svg element (ie
<svg id="mysvgtoload">...</svg> // you can add an svg to a div
<g id="mygrouptoload">...</g> // you can't add this to a div, but could to an svg element
in the file) or add the element (g or path or whatever) to an existing svg tag/element in your html. I suspect you may be trying to add a element direct to a div, which won't work, but its hard to tell without the file.
Also double check that Snap is loaded fine, and you can do a console.log( data ) in the function to check that it has loaded the markup correct.

Removing an SVG element from the DOM using jQuery

I'm using jQuery to add an element to an embedded SVG like this:
var rect = SVG('rect');
$(rect).attr( { x: left,
y: top,
width: right - left,
height: bottom - top,
style: style } );
$(parentElement).append(rect);
parentElement could be for example $('g:first', svgRoot), where svgRoot refers to the embedded SVG element.
function SVG(elementName) {
return document.createElementNS('http://www.w3.org/2000/svg', elementName);
}
This works well, the new rectangle is shown in the browser and added to the DOM:
However, removing this rectangle fails. It is still shown in the browser and present in the DOM:
$(rect).remove();
I also tried
rect.parentNode.removeChild(rect);
which results in the error message "Uncaught TypeError: Cannot call method 'removeChild' of null".
Do you have any idea how I can fix that?
Using jQuery SVG or another plugin/framework is not possible in my project.
I ended up solving this problem using groups.
I ended up with this code :
var group = getGroupByName(name);
group.parentNode.removeChild(group);
...
function getGroupByName(name) {
var container = document.getElementById("container");
var groups = container.getElementsByTagName("g");
for(var i=0; i<groups.length; i++) {
if(groups[i].getAttributeNS(null, "name") === name) {
return groups[i];
}
}
return null;
}
Where container is my main SVG element.
This is tried and true. Works properly.
EDIT
As pointed out in the comments. You can find this fiddle that works. Similar to your example. It creates 4 rectangles and removes the 2 first ones.
If you want to remove the first element you have to specify this :
$("rect").first().remove();
Or if you want to do something with ALL of your rectangles you could approach this with something of the sort :
$("rect").each(function() {
... //could remove them here
}
Edit 2
According to last comment, as long as you have the reference to the object, you can use it's variable to remove it.
This updated fiddle will show you that using lastRect you can remove this last rectangle that was added.
I found that doing a .find("*") helped a lot, I'm guessing it flattens the DOM out and thus ignores any nesting complexities that jQuery can't handle (perhaps... this is my theory at least).
So for example this removes anything other than rect, g, svg elements.
$("svg").find("*").not("rect, g").remove();
A jSFiddle showing find() and removing svg elements

Remove all the children DOM elements in div

I have the following dojo codes to create a surface graphics element under a div:
....
<script type=text/javascript>
....
function drawRec(){
var node = dojo.byId("surface");
// remove all the children graphics
var surface = dojox.gfx.createSurface(node, 600, 600);
surface.createLine({
x1 : 0,
y1 : 0,
x2 : 600,
y2 : 600
}).setStroke("black");
}
....
</script>
....
<body>
<div id="surface"></div>
....
drawRec() will draw a rectangle graphics first time. If I call this function again in an anchor href like this:
...
it will draw another graphics again. What I need to clean all the graphics under the div and then create again. How can I add some dojo codes to do that?
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}
node.innerHTML = "";
Non-standard, but fast and well supported.
First of all you need to create a surface once and keep it somewhere handy. Example:
var surface = dojox.gfx.createSurface(domNode, widthInPx, heightInPx);
domNode is usually an unadorned <div>, which is used as a placeholder for a surface.
You can clear everything on the surface in one go (all existing shape objects will be invalidated, don't use them after that):
surface.clear();
All surface-related functions and methods can be found in the official documentation on dojox.gfx.Surface. Examples of use can be found in dojox/gfx/tests/.
while(node.firstChild) {
node.removeChild(node.firstChild);
}
In Dojo 1.7 or newer, use domConstruct.empty(String|DomNode):
require(["dojo/dom-construct"], function(domConstruct){
// Empty node's children byId:
domConstruct.empty("someId");
});
In older Dojo, use dojo.empty(String|DomNode) (deprecated at Dojo 1.8):
dojo.empty( id or DOM node );
Each of these empty methods safely removes all children of the node.
From the dojo API documentation:
dojo.html._emptyNode(node);
If you are looking for a modern >1.7 Dojo way of destroying all node's children this is the way:
// Destroys all domNode's children nodes
// domNode can be a node or its id:
domConstruct.empty(domNode);
Safely empty the contents of a DOM element. empty() deletes all children but keeps the node there.
Check "dom-construct" documentation for more details.
// Destroys domNode and all it's children
domConstruct.destroy(domNode);
Destroys a DOM element. destroy() deletes all children and the node itself.
const wipeOut = elm => [...elm.childNodes].forEach(child => child.remove());
wipeOut(elm);

Categories

Resources