change 0,0 position of svg path - svg
I have a svg path as below:
'M12,2 C 8.13,2 5,5.13 5,9 c 0,5.25 7,13 7,13s7,-7.75 7,-13C19,5.13 15.87,2 12,2zM7,9c0,-2.76 2.24,-5 5,-5s5,2.24 5,5c0,2.88 -2.88,7.19 -5,9.88C9.92,16.21 7,11.85 7,9z M12,9m-2.5,0a2.5,2.5 0,1 1,5 0a2.5,2.5 0,1 1,-5 0'
Now the tip point at (12,22), I would like to keep shape the same but the tip point at (0,0).
Which tool can do such position shift?
One possible solution would be using this tool to convert the path to to all-relative path commands.
For example convert:
M12,2 C 8.13,2 5,5.13 5,9 c 0,5.25 7,13 7,13s7,-7.75 7,-13C19,5.13 15.87,2 12,2zM7,9c0,-2.76 2.24,-5 5,-5s5,2.24 5,5c0,2.88 -2.88,7.19 -5,9.88C9.92,16.21 7,11.85 7,9z M12,9m-2.5,0a2.5,2.5 0,1 1,5 0a2.5,2.5 0,1 1,-5 0
to:
M12,2c-3.87,0,-7,3.13,-7,7c0,5.25,7,13,7,13s7,-7.75,7,-13c0,-3.87,-3.13,-7,-7,-7zm-5,7c0,-2.76,2.24,-5,5,-5s5,2.24,5,5c0,2.88,-2.88,7.19,-5,9.88c-2.08,-2.67,-5,-7.03,-5,-9.88zm5,0m-2.5,0a2.5,2.5,0,1,1,5,0a2.5,2.5,0,1,1,-5,0
Now in order to move it in the 0,0 just change the first two values after the initial M command from 12,2 to 0,-18.
The first value is 0 and represents the x value of both tue top and the tip. The second value is -18 and represents the y value of the starting point of the path located almost at the top. In order to get this value I did: 2 (actual y coordinate of the point) - 20 (height of the path).
In order to get the height of the path I'm using getBBox()
console.log(g.getBBox())
svg{width:30vh;border:solid}
<svg viewBox="-7 -18 14 20">
<path id="g" d="M0,-18c-3.87,0,-7,3.13,-7,7c0,5.25,7,13,7,13s7,-7.75,7,-13c0,-3.87,-3.13,-7,-7,-7zm-5,7c0,-2.76,2.24,-5,5,-5s5,2.24,5,5c0,2.88,-2.88,7.19,-5,9.88c-2.08,-2.67,-5,-7.03,-5,-9.88zm5,0m-2.5,0a2.5,2.5,0,1,1,5,0a2.5,2.5,0,1,1,-5,0"/>
</svg>
Related
What is the difference of "z" and "Z" when closing an SVG path?
When creating an SVG path, typically the capital letters (M, L...) in the d attribute refer to absolute coordinates and the lower case letters (m, l...) refer to relative coordinates to the last point. Here's an example that draws a small right triangle in absolute coordinates: <path style="stroke:black;fill:none;" d="M100,100 L150,100 V50 Z" /> This draws the same triangle in relative coordinates: <path style="stroke:black;fill:none;" d="m100,100 l50,0 v-50 z" /> I can use a capital or lowercase M and Z in either case and visually, nothing is changed. Regarding M, I assume that since it is the first point, it is absolute or relative to (0, 0), but please correct me if that is wrong. What is the difference of z and Z?
In all cases: An upper-case command specifies absolute coordinates, while a lower-case command specifies coordinates relative to the current position. path_commands But in the case of z/Z, there is no difference (ClosePath). There is no absolute or relative coordinate associated with the z/Z, so it will just create a straight line between the last point and the starting point.
Both z and Z define the Path Command: ClosePath Path commands are instructions that define a path to be drawn. Each command is composed of a command letter and numbers that represent the command parameters. SVG defines 6 types of path commands, for a total of 20 commands: MoveTo: M, m LineTo: L, l, H, h, V, v Cubic Bézier Curve: C, c, S, s Quadratic Bézier Curve: Q, q, T, t Elliptical Arc Curve: A, a ClosePath: Z, z
SVG : Confusion about relative path coordinates
I'm trying to cut up a long SVG path generated by inkscape into several smaller paths. Specifically, I am cutting up this path: "m 42.333333,13.895833 c 0,21.166668 21.166666,19.843751 21.166666,19.843751 h 9.260417 c 0,0 19.84375,-11.906251 13.229166,7.9375 -6.614583,19.84375 -13.229166,31.75 -33.072916,21.166667 C 33.072916,52.260417 31.75,13.895833 31.75,13.895833" The output I generate at the moment are the following paths: "M 42.333333,13.895833 c 0,21.166668 21.166666,19.843751 21.166666,19.843751" "M 63.499999,33.739584 l 9.260417,0" "M 72.760416,33.739584 c 0,0 19.84375,-11.906251 13.229166,7.9375 -6.614583,19.84375 -13.229166,31.75 -33.072916,21.166667" "M 39.6875,54.906251 c -6.61458400000001,-2.645834 -7.93750000000001,-41.010418 -7.93750000000001,-41.010418" This is not correct. You can see the difference between input and output here. As you can see, almost all points are correct, except that the fourth path of the output does not start at the same point that the corresponding part of the original path does. This is probably caused by some error in my understanding of how SVG path coordinates exactly work. I arrived at the starting point (39.6875,54.906251) for the fourth path as follows: We start at (42.33333,13.895833). We then curve to relative position (21.166666,19.843751), so that gives us absolute position (42.33333+21.166666,13.895833+19.843751) = (63.499996,33.739584). The path is then extended with a horizontal line with relative x coordinate 9.260417. So that gives new absolute position (63.499996 + 9.260417, 33.739584 + 0 ) = (72.760413,33.739584). We then curve to relative position (-33.072916,21.166667). Giving the start position for the fourth path as (72.760413-33.072916,33.739584+21.166667) = (39.6875,54.906251) (with some rounding). Why is this wrong?
I figured it out myself. The problem was caused due to the third curve actually being a polybezier consisting of 2 cubic curves. The coordinates of that second cubic bezier should be relative to its starting point, rather than the starting point of the complete polybezier.
Trouble creating a closed line chart in svg
I've got a react component which is creating an svg line chart (I'm not using a library, just creating the svg itself). Problem is, when I add a final point to the path to return to the starting point, I have a strange 45degree angle showing up at the end of the chart. Can anybody explain why this is not nicely closed? Here's an example https://jsfiddle.net/7svavrmu/1/ From what I understand, the final L 0 300 should be returning the path to the origin. Here's the code <svg width="300" height="67.40652464075235"> <path fill="blue" stroke="black" d="M 0 40.32613081539207 L 0.15306122448979592 40.990776224724726 L 0.25510204081632654 41.834373941621585 L 0.30612244897959184 62.31225269212592 L 299.0816326530612 45.84534164491692 L 299.33673469387753 65.256033885832 L 299.48979591836735 45.314084715607414 L 300 45.27080004137377 L 0 300 "></path> </svg>
In SVG paths, each letter is an instruction and the following numbers are the coordinates for that instruction. Your path ends at a strange location, L 0 300 is the bottom left location but way off the viewport, you need to "draw" the bottom part of your graph by removing the last instruction and adding L 300 67 (bottom right corner) and L 0 67 (bottom left corner). Putting it all together your path needs to look like this: d="M 0 40.32613081539207 L 0.15306122448979592 40.990776224724726 L 0.25510204081632654 41.834373941621585 L 0.30612244897959184 62.31225269212592 L 299.0816326530612 45.84534164491692 L 299.33673469387753 65.256033885832 L 299.48979591836735 45.314084715607414 L 300 45.27080004137377 L 300 67 L 0 67"
How to calculate the y coordinate of a rectangle without transforms in Inkscape?
Imagine I have an Inkscape file with the following rectangle: I want to calculate the Y coordinate reported by Inkscape (596.654). How can I do it (manually) ? I tried this: The top of the page seems to have a Y coordinate of 744. I subtract from that number the y coordinate of the rectangle in the XML editor (417) and its height (37) and get 744 - 417 - 37 = 290. Note that the rectangle doesn't have any transforms and doesn't belong to a group.
Here's the simplified version of your SVG with only the relevant information included: <svg width="297mm" height="210mm" viewBox="0 0 1052.3622 744.09448"> <g transform="translate(0,-308.26772)"> <rect x="216.1537" y="417.34927" width="385.25827" height="37.859257" style="stroke-width:1;" /> </g> </svg> Despite what you thought, there is a transform in there (in the group). SVG internal coordinates have their origin in the top left. Whereas Inkscape displays a converted value relative to the more normal origin at bottom left. The displayed value also takes into account the stroke width. Your rectangle is drawn (internal coords) at y = rectY + translateY = 417.34927 - 308.26772 = 109.08155 The page has a height of 744.09448. So the displayed ccoordinate will be: y = pageHeight - rectY - rectH - strokeWidth/2 = 744.09448 - 109.08155 - 37.859257 - 0.5 = 596.653673
Interpreting svg paths created in inkscape
I am trying to regenerate svg paths in a script using xml files created by inkscape. I understand how to interpret the d tag in the xml file, but I am having trouble with the transformations baked into the file. My test file has a path on it that I simplified down to a small triangle to make it easier to work with. The simple svg file from inkscape looks like this: xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg6530" viewBox="0 0 33 134" height="134" width="33"> <defs id="defs6532" /> <metadata id="metadata6535"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g style="display:inline" transform="translate(0,-918.36216)" id="layer1"> <path id="path7149" d="m 0.10475398,1040.2201 1.79370822,0 1.4230759,-1.6612" style="fill:#000000" /> </g> </svg> The path is relative (lowercase m) It has a transform:translate of (0,-918.36216) applied to it. The view box is 0 0 33 134 height = 134 width = 33 the path is: "m 0.10475398,1040.2201 1.79370822,0 1.4230759,-1.6612" All units are pixels. If I look at the path in inkscape I see the following 3 points in the document: 0.105,12.142 1.898,12.142 3.322,13.80 These are the three points I'd like to recreate in a script. If I start with "M 0.105,12.142 1.898,12.142 3.322,13.80" I get exactly what I want, but I can't figure out how to get to this from: d="m 0.10475398,1040.2201 1.79370822,0 1.4230759,-1.6612"
The path string: m 0.10475398,1040.2201 1.79370822,0 1.4230759,-1.6612 is equivalent to M 0.10475398,1040.2201 l 1.79370822,0 l 1.4230759,-1.6612 or a move and two relative lines. If we convert the relative line coordinates to absolute (and round to three decimal places for simplicity) we get: M 0.105,1040.220 L (0.105+1.794),(1040.220+0) L 0.105+1.794+1.423),(1040.220+0-1.661) or M 0.105,1040.220 L 1.899,1040.220 L 3.322,1038.559 Now you are also applying a transform to the path. It's a translation by (0,-918.362). If if we now apply that to your path, we get: M 0.105,(1040.220 - 918.362) L 1.899,(1040.220 - 918.362) L 3.322,(1038.559 - 918.362) or: M 0.105,121.858 L 1.899,121.858 L 3.322,120.197 In its UI, Inkscape is flipping the Y coordinates from the SVG convention, where Y=0 is at the top, to the cartesian convention where Y=0 is at the bottom. So for the final step, if we subtract all the Y coordinates from 134 (the height of the document), we get: M 0.105,12.142 L 1.899,12.142 L 3.322,13.807 Which is the string you were after (with minor rounding differences). tl;dr: Convert to absolute coordinates, apply the transform, flip the Y coords.