<![CDATA[image rotating well But not SVG oject]]>Hello,
The following example is taken from a video of mango website showing how to make an image rotating on itself.
It’s possible for me to make an image rotating on its own position, but not for a svg object.

The svg objet (called « rotor » in the script code below) is rotating with an offset of several hundreds of pixels.

0_1566828102413_anim_ppe2.png

I can of course use an image instead of a svg object , but the rotation wil not be exactly at the center of the object, it’s why i think it’s better to do with svg objects .

Have you got any idea why is there an offset when rotating ?

Where is it possible to find a documetation on the differents properties and method of ma-selector object ?

result of the display:

0_1566828383516_anim_ppe.png

Best regards

]]>https://forum.mango-os.com/topic/4420/image-rotating-well-but-not-svg-ojectRSS for NodeTue, 10 Mar 2026 02:49:05 GMTMon, 26 Aug 2019 13:55:50 GMT60<![CDATA[Reply to image rotating well But not SVG oject on Wed, 28 Aug 2019 04:01:05 GMT]]>If at every point you encounter a surprise or frustration, your response is to add it to the blacklist. Furthermore it is common to feel intimidate to journey down that bumpy "road less travel" and easily get burned by incomplete understanding.

Mango is awesome. It's easy to learn partially, and much harder to learn completely. Inspiring a strong appreciation for all that Mango is and can do will help in shorten the learning curve and eventually more projects are built on the Mango platform.

]]>https://forum.mango-os.com/post/23400https://forum.mango-os.com/post/23400Wed, 28 Aug 2019 04:01:05 GMT<![CDATA[Reply to image rotating well But not SVG oject on Tue, 27 Aug 2019 15:59:23 GMT]]>The journey of a thousand miles begins with a single step.

]]>https://forum.mango-os.com/post/23369https://forum.mango-os.com/post/23369Tue, 27 Aug 2019 15:59:23 GMT<![CDATA[Reply to image rotating well But not SVG oject on Tue, 27 Aug 2019 09:25:10 GMT]]>Hello jared,

You said : The gist of it is that ma-selector should be set to a CSS selector,

But I don’t even know how to set the ma-selector to a CSS selector !!

Even with the links you gave me , i unable to understand how does it works with mango . (angular JS attributes)

Even with the examples given in mango software I unable to update the code to realise the simple rotating svg object I want.

Using scripts is possible for me , but only if it’s not complicated.

I suppose i have to learn many things to be able to do a page like that :

0_1566898420753_vue_flex.png

So, I prefer to stop my involvement in mango.

Thanks for your help.

Bye

]]>https://forum.mango-os.com/post/23360https://forum.mango-os.com/post/23360Tue, 27 Aug 2019 09:25:10 GMT<![CDATA[Reply to image rotating well But not SVG oject on Mon, 26 Aug 2019 16:22:07 GMT]]>@jf89 said in image rotating well But not SVG oject:

It’s possible for me to make an image rotating on its own position, but not for a svg object.

This is not a true statement.

@jf89 said in image rotating well But not SVG oject:

Have you got any idea why is there an offset when rotating ?

You have to correctly set the transform-origin CSS property to the center of the SVG element. Note that it works differently for SVG and HTML.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

@jf89 said in image rotating well But not SVG oject:

Where is it possible to find a documetation on the differents properties and method of ma-selector object ?

There are two examples at
/ui/examples/svg/basic-usage
/ui/examples/svg/interactive-svg

The API docs are missing. I will rectify that right now.

The gist of it is that ma-selector should be set to a CSS selector, this selector is used to locate elements in the SVG and apply other attributes to them.
See
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors

]]>https://forum.mango-os.com/post/23327https://forum.mango-os.com/post/23327Mon, 26 Aug 2019 16:22:07 GMT