Inkscape Community
Help Using Inkscape => Beyond the Basics => Topic started by: johnkelton on May 17, 2018, 04:53:39 AM
-
I am having issues with rotating a needle about a center point. Please refer to the image below.
I am noticing that in XML editor when I rotate my needle i see couple of parameters change. The only parameter I want see changed is transform: rotate(45)
I am inserting this needle in Html inline and I want to rotate the needle with only a single value. I would really appreciate if someone can help me with this.
(https://s31.postimg.cc/7lez9mncr/Needle.png)
(https://s31.postimg.cc/o96hci7y3/Capture.jpg)
-
Hi.
That sounds almostimpossible to achieve with inkscape. Transformations are transformed to transformation matrices whenever you have it done manually, "in one go".
Like rotating and then translating the object.
Would try first if it's possible adding the rotation in the xml editor and test if it's still preserved after saving as svg.
If that succeeds you may need to group the rotated object and translate/scale the group instead -so that the rotation itself will be intact.
Generally speaking inkscape has a flipped coordinate system compared to the svg specs so there is a hardwired transformation matrix inside every inkscape svg (which is also used to set a scale factor with the viewbox attribute?) which may also interfere with other transformations added in -like the rotate, manually-. Just guessing, copy/pasting (with Ctrl+Alt+V) a rotated object would result in turning the rotation into a transformation matrix.
-
Are you looking to animate something on a webpage, using SVG? If so, you'll probably need to write the code yourself. Inkscape doesn't support animation. As far as I understand, you can use SVG only, or it's also possible to use some CSS with SVG. Here's a page that gives kind of an overview of animation and Inkscape and/or SVG: https://inkscape.org/en/learn/animation/
If the purpose is not animation, then I would be curious why you have this restriction of only one attribute or value which changes. (Although certainly you should not feel obligated to indulge my curiosity :-D) But often when we finally understand the whole picture, we can offer more effective solutions.
When you rotate something, it's not surprising that all kinds of values are changing. If you were moving something from left to right, for example, then maybe only the x coordinate changes. However, look at the object. Even a simple, 2-node path, means 2 nodes' coordinates change. And the XML Editor is going to reflect that both nodes' coordinates changed. Considering rotation, you're moving that needle, with many more than 2 nodes, and the nodes move by both x and y direction. So rotation is a complicated process, as far as XML goes. And the XML uses more than just the node coordinates. I don't know exactly what the transform attribute is or does, but that's part of the process too.
-
You'd need to have the center of the rotation in its original position (center of object) to achieve that.
In your image, you have a shifted center point, which is not available in the SVG standard.
Thus it is not just a rotation, but more than that. So Inkscape will create a matrix.
-
You'd need to have the center of the rotation in its original position (center of object) to achieve that.
In your image, you have a shifted center point, which is not available in the SVG standard.
Thus it is not just a rotation, but more than that. So Inkscape will create a matrix.
Interesting!
-
Thanks a lot everyone! for replying.
I find out that the solution is very simple. When ever a complex shape needs to be rotated around a desired/shifted center point.
First make sure the shape is not grouped, if it is then un-group it all
Next, group it only once
Now you will see a defined center of rotation, you can shift it anywhere you want and then open XMLEditor to see the rotation matrix (deg,,cx,cy) only deg will change while Cx, Cy remain constant
NOTE: donot translate the object; otherwise the whole matrix will change. If you do have to translate it to somewhere else. Do it. Then ungroup it all and then group once and shift center of rotation.
-
You don't have to group it, to get a rotation center in the middle of an object. You can use Shift + click on the (ungrouped) object with the mouse over top of the rotation center, and it will go back to it's natural center.
Although I still don't understand why you have this requirement. So maybe what I said about putting the rotation center back to default location is irrelevant.
-
Mmh, seems what I wrote above wasn't correct then. But glad it helped you get on the correct path :) (at least I hope it did)
-
I am unable to rotate gauge_needle with the slider
https://codepen.io/johnkelton/pen/KewQLx/
-
Welcome to the forum!
Someone in this forum might happen to know SVG and/or javascript well enough to help you. But we provide support for Inkscape here. So most of us can't help. For most of us, Inkscape writes the SVG/XML, and we never look at it.
However, someone else here had almost exactly the same question recently. Is there some course or class which has given this 'rotating a needle with inline svg' as a project, or something?
-
Oh wait -- that was you!
https://forum.inkscapecommunity.com/index.php?topic=1132.0
I'll merge this topic into your other one.