When stretching an svg costume, it is not possible to stretch x- and y-direction independently. Instead both coordinates will be stretched with the same factor (the minimum of both factors, as it seems).
This command does not give the expected result:
switch to costume (stretch "svg costume" x: 100 y: 50 %)
Instead it gives the same result as:
switch to costume (stretch "svg costume" x: 50 y: 50 %)
Right, those costume manipulations work only on bitmaps. Also today we got a report that converting an svg to bitmap in the Paint Editor doesn't work, so maybe this is the same problem, and it tried to convert and failed.
Anyway, thanks for reporting this, and we'll look into it!
// first convert costume to bitmap without stretching switch to costume (stretch "svg costume" x: 100 y: 100 %) // then stretch the converted costume switch to costume (stretch "current" x: 100 y: 50 %)
The same can be done in the JavaScript code in Costume.prototype.stretched. It seems that
not sure what this is about. Stretching SVG costumes with different x- and y proportions totally works for me. Can you share a project where this doesn't work? Thanks!
Ok, it seems I have run into a browser problem: Firefox Quantum 69.0 has the problem, both in 32-bit and 64-bit versions, both on Windows and Linux. In Chromium and Edge everything works as expected. Where can I upload a project.xml?
So I set off to create a minimal example (HTML/SVG/JavaScript) to create a bug report to Mozilla/Firefox. Then I stumbled about this line in sketch.js in method VectorPaintEditorMorph.prototype.getSVG:
The MDN documentation for preserveAspectRatio says that for all alignment specs in preserveAspectRatio different from "none" uniform scaling is forced. So I am not sure now which browsers are doing it right or wrong.
Anyway, changing the above code line to
svg.attributes.preserveAspectRatio = 'none meet';
seems to do the expected thing on all browsers (up to now tested in Firefox 69.0 and Chromium). You can see that in my snap project from above, when you go to the code: I have duplicated the existing costume 'ring' to a costume 'no uniform scaling' and just recreated its SVG code in a local modification of snap. Depending on which SVG costume you choose you get a circular or elliptical ring when only stretching in one direction (in Firefox!).
Wow! That's good find! But this only works for costumes that are edited in Snap's own vector editor, right? Because I've also noticed the "wrong" (not sure anymore if it really is) behavior in imported SVGs. Anyway, this is a great catch, thank you!
Thanks for the roses. Yeah, as far as I can see VectorPaintEditorMorph.prototype.getSVG only affects SVG costumes drawn in Snap. So a solution automatically allowing non-uniform scaling on all costumes in all browsers wouId still have to go via a temporary bitmap since the SVG attributes of an external SVG can currently not be controlled by Snap. It still seems weird to me that SVG-code can prevent a canvas to draw it non-uniformly scaled, but this is what MDN documentation seems to tell - and it could also be seen as a feature. From this perspective the solution should only set the attribute preserveAspectRatio of costumes drawn in Snap accordingly. And allowing non-uniform scaling on the level of programming in Snap is also easy: either generate a bitmap costume or do two stretch commands (as in my example project), so we would not be restricted with this solution. You decide!