I have this line of code in my project that generates a certain percentage and shows it on the dashboard.
<text
className="netProfit-circle-text"
x="50%"
y="50%"
dy=".2em"
textAnchor="middle"
>
{`${this.state.percentage}%`}
</text>
What I want to do is to be able to style the "%" and change its size using CSS. How can I do this?
Thanks in advance.
Regards.
You can use the tspan element to wrap the % part. The tspan element can be styled to look visually different than the rest of the text's content. Link to MDN
<tspan>%</tspan>
You can simply wrap the % in a <span> with a class:
<text
className="netProfit-circle-text"
x="50%"
y="50%"
dy=".2em"
textAnchor="middle"
>
{this.state.percentage}
<span class="percentage">%</span>
</text>
and then add some styles to it:
span.percentage {
...
}
yes, it's possible. You can render it as two different jsx elements like this:
<text
className="netProfit-circle-text"
x="50%"
y="50%"
dy=".2em"
textAnchor="middle"
>
<text>{this.state.percentage}</text>
<text className="per-color">%</text>
</text>
Working example: https://codesandbox.io/s/hungry-leftpad-lue55.
Related
<div contentEditable>
<svg viewBox='0 0 300 300'>
<text x=2 y=40>
Can this be a text input field?
</text>
<text y=80>
But not this
</text>
<text y=110>
And not this
</text>
</svg>
</div>
The text in the above SVG is editable because it is wrapped in <div contentEditable>, however for our use case this is not ideal as is:
most importantly, we are using React and we'd like the editable text to be controlled in state.
all text in the above SVG is editable, not just the first text field as is desired
it is a big buggy, with the cursor going way far to the right
It is possible to create an individually controlled (with React useState) SVG text field?
EDIT: something along these lines does appear to work:
const [test, setTest] = useState('here is some text');
// And Return
return (<>
<svg>
<foreignObject x="40" y="40" width="300" height="150">
<div xmlns="http://www.w3.org/1999/xhtml">
<FormControl
className='modal-input'
type='text'
value={test}
onChange={(e) => setTest(e.target.value)}
name='firstname'
placeholder='First Name'
/>
</div>
</foreignObject>
...
Where FormElement is from react-bootstrap. We are going to keep working with this and see if it fits our use case fully, but so far, so good!
You can embed HTML fragments (including React portals for example) in SVG using the <foreignObject> tag (which is specifically designed to allow HTML in SVG). BTW I think if you just want to embed some inputs into SVG, doing it using contenteditable does not seem to make any sense. Just use normal <inputs>
<svg viewBox='0 0 300 300'>
<foreignObject x='0' y='0' width='100' height='100'>
<div contenteditable>
Can this be a text input field?
</div>
</foreignObject>
<text y='80'>
But not this
</text>
<text y='110'>
And not this
</text>
</svg>
I have to print my SVG straight from the browser, but I have no idea how to do that.
The locations and sizes of the SVG's elements are important, that's why the numbers are all in mm.
It has to print on pre-printed paper, in pre-printed containers.
The SVG currently looks something like this:
<svg xmlns="http://www.w3.org/2000/svg" class="col-md-12 designerCanvas" id="svgLabel" width="240mm" height="90mm" viewbox="0 0 240 90">
<image class="svg" id="img-160-68" visibility="visible" x="160.202" y="68.0135" width="14.0043" height="14.0043" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/Icons/icon02.png" />
<image class="svg" id="img-175-68" visibility="visible" x="175.791" y="68.0135" width="14.0043" height="14.0043" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/Icons/icon05.png" />
<image class="svg" id="img-191-68" visibility="visible" x="191.381" y="68.0135" width="14.0043" height="14.0043" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/Icons/icon07.png" />
<text class="svg" id="txt-0-5" font-family="Arial" font-size="1.64233" visibility="visible" text-anchor="start" x="0.5285" y="5.5489" height="33.29333142498542" width="79.26983672615574">
<tspan x="0.5285" dy="1.6423">[EN] Some Title: </tspan>
<tspan x="0.5285" dy="1.6423">There is some text here.</tspan>
<tspan x="0.5285" dy="1.6423">Even more text here. </tspan>
<tspan x="0.5285" dy="1.6423">WOW, a third line.</tspan>
<tspan x="0.5285" dy="1.6423">You're overdoing it</tspan>
<tspan x="0.5285" dy="1.6423">Please</tspan>
<tspan x="0.5285" dy="1.6423">STAHP</tspan>
<tspan x="0.5285" dy="1.6423">No More!!</tspan>
<tspan x="0.5285" dy="1.6423">That's it</tspan>
<tspan x="0.5285" dy="1.6423">I'm outta here....</tspan>
</text>
</svg>
Do note that the paper's (=SVG canvas) width and height come from the DB and can have several values.
The x, y, width and height of the elements now don't have mm, as the viewbox and units combo of the SVG canvas solve that, though I can add it if needed.
Client only wants me to support IE11+, though I myself want to support recent Chrome and FF as well.
I could load the drawing in a fresh (temporary) window to print it, though I'm not sure it'll print on the correct coördinates like that.
Maybe creating a PDF and print that is the way to go, though no idea how to send the svg to that.
The web application itself is an ASP.NET MVC (Core), with plain javascript and jQuery added to the front end.
Couldn't find much info on the web on the topic, besides printing a SVG in pixels on default paper, but I'm pretty sure the elements will get printed in the wrong location/size that way.
Any ideas?
Hello I am writing a lib. for creating composition of texts, internal customisation. - d3-fusiontext.
I want to support
text-align: Justify
The user say provides me a long text. Mentions the height and width it would like to be rendered. The lib. wraps it up, and provides a good visual with wrapped texts. They are all svg text elements so that it can be exported too.
Now I would be to curious to know how the browser internally aligns in a justified manner? Any source/ links/ topics to start with. Any help/ guidance is highly appreciated.
This is a good example of how things might look.
codepen.io/anon/pen/zxNJKE
P.S: Sorry about no gh-pages and docs as the stuff is under dev. Will update.
Just a generalized curiosity how does the browser determines the spacings in justified alignment?
There are other answers on SO which provide information on how you can do text wrapping.
Word Wrap in Raphael JS / SVG
How to either determine SVG text box width, or force line breaks after 'x' characters?
Once you work out which characters/words fit on the line, you can use the textLength and lengthAdjust attributes to get SVG to stretch the line to fit the width.
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="200" y1="0" x2="200" y2="300" stroke="red"/>
<line x1="800" y1="0" x2="800" y2="300" stroke="red"/>
<text x="200" y="100"
font-family="Verdana" font-size="55" fill="blue" >
Hello, out there
</text>
<text x="200" y="170"
font-family="Verdana" font-size="55" fill="blue"
textLength="600" lengthAdjust="spacing">
Hello, out there
</text>
<text x="200" y="240"
font-family="Verdana" font-size="55" fill="blue"
textLength="600" lengthAdjust="spacingAndGlyphs">
Hello, out there
</text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="blue" stroke-width="2" />
</svg>
I have a d3.js chart on which I'm trying to use jQueryUi Selectable plug-in while it shows the selection rectangle (no selecting effect as shown on plugin page) but once I release mouse nothing is selected. You can try on fiddle http://jsfiddle.net/mantrig/5b5698dr/
My code is somewhat like below :
<div class="selectable">
<svg height="90" width="200">
<text x="10" y="20" style="fill:red;">Several lines:</text>
<text x="10" y="45">First line.</text >
<text x="10" y="70">Second line.</text >
Sorry, your browser does not support inline SVG.
</svg></div>
--js script--
$(function() {
$( ".selectable" ).selectable();
}
});
No class is getting add or remove on selection . These text elements are sample in my case these things will be dynamic from some json.
I need to set SVG parameter text-anchor:"middle" for a set of single character tspan elements centered in small circles for a guitar chord chart generator: see http://chordography.blogspot.co.uk/.
When I paste the svg code into a browser: Chrome, IE, Firefox, Opera, Safari, or in Open Office Writer, the characters are placed left of centre, EXCEPT for the last tspan element, which is centered correctly. The last one is always OK, even if I rearrange the tspans. The problem may not be noticeable in most cases, but sticks out like a sore thumb in this application.
Here, the plot thickens. When I insert the svg code directly into the DOM with JavaScript, as is normal in Chordography, all tspan elements centre correctly. And there is one more twist; when I paste the code in Blogger, it also centres properly, as shown at http://chordography.blogspot.co.uk/p/blog-page_58.html.
Here is the code for the relevant parts derived from XMLSerializer, showing the locations of the circles and inset 'labels'. Only the final '1' is properly centered, along with the final 'A' in the footer.
<g class="dots">
<circle cx="62.1" cy="73.6" r="9.6"/>
<circle cx="85.1" cy="128.8" r="9.6"/>
<circle cx="108.1" cy="128.8" r="9.6"/>
<circle cx="131.1" cy="128.8" r="9.6"/>
<circle cx="154.1" cy="73.6" r="9.6"/>
</g>
<g text-anchor="middle" class="text">
<text class="labels">
<tspan x="62.1" y="79.2">1</tspan>
<tspan x="85.1" y="134.4">2</tspan>
<tspan x="108.1" y="134.4">3</tspan>
<tspan x="131.1" y="134.4">4</tspan>
<tspan x="154.1" y="79.2">1</tspan>
</text>
<text class="footer">
<tspan x="39.1" y="189.6"> </tspan>
<tspan x="62.1" y="189.6">D</tspan>
<tspan x="85.1" y="189.6">A</tspan>
<tspan x="108.1" y="189.6">D</tspan>
<tspan x="131.1" y="189.6">F♯</tspan>
<tspan x="154.1" y="189.6">A</tspan>
</text>
</g>
All a bit bizarre; any ideas anyone.
If you add 'text-anchor="middle"' to each tspan you will center them (you have to remove the space between the 'tspans' as well, otherwise the extra space will be considered as part of the first line and they won't be completely centered).
The space is most likely the reason you are having this issue.
The tspans look like this ...
<tspan text-anchor="middle" x="56.5" y="72">1</tspan><tspan
text-anchor="middle" x="77.5" y="122">2</tspan><tspan
text-anchor="middle" x="98.5" y="122">3</tspan><tspan
text-anchor="middle" x="119.5" y="122">4</tspan><tspan
text-anchor="middle" x="140.5" y="72">1</tspan>
Reference jsFiddle: http://jsfiddle.net/rfornal/0u5wmevm/
Usually I'd regex all unwanted characters, then read string as array, eg:
var badStr = 'xx,1p23,4 "5'; // string with errors
var newStr = str.replace(/[^x\d]/g,''); // outputs: x12345
console.log(newstr[1]); // debug, outputs: 1