How to make a line break in svg

Question

I have the following SVG of dynamically rendered pie chart using react-minimal-pie-chart :-

<svg viewBox="0 0 100 100" width="100%" height="100%"><path d="M 75 50 A 25 25 0 0 1 54.34120444167326 74.6201938253052" fill="none" stroke-width="50" stroke="#8dcd81"><title>Excellent</title></path><path d="M 54.34120444167326 74.6201938253052 A 25 25 0 0 1 26.507684480352285 41.449496416858295" fill="none" stroke-width="50" stroke="#eefa6b"><title>Good</title></path><path d="M 26.507684480352285 41.449496416858295 A 25 25 0 0 1 75 49.99999999999999" fill="none" stroke-width="50" stroke="#FF6382"><title>Weak</title></path><text dominant-baseline="central" x="50" y="50" dx="19.151111077974452" dy="16.06969024216348" text-anchor="middle" style="font-size: 5px;">22 %Excellent</text><text dominant-baseline="central" x="50" y="50" dx="-19.15111107797445" dy="16.069690242163485" text-anchor="middle" style="font-size: 5px;">33 %Good</text><text dominant-baseline="central" x="50" y="50" dx="4.341204441673249" dy="-24.620193825305204" text-anchor="middle" style="font-size: 5px;">44 %Weak</text></svg>

This is my Reactjs code:-

const Element = (props) => {
  return (
    <text
      dominant-baseline="central"
      x={props.x}
      y={props.y}
      dx={props.dx}
      dy={props.dy}
      text-anchor="middle"
      style={{ fontSize: "5px" }}
    >
      {`${Math.round(props.dataEntry.percentage)} %`}

      {props.dataEntry.title}
    </text>
  );
};

This is codesandbox full Reactjs example:- https://codesandbox.io/s/throbbing-moon-ejs67?file=/src/App.js

How can i line break between the texts (excellent - good ..) and their percentage .

@Danny'365CSI'Engelman I tried but could not do it in proper way, i am beginner with svg — Q8root, Mar 27 '21 at 15:28
@Danny'365CSI'Engelman I have updated the post and inserted full Reactjs sample code — Q8root, Mar 27 '21 at 15:32
I don't know React.. So its the lame leading the blind... see: https://stackoverflow.com/questions/16701522/how-to-linebreak-an-svg-text-within-javascript — Danny '365CSI' Engelman, Mar 27 '21 at 15:33
@Danny'365CSI'Engelman I've tried it before, the text got missy not organized — Q8root, Mar 27 '21 at 15:36
First create your SVG **without** React in a JSFiddle, CodePen or an SVG file in VScode (use a SVG Preview extension) Once you got the SVG right create it dynamically with React. You can't run before you can walk. — Danny '365CSI' Engelman, Mar 27 '21 at 15:38

score 0 · Answer 1 · answered Mar 27 '21 at 16:58

0

As Danny says - just stick in a tspan. These settings seem to work ok:

const Element = (props) => {
  return (
    <text
      dominant-baseline="central"
      x={props.x}
      y={props.y}
      dx={props.dx}
      dy={props.dy}
      text-anchor="middle"
      style={{ fontSize: "5px" }}
    >
      {`${Math.round(props.dataEntry.percentage)} %`}
  <tspan dx="-12" dy="5">
      {props.dataEntry.title}
  </tspan>
    </text>
  );
};

answered Mar 27 '21 at 16:58

Michael Mullany

30,283
6
81
105

I tried , it worked just there is issue with (Excellent) the letters "llent" is shifted down with the pecentage http://snpy.in/SA7sEq – Q8root Mar 27 '21 at 19:29
Works fine in my browser (Chrome 89 / Win10 x64). You'll have to experiment. – Michael Mullany Mar 28 '21 at 14:31

How to make a line break in svg

1 Answers1