I would like the transofrmations of Inkscape (applied to the SVG elements it manages) to be calculated from the center of the element bounding box and not from the upper-left corner (as it does by default).
Is there the possibility to do that?
Tnx.
I'm fairly new to Inkscape so maybe there are better ways to do this, but here is a simple workaround:
In the 'Tool Controls Bar' each object has values for X, Y, W, and H.
Interestingly, these boxes will evaluate expressions, so if you want to center a text box at the point (U, V), you can enter U - W/2 for the X value and V - H/2 for the Y value.
After you have your object centered on the position you choose, then you can apply any transformations you wish since transformations are applied relative to the object's current position.
Hope this is useful.
to the generated SVG (remember to save final file as optimized SVG for performance purposes but keep the original for further updates), you can add a CSS rule that will establish that any SVG children (text, path, ellipse, etc.) will transform based on its own center:
svg>* {
transform-origin: unset;
}
Related
I need to set a new coordinate system so I can get some gradient stuff to work. Using a svg element (with x and y attrs) inside another svg element instead of a 'g' (with transform) works but now I can't draw outside. Is there any way to make a nested svg element not clip its contents? Or another way to do this?
My gradient indicates sentiment and I am drawing a number of bars filled with the gradient. I need to use gradientUnits="userSpaceOnUse" to ensure they are coloured correctly and not according to their own bounds.
Overflow: visible works! tx. I can't see any noticeable perf impact.
By default, the anchor for the text element in SVG is at the bottom left, but I want it to be at the top left, since I am also creating a rectangle to act as the background for the text, but it is displayed incorrectly since the text is higher than the rectangle (because rectangle anchor/offset is at the top left). Is there a way to fix this, so both text and rectangle can be drawn at same coordinates and be displayed in the same location.
The dominant-baseline property/attribute worked for me:
svg {
dominant-baseline: hanging;
}
The coordinates (x and y) you supply for text elements is used as the baseline of the text. This makes sense because if there is text with varying font sizes on the same line, you would want their baselines to line up.
There is no "automatic" way to do what you want. SVG elements are always absolutely positioned.
You will just have to move the text down a bit by making the y coordinate a bit larger.
Alternatively, you could add a dy attribute to shift the text down a bit. Or even use a transform attribute to do the same. But using either of those methods wouldn't really be simplifying the process for you.
I want to combine two SVG paths such that
1.Both paths will be there but, at the area of intersection, there will be no strokes.
2.Second path will be excluded and there will be a complete stroke
See image at http://s18.postimg.org/et4m803rd/shape_combinations.jpg
I want similar function also in HTML5 canvas.
The purpose of this scenario is to implement a lasso selection tool (freehand selection) similar to that of photoshop, with Ctrl and Alt options for adding and subtracting selection [ + some other functions ].
What have you tried? This sounds a little bit like a homework assignment.
The first one is easy to replicate. Just draw the two circles with the stroke, then draw them again in the same place without the stroke.
You can achieve the second shape (the "pacman") by drawing a purple circle on the right that is clipped by a circle that is in the same position as the left (black) circle.
I can use text-align="middle" on a text element to center text. Actually this only works nice for the x-direction. For the y-direction I use the hack of Ian G in question Aligning text in SVG.
But what can I do, if a want to center a text in the y-direction, but want to left-align the text in x-direction?
For example, I have a rect-element and a text-element positioned right of it. The text should be vertically aligned to appear centered in relation to the rect. Therefore I use the text-align="middle" property. But I want to left-align the text in the x-direction (since I want to display it at the right of the rect). That doesn't work, since text-align always applies the both, x and y values.
Actually I am not really happy with the vertical alignment in that way and would prefer something else. But didn't find a better solution yet. (I can't use the dominant-baseline attribute, since I am using Batik, which doesn't support it.) I can't even calculate it myself, since in SVG I have no way to query the ascent/descent/baseline of a font.
The baseline-related attributes, as you have discovered, are not universally supported (yet).
One possible solution is to use a method similar to the old CSS trick for vertical centering.
Set the y coord of the text to the vertical centre of the object you want to center on. Then use dy with an em value to adjust the text verically.
<text x="0" y="100" font-family="Verdana" font-size="20pt" dy="0.35em">Some TEXT</text>
The amount of dy won't be 0.5em as you might think because the visual centre of the font won't be exactly half the em height. It will vary from font to font. But once you find a good dy value for a particular font, it should work for any font-size.
Demo here: http://jsfiddle.net/js88W/1/
Try changing the font-size value to confirm it stays centred.
I'm using Raphael to draw rectangles. Whoo-hoo!
Is there a way to right align contents of an SVG file?
Not just text, but shapes as well?
I can do the math and get the computed x value, but I'm looking for the lazy-simple solution.
Thank you.
There isn't. Unlike normal web pages where the window is resized and the content flows into it, when a Raphael paper is resized, there is no sort of flow, so aligning is irrelevant. Instead of setting align=right, you just set the right edge to be the same position you set the width of the paper to be. If you enlarge the paper, you can scale the contents with a single operation. Once you've set the position of the right edge, you've essentially set the align position. You don't need to re-set all edge values when the paper changes size, you just scale everything with one command. Hope that helps