Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.
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.
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:
Best regards
-
@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-svgThe API docs are missing. I will rectify that right now.
The gist of it is that
ma-selectorshould 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 -
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 :
So, I prefer to stop my involvement in mango.
Thanks for your help.
Bye
-
The journey of a thousand miles begins with a single step.
-
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.
