Questions tagged [tspan]
55 questions
50
votes
3 answers
Align lines of text to center in SVG
I need to output multiple lines of text in SVG.
For that I'm using the following scheme:
First line
Second line
First and second line of the text can have different number of characters, which…
BartoNaz
- 2,743
- 2
- 26
- 42
13
votes
1 answer
Calculating vertical height of a SVG text
I have an array of strings. Say,
['Jan 11','Feb 11']
And i am creating a vertical text with these string like so
Scaraffe
- 5,041
- 5
- 21
- 20
6
votes
1 answer
Why are programmatically inserted SVG elements not drawn, except with d3.js?
Say I want to programmatically insert an additional in the element in the following SVG:
serhalp
- 201
- 2
- 7
4
votes
0 answers
Right to Left text in SVG in Chrome 47
When using RTL characters in svg chrome seems to freakout. It does not respect the x or y positions in different ways. for x 0 does not seem to be the left of the parent. Also the y position seems to reverse the vertical order of the tspans.
Is…
StefanHayden
- 3,569
- 1
- 31
- 38
4
votes
3 answers
How to reset SVG tspan positioning without adding an additional tspan
For some reason the positioning of tspan elements is kept even if the tspan tag is closed.
http://jsfiddle.net/4fzqmeud/1/
Both numbers 2 and 3 are affected by the…
Daniel
- 3,383
- 4
- 30
- 61
4
votes
1 answer
Using Ellipsis with SVG's TSPAN?
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…
Jim Gough
- 148
- 3
- 12
3
votes
1 answer
When appending multiple tspan child elements to an svg text object, is a new child element needed each time?
I'm not sure of the best way to ask this. I am wanting to append multiple tspan child elements to a single svg text object. I have the following code.
var tspanElement = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
var majNote1…
Christopher Gaston
- 491
- 2
- 6
- 18
3
votes
0 answers
Text decoration of SVG tspan
I'm seeing inconsistent rendering of SVG elements in regards to text-decoration.
Using this simple testcase:
outer text
kangax
- 38,898
- 13
- 99
- 135
3
votes
2 answers
svg - inside is not visible in FF and Safari
I am trying to figure out why text inside are not visible in FF (v31) and Safari (in Chrome it works). Code which generates texts:
var year_elements_text = document.createElementNS(NS, "text");
year_elements_text.setAttribute('x', String((i…
TomCod
- 67
- 8
3
votes
1 answer
Svg text tspan isn't doing as it's told
I took a big SVG apart and found this weird glitch (fiddle here)
Louis Maddox
- 5,226
- 5
- 36
- 66
2
votes
2 answers
SVG tspan horizontal offset
I'm trying to understand the tspan tag in svg and here is something weird. Look at the following code, FF and Chrome introduce an horizontal offset between the tspans but there shouldn't be any.
2
votes
1 answer
Testcafe unable to filter using Selector.withText()
I'm trying to filter elements on the svg diagram using selector: Selector('.joint-type-mapping-record .v-line').withText('testElement'). But in a result a got a message, that give element not found in DOM.
I checked that innerText is available for…
Dmitry
- 91
- 6
2
votes
2 answers
D3.js append tspan to text element
I have a D3 bar chart. When I mouseover of one of the bars, text appears.
But I would like another line of text to also appear. For this I need to append a element.
I have seen examples, but can't get to append to the text…
Shane G
- 3,129
- 10
- 43
- 85
2
votes
1 answer
Issue with SVG tspans not aligning with text-anchor="end"
I have a bit of code like this:
svg {font-family:Verdana,sans-serif;color:#000;}
.key {font-size:75%;overflow:visible;}
.caphgh {font-weight:bold;}
.keynor {font-weight:normal;}
.keysub…
posfan12
- 2,541
- 8
- 35
- 57
2
votes
1 answer
Adding image to
I have this code:
This shows me this: ¥5,000.00
What I want is to show me with China flag, like this:
Tried many ways, but can't. One was…
AmazingDayToday
- 3,724
- 14
- 35
- 67