I have an svg group which contains some elements, I want to clone the group, problem is the function clones only one element of the group.
Here is the function
<script type="text/ecmascript"><![CDATA[
function clone(evt) {
var cloneElement = evt.target.cloneNode(false);
var newx = 100;
var newy = 500;
cloneElement.setAttributeNS(null,"x",newx);
cloneElement.setAttributeNS(null,"y",newy);
document.getElementById("layer1").appendChild(cloneElement);
}
]]></script>
The svg looks something like
<g id="layer1" onclick="clone(evt)">
<rect>
<path>
<circle>
<circle>
</g>
The rectangle is like a container and what happens is that the function clones the rectangle and leaves the other elements.
So what is wrong?
Two things:
cloneNode should be passed true if you want a deeply cloned tree, otherwise it will just clone one element
evt.target will always be the element where the event originated, and g elements are never hit directly, the mouse events just bubble up to there from the children. You can use evt.currentTarget instead if you want the element which is currently handling the event (in your case that would be the g element).
Related
I have a group that has 2 or more SVG elements.
Group has a SVG matrix applied and the same apply for children.
Each element, including group can have any transformations applied through the matrix (rotate, skew, scale etc). Example of SVG with the group and 2 inner elements:
<g transform="matrix(0.679039, -0.734102, 0.734102, 0.679039, -21.7964, 262.861)">
<path transform="matrix(1, 0, 1.63636, 1, 82.9909, 49.1)" d="M92.35,45.6 A92.35,22.8 0 1 1 92.35016 45.6"></path>
<rect width="225.1" height="63.3" transform="matrix(0.742794, -0.66952, 0.66952, 0.742794, 242.258, 216.595)" rx="0"></rect>
</g>
I would like to do an ungroup function that removes the <g> element and place inner elements outside of g, but keeps all matrix transformations from group and their own transformations.
Tried multiple methods but they all have different issues where inner elements are not placed in the correct position or transformations are not copied.
The following seems to do something, but works for rotation only, if skew is applied - elements are totally different.
matrixMultiply(...matrices: DOMMatrix[]) : DOMMatrix {
let args = arguments, i = args.length, m = args[i-1];
while(i-- > 1) {
let m1 = args[i-1] as Matrix;
m = m1.multiply(m);
}
return m;
}
let groupMatrix = groupElement.transform.baseVal.getItem(0).matrix;
groupElement.childNodes.forEach(child => {
let childTransform = (child as SVGGraphicsElement).transform.baseVal.getItem(0),
childMatrix = childTransform.matrix,
childInverseMatrix = childMatrix.inverse();
let gm = matrixMultiply( childInverseMatrix, groupMatrix, childMatrix );
childTransform.setMatrix(gm);
});
You are making your life much too complicated. All you need to know is that a sequence of transform attributes, read in the direction of parent to child, has the same result as a sequence of transforms written left to right in one transform attribute:
<g transform="skewX(...)">
<path transform="matrix(...)" d="..." />
</g>
<!-- does the same transformation as -->
<path transform="skewX(...) matrix(...)" d="..." />
That simplifies your code to the following. If you want, you can compute the new transform value yourself by initializing a DOMMatrix from the transform strings. But why would you? The browser will do it for you anyway.
let groupTransform = groupElement.getAttribute('transform');
groupElement.childNodes.forEach(child => {
let childTransform = child.getAttribute('transform');
// not really needed...
let gm = new DOMMatrix(`${groupTransform} ${childTransform}`);
child.setAttribute('transform', gm.toString());
//...this would suffice
child.setAttribute('transform', `${groupTransform} ${childTransform}`);
});
I am trying to draw this SVG path.
I could achieve it using SVG Line and Curve properties for a fixed height and width using fixed coordinates.
But, I need to draw this responsively which means, the width of the path, space between the lines, the distance between each point, and the curves at the sides should be responsive.
It contains levels indicated by numbers as shown in the image, and the length of the path should be determined by the number of levels given.
While trying to draw this responsively, I was stuck at
Getting the start and end-point of the Lines
Getting control points for the curves
Responsive adjustment of the distance between each point and space between the curves
Determining the length of the path based on the number of levels given
I am trying to do these using percentages based on the parent div's width by some mathematical calculations. But, it seems it breaks some or other cases due to its complexity.
There are some other things to do along with these, but this is the top-level version of what needs to be done.
Is there any direct method or formula or calculation for achieving this?
(or)
Is there any other approach to draw this?
(or)
Are there any tutorials for learning to draw these types of SVG paths?
After creating the path you need to calculate the position of the numbers and circles on the path. For this you need to know the length of the path calculated with the getTotalLength() method. Next you need a loop to calculate the position of the numbers on the path. For this I've used the getPointAtLength()
method. On each of this pointd you create a new circle (use) element and a new text element.
Please read the comments in the code.
//constants used to create a new element in svg
const SVG_NS = "http://www.w3.org/2000/svg";
const SVG_XLINK = "http://www.w3.org/1999/xlink";
//the total length of the path
let length= thePath.getTotalLength();
//the number of points on the path
let n = 15;
let step = length/n;
for(let i= 1; i<=n; i++){
//creates a new point on the path at a given length
let point = thePath.getPointAtLength(i*step);
//create a new use element (or a circle) and set the center of the circle on the calculated point
let use = document.createElementNS(SVG_NS, 'use');
use.setAttributeNS(SVG_XLINK, 'xlink:href', '#gc');
use.setAttribute("x", point.x);
use.setAttribute("y", point.y);
//create a new text element on the same point. Thr text content is the i number
let text = document.createElementNS(SVG_NS, 'text');
text.setAttribute("x", point.x);
text.setAttribute("y", point.y);
text.textContent = i;
//append the 2 new created elements to the svg
svg.appendChild(use);
svg.appendChild(text);
}
svg {
border: solid;
}
text {
fill: black;
font-size: 4px;
text-anchor: middle;
dominant-baseline: middle;
}
<svg viewBox="0 0 100 80" id="svg">
<defs>
<g id="gc">
<circle fill="silver" r="3" />
</g>
</defs>
<path id="thePath" fill="none" stroke="black" d="M10,10H70A10,10 0 0 1 70,30H20A10,10 0 0 0 20,50H70A10,10 0 0 1 70,70H20" />
</svg>
Please observe that since the svg element has a viewBox attribute and no with it takes all the available width making it responsive.
Suppose I have the following text element, and it is left-aligned as below.
<text xml:space="preserve" text-anchor="start" y="134.799806172" x="450" >
Foo Bar</text>
Observe that text-anchor is start, so I am providing the x and y coordinates of the left edge.
Is there a well-defined way to compute the right edge of this text element?
To give some context, this element must be left-aligned because it has to line up with other elements on the left.
However, I want to have a different element that is center-aligned with this element, so I want to compute the right edge and thereby find the center.
You can use getBBox(), example:
var text = document.querySelector("text");
var bbox = text.getBBox();
bbox will be an object with width, height, x and y properties.
I have an SVG layout (from D3) of a tree. I have an SVG element in my HTML that takes up 100% of the width and height of the page. Then, within that SVG element, D3 renders a group element with a bunch of circles and lines in it. For example:
<svg style='width:100%;height:100%;'>
<g>
...stuff...
</g>
</svg>
I want to be able to zoom and pan so that a certain portion of the tree (group element) takes up the screen. I have the exact coordinates of the area I want to zoom in on, so ideally, I want to move the SVG element X pixels up and to the left, then scale the whole element by Y. How can I best do that?
From what I'm reading, the viewBox attribute is best for this, but I just can't figure out how I would be able to zoom in on just one portion. This example seems to get at what I want, but my SVG element is measured in percentages, not pixels. And even though the coordinate system is supposed to be arbitrary, I'm having a hard time converting between the two.
Here, I use this to zoom into certain regions of the SVG image. Change cx to the x coordinate, cy to the y coordinate, width and height are your call. The line you should be interested in is the svgDocument.setAttribute(...)
function zoomTarget1() {
var svgDocument = document.getElementsByTagName('svg')[0];
var cx = 20;
var cy = 20;
var width = 610;
svgDocument.setAttribute("viewBox", cx+" "+cy+" "+width+" 590");
var reShow = svgDocument.getElementById("FloorSelection");
showReturnButton(cx,cy, width, reShow);
}
I need to know the width and height of a SVG element? Im trying to use the following:
$('g#myGroup').height()
...but the result is always zero?
svg <g> elements don't have explicit height and width attributes, they auto size to whatever they contain. You can get their actual height/width by calling getBBox on the element though:
var height = document.getElementById("myGroup").getBBox().height;
If you're really into jquery you could write it as
$('g#myGroup').get(0).getBBox().height;
according to Reed Spool
I wasn't able to get any of the answers above to work, but did come across this solution for finding it with d3:
var height = d3.select('#myGroup').select('svg').node().getBBox().height;
var width = d3.select('#myGroup').select('svg').node().getBBox().width;
getBBox() here will find the actual width and height of the group element. Easy as that.
Based on the above answer, you can create jQuery functions .widthSVG() and .heightSVG()
/*
* .widthSVG(className)
* Get the current computed width for the first element in the set of matched SVG elements.
*/
$.fn.widthSVG = function(){
return ($(this).get(0)) ? $(this).get(0).getBBox().width : null;
};
/*
* .heightSVG(className)
* Get the current computed height for the first element in the set of matched SVG elements.
*/
$.fn.heightSVG = function(){
return ($(this).get(0)) ? $(this).get(0).getBBox().height : null;
};