I'm trying to wrap text automatically since I won't know what the text is ahead of time.
I tried using the accepted answer in this question, but nothing shows up. Here is my sample code so far:
<svg id="viz" style="margin:auto; position:fixed; height:100%; width:100%;" xmlns="http://www.w3.org/2000/svg">
<switch>
<g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow">
<textArea width="200" height="300">whatever</textArea>
</g>
<foreignObject width="200" height="300">
<textArea xmlns="http://www.w3.org/1999/xhtml" style="width: 200px;height: 300px">otherwise</textArea>
</foreignObject>
</switch>
</svg>
I am rendering this SVG in FireFox (since its part of a web page).
Firefox implements some parts of SVG 2 and dropping support for requiredFeatures is one part of SVG 2 that it has implemented.
Previous versions of SVG included a third conditional processing attribute, requiredFeatures. This was intended to allow authors to provide fallback behavior for user agents that only implemented parts of the SVG specification. Unfortunately, poor specification and implementation of this attribute made it unreliable as a test of feature support.
That means that the first part of the switch now applies when at the time I wrote the answer to the other question, it didn't. The answer is to remove the switch and the first element as nobody implements SVG 1.2 textArea any more.
<svg id="viz" style="margin:auto; position:fixed; height:100%; width:100%;" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="200" height="300">
<textArea xmlns="http://www.w3.org/1999/xhtml" style="width: 200px;height: 300px">otherwise</textArea>
</foreignObject>
</svg>
Related
I have an SVG file and I'd like the text to be editable. Following advice on stackoverflow, I'm using <foreignObject> to acheive this. (Code example below.)
It works a treat in the Chromium browsers, Chrome and Edge.
It doesn't work in IE, but then it doesn't support <foreignObject>, so no surprise.
It also doesn't work in Firefox and I can't figure out why.
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<style>
#text2edit {
font-family: Helvetica, Arial, sans-serif;
font-size:24px;
}
</style>
<path id="screen" d="M0 0h300v100H0z" fill="#00f"/>
<foreignObject x="10" y="10" width="280" height="50">
<div xmlns="http://www.w3.org/1999/xhtml" contenteditable="true" id="text2edit"
style="color: #d4defb; background-color:#000;text-align: center;">Click to edit</div>
</foreignObject>
<text width="300" height="25" x="0" y="60" fill="#fff">
You can click to edit (and click outside
</text>
<text width="325" height="25" x="0" y="85" fill="#fff">
the box when done). Chrome only :-(
</text>
</svg>
Ultimately I want this in an SVG file that's included in an HTML file (using <object>). To emulate this, I've saved the code above in an SVG file and look at it on my own machine via a localhost URL.
Curiously if I put it in a codepen (paste the SVG above as HTML), it works fine in Firefox. But then that's really because the SVG is in-lined into HTML, which I'm trying to avoid.
Is there a trick to get Firefox working. And is there a trick to get IE working too?
I want to add multiple lines of text to an svg, which would be contained within the svg (does not overflow). How can I do that?
I knew that the text tag is used in svg, but I discovered that it's single lined. Then, when I give it textLength (so that it would contained in specific svg), its words overlap with each other. How can I put multiple lines of text which would adjust in svg tag? The code I tried is below:
<svg width="200" height="60" style="border: 1px solid black;">
<text x="10" y="30" textLength="180" style="font-size: 30px;">The paragraph here</text>
</svg>
It doesn't work. SVG has no mechanism for breaking lines.
That said, you would be able to encapsulate a html <p> tag as a foreignObject:
<svg xmlns="http://www.w3.org/2000/svg"
width="21cm" height="29.7cm" style="border:1px solid black;">
<foreignObject x="6.4cm" y="3.6cm" width="10cm" height="10cm">
<p xmlns="http://www.w3.org/1999/xhtml"
style="font-size:48px;">The paragraph here</p>
</foreignObject>
</svg>
Please note that the namespace declarations must be given, and you need to write valid XHML for this to work.
In addition, foreignObject is part of the SVG context, so a width and height need to be set, otherwise it will have no inherent size.
I am looking for clarification about combining <title> and <desc> with the element for Accessibility. Is the following a valid implemention?
<svg>
<title>This is an SVG</title>
<desc">Lorem ipsum descriptum...</desc>
<use xlink:href="#symbolID"></use>
</svg>
Or would you place it in the <symbol> element like this?
<symbol id="symbolID">
<title>This is an svg</title>
<desc>Lorem ipsum ...</desc>
<path d="......"/>
</symbol>
Would screen readers be able to pick these up?
Add a role="img" and a screen reader can pick it up. It may announce both the <title> and the <desc> depending on screen reader, browser, and versions of each.
For a little extra compatibility you can added aria-labelledby to tell the screen reader where to look for the explicit accessible name (which also means it may not announce the <desc>). Some combos may read the <title> twice as a result, too, so it behooves you to be brief.
<a href="#"> foo
<svg role="img" aria-labelledby="twitterTitle">
<title id="twitterTitle">Twitter Account</title>
<desc>Twitter account for example</desc>
<use xlink:href="#twitter"/>
</svg>
</a>
I forked your CodePen and marked it up.
You may have already seen these two articles, but if not:
Tips for Creating Accessible SVG at SitePoint by Léonie Watson,
Accessible SVGs at CSS-Tricks by Heather Migliorisi.
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"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="600px" height="400px" viewBox="0 0 300 310">
<title>Basic textflow</title>
<rect x="0" y="0" width="100%" height="100%" fill="yellow"/>
<flowRoot font-size="16" fill="black" color="black">
<flowRegion>
<path d="M100,50L50,300L250,300L300,50z"/>
<flowText>Tomorrow, and tomorrow, and tomorrow; creeps in this
petty pace from day to day, until the last syllable of recorded time.
And all our yesterdays have lighted fools the way to dusty death.
</flowText>
</flowRegion>
</flowRoot>
<path d="M90,40L40,270L260,270L210,40z" fill="none" stroke="black" stroke-width="5"/>
</svg>
My Requirement:
This is not the answer you want but it is the best I've found. Both FireFox and to lesser extent Chrome support the foreignObject tag. With this you can add text. This generally works well but you are limited to a rectangle for wrapping this way. The xmlns attribute is required.
<foreignObject x="225" y="630" width="157" height="125">
<div class="plain-text" xmlns="http://www.w3.org/1999/xhtml">
You can put really long lines of text here and they will wrap as you would hope they would. The problem is that Chrome doesn't support <ul><li> tags in side the foreignObject.
</div>
</foreignObject>
The desired flow region is just not supported by any browser. Here's a link to Stackoverflow answer that gives more detail.
Auto line-wrapping in SVG text
I have sport schedules that I would like users to be able to print out on 2 or 4 pages. Tournaments with a large amount of teams would produce hard to read text because there isn't much space for it.
Not sure how to produce printable content with d3js, should I specify values for placement and size in pixels, centimetres, percentage? Percentage sounds good but would need to insert a page break element, maybe provide a separate svg for every page. Can't find a good article on how to do this and am wondering if I've missed something.
The code as is should produce lines with text labels, to fit it all on 2 pages the text in the labels would be very small so want to provide a 4 page version. So my question is: What would be the best way to do this?
I'm thinking of providing 4 or 2 svg elements with a page-break-after css style. The shape and dimensions would be roughly letter or a4 landscape and placement units are based on percentages.
[UPDATE]
Since pageSet and page elements seem to be ignored by Firefox (and inkscape) and wrongly interpreted by Chrome I've tried multiple svg's. This seems to print fine on my new but not latest Firefox and Chrome. Code I use is:
<html><head>
<title>Test tournament bracket</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
#media print {
.noPrint {display:none;}
}
</style>
</head>
<body>
<div class="noPrint">
<h1>Forms and non printable content</h1>
</div>
<svg width="70" height="55">
<text x="10"
y="10" font-family="sans-serif"
font-size="12px" fill="black">
Hello
</text>
</svg>
<div style="page-break-after: always;"></div>
<svg width="70" height="55">
<text x="10"
y="10" font-family="sans-serif"
font-size="12px" fill="black">
World
</text>
</svg>
</body></html>
Will give that a shot and see how it turns out.