I'm really struggling to get my head around this... I'm trying to rotate a bunch of SVGs through 90 degrees. There will be one or more of these displayed on the same web page, and I'd like them to more-or-less fill a page each when printed.
I've not generated the SVGs and they are supplied with a strange viewBox setting. The entire thing seems to be contained in a single layer, so if I apply a transform = "rotate(90 0 0)" to that layer, it does indeed rotate -- but it doesn't remain in the viewBox.
I may be getting the terminology wrong, but I've setup a Fiddle with an example of one of the SVGs here.
I'm planning to adjust the attributes using jQuery, which I know works -- I just don't know what to change!
Any help is much appreciated.
The second and third parameters of the rotate operation are the x and y of the center of rotation. Try setting them to the centre point of the viewBox.
Related
How could one make a line of text fill up the entirety of it's parent container similar specifically to how object-fit: contain; works for images where it does not stretch it but makes sure it fills as much of the space as possible while not getting cut off or stretched.
It should be mentioned the solution I'm looking for should work in React with changing text without much jumping around so it should have all calculations done before firs render.
This question is not SVG specific but is concerned with ANY way of achieving this effect including canvas or other methods.
I'm aware of Pure SVG way to fit text to a box and SVG Scaling Text to fit container but no answer in them has the desired effect. They either calculate the viewBox on mount (and have that flash of incorrect layout) or work by stretching and distorting the text.
Things I've tried thus far:
Thus far the closest I've gotten is by making a component that renders an SVG with a text node inside and on mount inside the useEffect calculates the BBox of the SVG and sets the viewBox accordingly.
The issues with that approach are that there is quite a drastic jump of the test siedways whenever the number of characters changes (like from 0 to 10000 if you're displaying numbers) and in general this problem of jumping around since the bbox changes after the first render so on the first one the viewBox is wrong.
I've tried fixing it by rendering an identical hidden SVG outside of react first and measuring it's bbox and that way being able to have the correct viewBox on the first render but I've not been succesful in that.
is there any way to make the perspective of an element in HTML centered in the middle of the screen, so that the perspective point is not moved when you are scrolling...?
Thanks
EDIT:
Here is a small picture of my idea...
The element would be visible from the top and become visible from the bottom as you scroll down.
http://i.stack.imgur.com/W84Me.png
Sorry for my bad english
While traditionally, HTML Elements are 2D boxes only, since CSS3 there is the transform property which lets you transform the boxes in 3D space.
http://www.w3schools.com/cssref/css3_pr_transform.asp
This allows for such perspectives. But since only few browsers let you choose a perspective projection (only orthogonal), you may have to create the transformation matrix yourself. You may find tutorials and formulas for that in most modern OpenGL tutorials, for example.
Only problem left is show a different image from the bottom, since in HTML, an element looks the same from both sides (only mirrored). Maybe you can position 2 elements slightly above each other to get two different faces.
Also, you will need JS to move around the object on the screen.
Maybe you better use some modern technique like canvas or WebGL to do this, since HTML is not really made for 3D.
I am trying to get an effect like this:
http://www.welcomeanimations.com/welcome_animated_gifs_rotating_sign_orange_chrome_k_1.htm
I have tried all sorts of things:
Matrix translation/rotation - spins the text around the 'Z' axis, instead of 'Y'
Adding TextField to a sprite, and Sprite.rotationY++: reg. point is upper left corner
Adding to MovieClip - same as above (an article said MovieClip's reg. point was centered).
This should be trivial?!?! Help me stackoverflow, you're my only hope!
So you have to remember, Display objects scale and rotate around their local coordinate system. so when you put a textfield in a sprite, you need to center it in that sprite's coordinate system. And doing that for textfields is annoying because their width/height isn't always accurate but there is trick for that: get visual bounds, but normally you can take half of somethings width and height
I've created a prototype for you on wonderfl so you can see the solution working in action. Click on the blue square to see how the local coordinate system messes with the rotation
Finally as you use thing you might find things not rotating in 3D space quite right, this should be able to fix that.
I have a fiddle here you can play with. Move around the rotateX and rotateY sliders to see. The part of the element that is closest to you is smaller while the part that is farther away is bigger. If you flip it around using
transform:rotateZ(180deg);
it looks right but I don't understand why it doesnt just look right in the first place.
update
it makes sense if you look at this 3d cube. the transform origin of the cube is the middle of the cube.
Isometric
As far as I can tell the methods work as they are suppose to, it's just that they are rotated in isometric 3D, that is without perspective. This will make your closest and further edges will have the same size, unlike real 3D where the further edge will look smaller and the closer will look bigger.
For a in depth look at isometric projection give the wikipedia article a read.
Perspective
If you want to get perspective on the rotations you have to add the perspective property to your CSS for the containing element. If you add -webkit-perspective: 1000px;to <body> in your first fiddle and view the result in Chrome you'll get perspective 3D like you probably wanted.
More info on that property can be found in the CSS3 transform spec.
Well, if I draw a line with an odd value of lineWidth in HTML5 Canvas I get a blurred line and I know the reason for this problem.
Now, I want to know the solutions to overcome this. I already know a solution for this and which i couldn't implement now. So, please comment on any other solution for this problem.
My Solution :
If you have to draw a line with an odd numbered width, then you will have to offset the center of your line by 0.5 up or down. That way rendering will happen at boundary of pixel and not in middle, and you will always have a sharp line with no residue at the end edges.
Let me know if any other solutions other than the above
Happily (and Sadly) you have correctly implemented "pixel-snapping" when you add/subtract .5 pixels to get your lines to align with pixel boundaries. Unlike Photoshop, there is no option to automatically pixel snap in canvas. ...I feel your pain!