I am using Raphael to make some manipulations in SVG.
In order to save the SVG as image i use Canvg to render the SVG in canvas.
But the transformations of images inside the SVG rendered in canvas is not right.
Canvg uses native transform() method of html5 to apply the transformations using the below code in line 571 of Canvg.
ctx.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);
But this results in transformations like rotations and scaling done around the origin of the image.
But in Raphael the transformations are applied around the center of the image.
So is it possible to apply transformations so everything happens around center of the image?
You can make your own function that makes transformations happen around the center of the image given the image's center points.
The theory around making things transform by its center is as follows :
Translate the image by <-X,-Y,-Z>, where (X,Y,Z) is the image's center.
Do the transformation you want to do
Translate the image by <X,Y,Z>. (You're just returning it back to its original position now)
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.
I am trying to add a repeating .png as the filler for a SVG polygon element that does not scale with the svg responsive width.
I have the .png added as a Pattern and that is now applied to the svg element but the repeated images scale down to a smaller size on mobile. I need the repeated .png images not to scale.
Suggestions?
Thanks!
If the pattern is part of the SVG, it will scale with the SVG. You cannot avoid that. SVG2 will probably support non-scaling patterns, but that doesn' help you now.
What you could do is apply the pattern as a background to a <div> and use the SVG as a CSS mask applied to that <div>.
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.
Is it possible to apply transformations to an image to transform it in a trapezium?
The image initial state is a rectangulum.
The way my scene is build, I have a polygon that allows dragging on the edges, and an image with the same size and position.
I would like the image to have the same shape of the polygon aways, so it would became a trapezium when one polygon axis is dragged. Is this possible?
I assume you're talking about something like an isosceles trapezoid rather than a simple rectangle.
The answer is No, but Yes...
No, not possible with 2D transforms--canvas.getContext("2d"). That's because 2d transforms use a 3x3 matrix that only makes parallel transforms. Since a trapezoid is non-parallel, you cannot possibly transform an image (rectangle) into a trapezoid.
But, Yes...you can use webGL (canvas 3D transforms) to do non-parallel transforms and therefore you can use canvas 3D to convert an image into a trapezoid.
I'm attempting to make a slideshow composed mostly of divs that can be masked by a canvas element (so that it may be in a circle or strange shape, rather than a square. Is this possible? I have seen many examples of masking an image, but not an entire div or collection of divs.
Yes its certainly possible to mask divs. For instance a canvas could mask a div like this:
that's just an image, source here:
http://jsfiddle.net/r58jF/
or white, which it should be noted merely gives the illusion of a circular div and that illusion is highly contingent upon what is in or behind the div
(or something fancier)
You cannot use the rendering of HTML elements as an image source for a canvas, and so you cannot use a canvas to draw the contents of HTML. If you want to make arbitrary portions of a div fully- or partially-transparent, the answer is "No, you cannot do that with a Canvas."