Linked Questions

0 votes
1 answer
168 views

CSS word-break property not working on SVG text [duplicate]

I have the following SVG element were i have a text on the graph. wrapper.append("text") .text(data[i].name) .attr("x", 10) .attr("y", 30)...
Sha's user avatar
  • 1,884
72 votes
2 answers
60k views

Find all text nodes in HTML page [duplicate]

For this question I needed to find all text nodes under a particular node. I can do this like so: function textNodesUnder(root){ var textNodes = []; addTextNodes(root); [].forEach.call(root....
Phrogz's user avatar
  • 300k
67 votes
6 answers
57k views

How do I include newlines in labels in D3 charts?

I'm using D3 to generate a bar chart (I adapted the code from this example). The labels I'm using on the x-axis are a couple of words long each, and since this makes all of the labels overlap I need ...
bdesham's user avatar
  • 15.8k
69 votes
3 answers
42k views

Can I embed HTML into an HTML5 SVG fragment?

HTML5 supports the <svg> tag, allowing to embed SVG into HTML. Digging a little deeper, can I nest some HTML inside my <svg> fragment? For example, I'd like to put a CSS'ed <table> ...
Serge Wautier's user avatar
28 votes
8 answers
36k views

SVG Word Wrap - Show stopper?

For fun I am trying to see how far I can get at implementing an SVG browser client for a RIA I'm messing around with in my spare time. But have hit what appears to be a HUGE stumbling block. There is ...
ChrisInCambo's user avatar
  • 8,635
13 votes
4 answers
40k views

Fit Text into SVG Element (Using D3/JS)

I want to write text inside a rectangle I create as follows: body = d3.select('body') svg = body.append('svg').attr('height', 600).attr('width', 200) rect = svg.append('rect').transition()....
mike's user avatar
  • 23.4k
17 votes
1 answer
15k views

Insert text between a rectangle drawn in SVG

I have a code in SVG: <svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="250" height="250" style="fill:blue"> <...
Maverick's user avatar
  • 2,760
12 votes
1 answer
24k views

SVG - how to set text line-height

It seems line-height is the one CSS property absent from svg text. The best resource on SVG I have found is: Jenkov.com SVG Tutorials and there is no mention of it, neither could I find mention of it ...
DogBot's user avatar
  • 528
6 votes
3 answers
3k views

Find rendered line breaks with javascript

I have this situation : div { width: 200px } <div> example example example example example</div> Text jumps to next line automatically when filling the full width of the <...
Tuan Jihoo's user avatar
9 votes
1 answer
15k views

How to implement SVG 1.2 Tiny textArea?

I recently browsed on the internet that there is a textArea local to SVG (I might need this for text-wrapping purpose) I used the example and tested it on Chrome inside the HTML5 element, but it won'...
Eldon Lesley's user avatar
7 votes
1 answer
12k views

Is it possible to set a svg's <text>/<tspan> to a fixed width?

I want to align a text to the right and in this case I have to make the text in a fixed width. Because the text content is dynamically added. <text> <tspan x="421" y="15" text-anchor="...
AGamePlayer's user avatar
  • 7,516
2 votes
3 answers
5k views

NVD3 Horizontal Bar Chart labels too long

I have data that has long labels, i.e: values: [ { x : "This is a really looong label", y : 40 }, { x : "Short label", y : 30 } ] and only a small portion of the text is shown and ...
martinpaulucci's user avatar
2 votes
3 answers
2k views

Can not break long sentence in a D3-generated SVG text

I want to break long sentence into two line in my SVG text that is generated by D3. But I can't do it in D3/javascript. I tried with \n and <br/>, but they are not working. <!DOCTYPE html>...
user3002180's user avatar
2 votes
2 answers
9k views

Text Wrap inside SVG Shape

I need to wrap text inside a shape. This is the code I found in a reference, but itself is not working. Can anyone help me? <svg xmlns:svg="http://www.w3.org/2000/svg" version="1.2" ...
srikanth_naalla's user avatar
4 votes
1 answer
2k views

Appending div to circle in d3.js

I have a donut bar of d3.js and I want to put some info in it's center. I can append text element, but I want to put a formatted info there, so I decided to add div on mouseover: $(".arc").on("...
Sergey Scopin's user avatar
-1 votes
2 answers
5k views

How do I make this beveled text effect with CSS? [closed]

Is there any way to give text this beveled look with only CSS? To be clear, I'm looking for text that has thickness, but in a beveled way. Not, for example, what you get with text-shadow, which ...
ladenedge's user avatar
  • 13.3k
1 vote
1 answer
8k views

How do I do a line break with SVG text element ? [duplicate]

Using D3 to create a force graph. I wish to click a button and a rectangle appears (which I have done). Now I want to append this rectangles text with a few lines of text. I have three sentences I ...
rekoDolph's user avatar
  • 823
1 vote
1 answer
2k views

XML: SVG - How to wrap a block of text in a rectangle

For example, I want to put some text on top of a rectangle. <rect x="0" y="0" width="800" height="600" /> <text x="0" y="0"> text text text text text text text text text text text ...
sc1013's user avatar
  • 1,106
5 votes
2 answers
987 views

In HTML5, can I make an irregular shaped text box?

Just to be clear, I am not starting with a rectangular text box and floating around an irregular image. I am creating an arbitrary shape then typing in text to best fit into this shape. Is there a ...
Slamice's user avatar
  • 693
-1 votes
1 answer
2k views

SVG Text multiple lines

Ok so I have some text and was wondering what the best way to get it to automatically span several lines when the window gets to small for it to be on one line?
SalmonMode's user avatar
2 votes
1 answer
1k views

How to display text on donut chart for mouseover event

I am trying to modify this example. On mouseover I want a word to appear on the center of the donut chart like this: I have added code for mouse over but it is not working. Code const eventObj = { ...
Pravu's user avatar
  • 608
2 votes
1 answer
886 views

Animating wrapped text in d3

Hmmm. Now that I've figured out how to wrap SVG text dynamically using TSPANs (see Auto line-wrapping in SVG text), trying to animate it has me stumped. I'm basing it off the Zoomable Treemap example ...
MSC's user avatar
  • 3,326
2 votes
2 answers
1k views

Handling browsers that don't do SVG properly: best way to redirect/load different css/show redirection link?

I have a webpage which I have made entirely as svg (apart from the html to load the svg). So far, so good, and you can see it here (not yet complete): http://kitandmarcin.us/svgcontainer.html (it's ...
Marcin's user avatar
  • 49.2k
2 votes
2 answers
991 views

SVG D3.js append element to SVG g:circle on text mouseover

Scratching my head on this one. We have a list of text on the left side of the page. Each item in the list has a data-id attribute that makes it easy to match up corresponding schools in our SVG map. ...
Christophe's user avatar
0 votes
1 answer
1k views

SVG text element breaking out of parent width

So I set the width of my SVG element to 100% and the width of the last text element that I have in there exceeds the width of the SVG element which is its parent. I've tried using word-wrap and ...
Edson's user avatar
  • 255
2 votes
1 answer
1k views

SVG text line height displays differently within img tag

I have created an SVG image which I am using within our website. The SVG is displayed by inserting the XML into the HTML file, however, when loaded like this the SVG displayed differently compared ...
George Harrington's user avatar
0 votes
2 answers
878 views

Set text width or put text in a div

I would like to be able to set the width of a text element in D3. For now I have some text in a circle but I cannot set the width of this element. (let's say that nodeEnter is a node in my graph) ...
Christopher Chiche's user avatar
5 votes
0 answers
1k views

ImageMagick convert svg to png with text produces blank image

Here is my svg <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgfile" style="position:absolute; height:1200px; width:1600px;" version="1.1" viewBox="0 0 ...
Max Doumit's user avatar
  • 1,095
2 votes
0 answers
1k views

Inline-size for SVG text is not wrapping content in Chrome(v76) or Firefox(v69)

I have text inside svg and I want to have it auto-wrap. I tried the examples from the spec, but its not working in latest versions of Chrome or Firefox. Any help on how to have a run of text auto-...
Ravi Tiwari's user avatar
0 votes
0 answers
749 views

Wrap labels in semi donut pie chart using d3 js

Not able to wrap labels of semi donut pie chart which is developed using d3 js. I tried using CSS by giving word-wrap, max-width etc., but it's not working. How can I warp the text labels if the ...
Sampath's user avatar
  • 163

15 30 50 per page