Suppose I have a svg path and a piece of text. I want to figure out where they intersect. I'm not really sure where to start, because the svg path's getBBox() function does not help.
Where should I start?
You have the text bounding box via getBBox(). Unfortunately, as you may have already discovered, that is not a tight bounding box of the glyphs. It includes the full descender and ascender heights of the font. However it should get you a reasonable approximation.
The next step is to determine where the path hits the bounding box. Getting a perfect mathematical solution is very hard, but there are iterative approaches that are much easier and give good results.
Path elements have a couple of DOM functions that can help: getTotalLength() and getPointAtLength(). You can step along the path from 0 to the path length, calling getPointAtLength(), until the point returned is inside the text bbox.
If you want to get more accurate and determine which character in the text touches the line, there are some DOM functions on SVG text elements that should be useful. For instance, `getExtentOfChar(n) returns the bounds of the nth character in the text.
Related
I would like to generate some diagram style graphics using SVG and use text in the diagrams. My problem is, how to know the size of the text in advance to be able to adjust the rest of the layout accordingly. To make this explicit: I'm not talking about SVG in a browser. I would like to work with fixed units and generate PDF for printing for example. So if I use a 12pt font, it should also be printed as 12pt font.
To have a more concrete example: Lets assume I have the three strings "bla", "blablub" and "blubblablub". I would like to print them in a given 12pt font, determine the string size and enclosing boxes and draw the biggest sized box around all of them. The idea is to have equally sized boxed around all, based on the longest text.
Could somebody give me a hint how to do that or why it is not possible? Searching for this topic, I only get some JavaScript tricks in the browser, which usually involves rendering the text and then re-rendering everything again.
Is there a nice and easy way to to have the functionality of lengthAdjust (together with textLength) for shrinking text if necessary (if too wide) but never attempting to stretch it?
Two possible solutions for a SVG generated through JS come to my mind:
Count characters (or rather grapheme clusters) and based on that (together with some heuristics unless a fixed-width size font is used) determine whether to set textLength or not.
First do it without textLength set and then determine using getBBox() whether the text needs some shrinking in which case textLength will be set.
Both solutions are IMHO quite ugly (and possibly buggy from my recollections of past encounters with getBBox()). Is there maybe some nicer solution I missed?
Have a look at this: https://stackoverflow.com/a/39886640/1925631
Essentially, make a path which spans the exact coordinates where you want to spread your text on a path. Measure this path. Then, measure how many pixels your text requires, with a font-size of 1px (and other desired font-features). Now adjust the font-size to fill your desired percentage of the available path advance width. Adjust start-offset and text-anchor. Now finally calculate your author specified textLength and choose a lengthAdjust value to get exact alignment on low precision / non-conformant renderers.
Finally, if you need to support viewers without text on a path rendering support, you can use a conformant viewer with javascript support to create a backwards compatible/fallback version. Render the content and use the SVG DOM api to fetch the x, y and rotate values for each character/glyph, now create a new SVG DOM representation with those attributes specified. You might need javascript to calculate absolute width and height for the root svg element as well, and a correctly specified viewBox, and cascade/resolve/convert all css selectors/rules/properties to inline attributes. But this way you can get cross-platform, cross-browser/viewer rendering of text, with a single compilation step per immutable source file version.
I've also made a gist to ease the last step, of resolving the css and removing all classNames, while preserving the rendered end-result: https://gist.github.com/msand/4b37d3ce04246f83cb28fdbfe4716ecc
This is for the purpose of a single universal svg + javascript codebase, and web+ios+android software development (based on react + react-native + react-native-svg)
I've an svg dynamically created on a page. As things "happen" (user clicks) the svg expands and collapses certain elements. It may fit in the viewport, it may not. In the case that its too big to fit on a page, the user must scroll to where s(he) wants to go/see. Now this is fine, however I have a requirement that the last element "selected" becomes the center of the page/viewport. i.e. If they click on an item, thats what they need to see without scrolling.
Could anybody tell me the best way to attack this. I've googled around but can't find what I'm looking for (though I'm not long at all this so I might have been searching the wrong stuff).
Is there a way to do this purely programmatically with javascript? Or am I obliged to pass by CSS to get the solution I want. Any tips/links/advice much appreciated.
thanks and have a nice day
G
I had a similar thing and I used the viewBox property to handle this. You could also use a wrapping <g> element, which you translate. However, from my point of view the basic approach is the same and you basically need to do two things:
keep track of the x and y offset and the dimensions of the viewport. (Using the viewBox will give you that »for free«)
Compute the center of the Element. Therefore I used the getBoundingClientRect()method which yields the AABB of of the Element in absolute coordinate space, relative to top-left edge of the whole page.
With these things, all that remains is to calculate the vector from the viewport center to the object's center.
Here you can find the reference of the viewBox and here a nice tutorial about it, because it can be a bit confusing at the beginning.
Another pro for the »viewBox« approach is: There is no dependency on special DOM elements, it just works on the root <svg> element. I once implemented both methods, I started out using a wrapping <g> element, what worked fine but gave me some performance issues. So I decided to change and use the viewBox, with the result, that the performance in Firefox grow, but slowed down in Chromium.
Edit
Here you can find a little fiddle, that outlines the approach. But be aware of the following: getBoundingClientRect() yields the position of the Element on the whole Page, so if your <svg> is not positioned at (0,0) (top: 0px; left: 0px), than that will include the offset of the svg itself. The offset of the viewBox must not include this offset, so you need to cancel that out somehow. For sake of simplicity I just used the client Bounding Rect of the SVG, what works because there are no transformations applied.
I am trying to make a tool for my website which traces over Japanese characters, showing the stroke order etc.. something like this: http://www.chinesehideout.com/tools/strokeorder.php?c=5pel
I have made a bunch of SVG files in inkscape, which are made up of just curves, one for each stroke of the character. I have then imported these into Raphael using the raphael-svg-import: https://github.com/wout/raphael-svg-import
The SVGs are displaying perfectly, however I want to animate them.
My question is: Is there a way to take each path from the SVG in turn in Raphael, and then animate/stroke them? If so..how??
If you need any more info please say!
Thanks
EDIT: Perhaps I should clarify, when I say stroke I mean progressively draw the line, starting from the first point and ending at the last. At the moment it draws all paths simultaneously and draws the whole of each path at once.
The technique people use in svg for doing this is outlined in this answer. It's probably possible to adapt that to Raphaël, though the Raphaël documentation doesn't list stroke-dashoffset.
Raphaël has a method Element.getSubpath(from, to) that can be used to get only part of a path, that should probably also be an option.
I have to build a SVG image containing some rotated text elements. I want to achieve the following:
Each text element shall be rotated around its center point by a degree.
The resulting (imaginary) bounding box of the rotated text shall be translated, so that it's upper left is at position x,y.
We don't know the content, i.e., the width, of the text elements beforehand.
What is the best way to do that?
(I have a basic understanding of SVG and I am able to look up the spec on my own. So I know about transform and rotate(), translate()... However, I struggle with this specific case.)