Every time I press the button, a unique shape is generated. These shapes are dynamic and can range from polygons to circles (there are hundreds of shapes).
Each shape is composed of a series of lines.
The problem arises when each shape is positioned differently and scaled smaller or bigger than the others. I want all the shapes to have consistent scaling effects and be positioned at the same x-coordinate. Some shapes appear in the center, while others shift towards the top left.
The issue may lie in the coordinates of the lines. In the first snippet of code, it begins at (0,0) while the last shape's line starts at (15,5).
Is there a way to place the group g at the same position for all shapes? Should I position them relative to something?
var draw = SVG('drawing').viewbox(0, 0, 400, 400).attr("preserveAspectRatio", "xMidYMid meet");
var group = draw.group().translate(90, 90).scale(3)
var obj = {
"type": "Polygon",
"coords": [
[
[0, 0],
[30, 0],
[30, 20],
[60, 20],
[60, 40],
[0, 40],
[0, 0]
],
//more coordinate arrays here...
]
};
shapehandler()
function shapehandler() {
if (obj.coords.length) {
group.clear();
drawShape(obj.coords[0]);
obj.coords.shift();
}
}
//Code continues...
html, body {
margin: 0;
padding: 0;
font-family: Arial;
}
svg {
width: 100%;
height: 100%;
}
#drawing{
margin: 20px;
display: inline-block;
position: relative;
border: 1px solid darkgrey;
overflow:hidden;
box-sizing: border-box;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.js"></script>
<div id="toolbar">
<button type="button" id="btn-show-shape" onclick="shapehandler()">Show Polygon Shapes</button>
</div>
<div id="drawing">
</div>