The letter should be animated in such a way that there will be an "anchor point" at the top of the letter, that will be used as the rotation center. The bottom border should be rotated from left to right about 30 degree each side, so the final look will be like the letter in hanging (on the "anchor point").
The way I was thinking to rotate is with external css keyframe, on the hover css event.
If the css rotate can parse the letter object's style, it might be able to grab the coordinates of a rotation center moved in Inkscape.
If the css can only rotate objects at the object center, a large transparent object could be grouped with the letter object and the letter object positioned with its "anchor point" at the center of the group, and the css rotate performed on the group.
That's my best shot.... Hopefully someone with more experience can chime in.
I'm kind of new to Inkscape myself. But I figured out how to use external css.
The way I do it is
do something with Inkscape. convert all elements to paths, or at least the one you wat to style.
Using Inkscape, create css selector for the object I want to style. This is good mostly to be 100% sure with the objectID(s), of the object you want to style. Also it good to test the within Inkscape the style one might want to apply. However, not everything is supported here, for example animation. for that, few more steps are required. The objectID is the css selector.
Open the svg file with text editor,
add xml stylesheet to the top of the svg file. for example:
not everything is working, but I think many setting would work.
2. Your suggestion to group it with another object is interesting. Not sure I know exactly what to do for that. also assuming two objects obj1 (the letter) and obj2 (the anchor). I guess grouping makes them one object - obj3.
I am not sure the anchor point of obj3 is the center of obj2 (where obj1) is "aligned".
3. In addition, see the attached gif. This is a try of rotating a letter (with the above css). I did nothing special, just add the letter object and the object to path.
It is obvious the rotation anchor is not the middle, but some point at the top, I didnt figure out, what is the exact point. so maybe this is all I need - figure out how to set the point...
Beginners' Questions creating hanging letter svg
Inkscape.org
Hi
I want to create a single letter svg.
The letter should be animated in such a way that there will be an "anchor point" at the top of the letter, that will be used as the rotation center. The bottom border should be rotated from left to right about 30 degree each side, so the final look will be like the letter in hanging (on the "anchor point").
The way I was thinking to rotate is with external css keyframe, on the hover css event.
Is this possible?
tx
OJ
I don't script much, so I'm not an expert here...
Two way I can think of that might work:
That's my best shot.... Hopefully someone with more experience can chime in.
@TylerDurden
I'm kind of new to Inkscape myself. But I figured out how to use external css.
The way I do it is
<?xml-stylesheet type="text/css" href="file.css"?>file.css, and add regular css selector with the objectID, for each object in the SVG file. for example:#path9551 {fill-opacity:.5;
height: 60px;
width: 60px;
animation: 10s kf1 1;
}
@keyframes kf1 {
0% {transform: rotate(0deg);}
20% {transform: rotate(10deg);}
40% {transform: rotate(-10deg);}
60% {transform: rotate(10deg);}
80% {transform: rotate(-10deg);}
100% {transform: rotate(0deg);}
}
2. Your suggestion to group it with another object is interesting. Not sure I know exactly what to do for that. also assuming two objects obj1 (the letter) and obj2 (the anchor). I guess grouping makes them one object - obj3.
I am not sure the anchor point of obj3 is the center of obj2 (where obj1) is "aligned".
3. In addition, see the attached gif. This is a try of rotating a letter (with the above css). I did nothing special, just add the letter object and the object to path.
It is obvious the rotation anchor is not the middle, but some point at the top, I didnt figure out, what is the exact point. so maybe this is all I need - figure out how to set the point...