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)
Related
he following banner is an example of what i want:
https://top.gg/api/widget/535064930727100427.svg
https://top.gg/api/widget/698275428976164945.svg
It's automatically generated and contains dynamic text which causes the "background color" to automatically adjust its size to it as well as have a border radius.
The text and shapes are all paths when I look at the source.
I would like to know how this has been accomplished as SVG itself does not support a dynamic border radius and background color by default.
Somewhere in the SVG source of the links above it showsid="surface19" and I did some research to see what piece of software or library provides such ID's. The text also seems to automatically be converted to paths, so it's not a hand-written SVG that gets modified programmatically from what it seems.
I did a lot of research before asking this question.
I'm generating some simple svg for data visualization and as part of that I need
to render several lines of text. I'm using the simple text/textspan. However when
determining when to break the line, I need to know the width of the string. Note that I am not using javascript, these are static svg diagrams. My manual mockups work fine on all three platforms(Mac/Windows 10/Linux) in several different browser. I've been searching, but all attempts to find anything about string widths involves dynamic SVG and javascript. Is there any data anywhere on the character widths of the default fonts? I'm using rather simple svg. I'm using the default transform and coordinate space as well. Or do I have to write a javascript test page to return the widths?
Thanks.
The standard font is determined by settings of the renderer. Browsers will use the same font they use for HTML content, set by the user and depending on fonts installed on their system. That means text size will differ for each end user.
There is no way around measuring the text after rendering.
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.
is it possible to create a stroke with a dynamic width with SVG? I want to achieve a Calligraphy look like here, here or here.
Is this even possible? It seems customization of strokes in SVG is fairly limited. Even gradients in strokes seem to be non-trivial (see here).
There is a proposal to add into SVG standard a mechanism, that does exactly what you want:
http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke
http://lists.w3.org/Archives/Public/www-svg/2013May/0041.html
There's even an example implementation available here:
https://rawgit.com/birtles/curvy/master/index.html
It is, however, by no means official and we cannot be even sure it'll ever be.
Until then you'll need to stick to Bezier curves and object filling:
You can also use calligraphic fonts, for example - Tangerine available on Google CDN:
This approach requires less work since you don't need to draw everything from scratch, but then again, using third party fonts leaves you with little control over the final result.
You can't dynamically adjust the stroke of a path element. However you could draw a path, use a fill color on it instead of stroke, then double back upon the letters at a slight distance away from the original line.
Also, if you are using the SVG on the web then you can use css fonts on text elements. There are some pretty good cursive fonts that you can use for free... just check google web fonts.
So here is the problem:
I am trying to create dynamic buttons that have text. The text will be generated dynamically so the svg object doesn't know the size of the text. There are two things that I am looking to do and I hope that SVG will do this
First I want the left and right edge of the svg element to stay the same even if I scale the element horizontally
The problem is that I have to set a width on the svg otherwise it doesn't show up when I display the page. Also on the Home and blog buttons you can see that the edge is compressed. I want the edge to stay the same no matter how much text is in the element.
Also I can't seem to set the scale or width properly even with a javascript .getComputedTextLength()
Any help or a point in the right direction would be very helpful
Buttons that are sized to their text content is functionality that can be adressed with Raphael's getBBox()
The use of this js library means that you are implicitly using SVG or VML and this functionality is more easily addressed by referencing this JavaScript library
To see the getBBox() function in action you could visit the Autobox example here:
http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2