svg.resize.js
svg.resize.js copied to clipboard
svgdotjs
Resizing of group element is unavailable
so far I checked,this library is not supporting group element.
var element = SVG("test").size(500,500)
var group = element.group()
group.add(element.line(0,0,100,100))
....
group.select().resize()
//code above displays no error but isnt working properly.
is there any way to use this library for group element?
How would that work? A group gets its dimensions from its children. You can't give a group a height or width. So you cant resize it. ~~Furtermore only basic shapes are supported for now. Maybe I will add support for nested svg later which can serve as group~~ (already possible)
I don't know why this happens but the case of a group of lines,It moves its position instead of resizing sometimes and sometimes nothing happens with no error.
I say it again only for you: groups are not resizeable. They have no width neither they have a height. They haven't even x and y attributes. So don't even try to resize them!
As I said: Use nested SVGs which gives you a better chance to do what you want
I've already understood that a group is not resizable and is hardly possible to implement it due to a technical reason by first your comment. The second comment i posted was to answer
How would that work?
Anyway,I really appreciate that you explain in a concise and easy-to-understand manner. I'd try to switch into nested SVGs. Would it be presumptuous of me to ask to put sample code of nested SVG to the demo site? That'll be really helpful if you would. thanks.
My bad. I should just stop to write in such a harsh way. Sorry. I found out that even with nested svgs it doenst work (never actually tested it). The bounding box of a nested svg has the dimensions of its content even if it has a height and width. Thats kinda ridicolous and I hope that will change in the future.
For now using nested svg doenst work. SVG2 is out anyway and I have to rewrite all the plugins. Maybe something will change
Nice plugin. I have the same issue while resizing a group of nested elements. Is it impossible to do it?
As I stated above: You cant resize a group. It has no dimensions. It could be possible to resize a nested svg, though. But browsers behave differently and thats why it is not possible for now
Fuzzyma, I really appreciate your work, but I found working example of resizing group using bebox and matrix. It working even on ie11
<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.2" viewBox="0 0 480 240" width="480" height="240" xmlns="http://www.w3.org/2000/svg" >
<g id="g1">
<rect x="20" y="20" width="100" height="100" fill="red" />
<rect x="40" y="60" width="100" height="100" fill="blue" />
</g>
<script type="application/ecmascript">
var width=70, height=70;
var node = document.getElementById("g1");
var bb = node.getBBox();
var matrix = "matrix("+width / bb.width+", 0, 0, "+height / bb.height+", 0,0)";
node.setAttribute("transform", matrix);
</script>
</svg>
That's correct you could resize everything when you scale it. But this plugin does not scale the whole shape. It changes the coordinates. That's a big difference. However having said this scaling would be obviously a possibility to have resizingfor everything. I might look into that again. Thanks for the heads-up!
Fuzzyma thank you for our quick answer. After changing 2 lines in your code Right handler properly works on group. Of course it will be a little more to change :)
// Right
case 'r':
// s.a.
this.calc = function (diffX, diffY) {
var snap = this.snapToGrid(diffX, diffY, 0);
if (this.parameters.box.width + snap[0] > 0) {
if (this.parameters.type === "text") {
return;
}
this.el.move(this.parameters.box.x, this.parameters.box.y)
// original width setting
//.width(this.parameters.box.width + snap[0]);
// new width settting
var matrix = "matrix("+(this.parameters.box.width + snap[0]) / this.parameters.box.width+", 0, 0, 1, 0,0)";
this.el.node.setAttribute("transform", matrix);
}
};
break;
I guess it will work once and then it fails pulling the correct width of the group. Because bbox is used there and bbox gives back the untransformed with :). However with current 2.5 and rbox this problem would go away
Rbox * zoom shuld do the trick as you said :) Fuzzyma. We using your tools very intensively. Is there any roadmap for new version of resize.js? btw nobody on the net hasn't done resize library based on svg group yet (at last as far as I search)
This project was on ice for quite some time. However when I see it's used and needed I am happy to continue working on it.
Fast Roadmap:
- enable resizing of everything. Maybe move to scaling everything with matrices instead of coordinates
- rework select plugin so the box does not get transformed with the shape
- add skew handlers to the resize tool
However for the next week or so I will have no time for working on this. Currently working on the svgdom project so people can use svg.js on their node server
+1, strongly need resize of group element. Or nested SVG. Thank you in advance
+1 on resize of group elements. It would also be great if the following could be controlled:
- ability to allow exceptions (programmatically prevent individual elements within a group to be resized).
- ability to allow exceptions on rotation (programmatically prevent individual elements within a group to be rotated)
- ability to keep text horizontal despite of the rotated / x, y new coordinates.
also the resize should allow to resize a group that may contains other groups
Willing to donate if reasonable.
There is a problem when resizing elements via scale. Its not only the dimension which changes. No - everything scales accordingly. So child elements also scale, so does the text and most importingly the stroke width. So when I go away from coordinate based resizing to resizing with scale, simply resizing a rect would lead to visual changes in the stroke width and thats something (I think) nobody wants.
I would personally be happy as much if the plug-ins functionality was done using nested SVG if that would make things possible.
Yes. Stroke width is a problem. But You can always do a separate tool for text resizing only. The common problem in resizing is that you have image and placeholder.. or few combined images. Image and a frame. If you want to catch all tails at once :) you need to resize each object one by one, with different rules
The current svg.resize.js already handles this nicely for a "single" element selected without the stroke issue (when I currently resize a circle or path or rectangle, the stroke remains the same). Is it not possible to do that recursively to each child element of the selected parent object? (group or nested)
Each element may have a property attached (may be an idea could be a specific class name added to the element with "addClass") that may instruct the svg.resize routines whether to skip resize / rotation / skew etc.. to each shape / text.
*** edit *** Sorry, I take this back, it does not work the above way. I have modified the source of the select / resize to work the same way it does today for individual elements but applied on a nested SVG (recursively on all children) and the result is not always desirable... (if you have a circle and a star and resize right by adding the same width to each shape they start overlapping to each other at one point).. so probably scale is better...
By the way, here is someone that is suggesting how to avoid the stroke issue.. http://stackoverflow.com/questions/1301685/fixed-stroke-width-in-svg
Sorry you even lost time reading the stupid suggestion :-(
For my issue, I just have to do a custom solution for my specific case....
Thank you.
https://jsfiddle.net/RafaelSantosFerraz/5nvjjc1r/18/
I manage to create a JQuery simple example for resizing a svg group of elements using scale. Its draggable to.
-
Hold shift while resizing to keep aspect ratio. (only for corner points)
-
Grid snap is included. (var snapGridSize = 20;)
-
To avoid stoke width scaling add class "noscalestroke".
.noscalestroke{ vector-effect: non-scaling-stroke; }
Hope it can help someone and maybe get implemented to svg.js.
