I have a page where we are using SVG to render a sequence diagram. Some of the data represented has the potential to occasionally be very long, so I would like to limit the width of TSPAN elements and provide an ellipsis, while allowing the user to hover over the text and show the full text.
Initially I tried to use CSS in conjunction with the text-overflow property by setting the value to "ellipsis" which is the exact behavior I am looking for, but it doesn't have that functionality available (big bummer) is there any other way to limit the length of text and allow the full text to be shown on an action such as hover?
Create the tspan with the ellipsis text and then have a <title> element with the complete text e.g.
<tspan>Really really...<title>Really really long text</title></tspan>
Related
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 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)
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
How to change the height and width of textarea (or any html element) from javascript which is inside foreign object in svg.Moreover, can I drag an html elelment and drop on svg container by any mean (htm5 any hint) or atleast can I get the coordinates on svg during draging so that I can implement my own drag and drop. Thanks in advance
You appear to my eye to have at least two distinct questions. If I understand correctly, the first one is something like this: how can you write JavaScript within an SVG instance so that you can embed the SVG instance and have the JS control the embedding HTML? Do I have that right?
If so, the answer can be constructed from the parts of http://phaseit.net/examples/SVG4/c1.html and related examples. Briefly, write "window.top" to reach the HTML reference.
The same sort of reference gives access to HTML5 drag-and-drop, if that's what you're after.
Is that the level of answer you're after, or do you need an executable example?
LATER, AFTER MORE DISCUSSION: it appears that http://phaseit.net/examples/SVG5/embedding.svg is more like what you're after. Do I have that right, Arslan Ahson? What you should see when you display the SVG instance there is an SVG-coded elliptical button which, when pushed, toggles the appearance (background color and width) of a nearby embedded HTML textarea.