Add inline labels to a horizontal bar with pure SVG

user_1354580 0
Viewed 78

I use the bellow SVG code to build a horizontal bar chart. It is OK, but I need also two inline labels before and after the chart. I know how to add them with HTML and CSS, but I want to solve this only with pure SVG. How to do this?

  <svg class="chart" width="300px" height="40">
        <g transform="translate(0,0)">
            <rect width="82%" height="22" fill="lightskyblue"></rect>
            <rect width="100%" height="22" style="fill:none; stroke-width:1; stroke:gray;"></rect>
            <text y="30" dx="0.25em" dy=".35em">0</text>
            <text x="20%" y="10" dy=".35em" fill="red">|</text>
            <text x="20%" y="30" dx="-0.25em" dy=".35em" fill="red">13</text>
            <text x="100%" y="30" dx="-1.25em" dy=".35em">63</text>
        </g>
    </svg>

This is what I have now:

enter image description here

And this is what I want:

enter image description here

svg
1 Answers

In order to make it work I'm using your code as a nested svg inside a larger svg element. Please observe I'm using a viewBox attribute where the x component has a negative value (-50) making space for the text.

svg{border:solid;}
<svg class="chart" width="300px" viewBox="-50 0 400 40">
  <text y="20" x="-45">TXT</text>
  <text x="345" y="20" text-anchor="end">TXT</text>
    <svg viewBox="0 0 300 40" width="300">
        <rect width="82%" height="22" fill="lightskyblue"></rect>
        <rect width="100%" height="22" style="fill:none; stroke-width:1; stroke:gray;"></rect>
        <text y="30" dx="0.25em" dy=".35em">0</text>
        <text x="20%" y="10" dy=".35em" fill="red">|</text>
        <text x="20%" y="30" dx="-0.25em" dy=".35em" fill="red">13</text>
        <text x="100%" y="30" dx="-1.25em" dy=".35em">63</text>
  </svg>
 </svg>

I must tell you that I wouldn't percentages for the position and size of the rects. I would have done it using user units (without unit identifier) and I wouldn't have needed to wrap it in another svg element.

UPDATE

the OP is commenting

Can you give another example, without percentages for the position and size of the rects and without wrapping it in another svg element

svg{border:solid}
<svg class="chart" width="300px" viewBox="-50 0 400 40">
  <text y="20" x="-45">TXT</text>
  <text x="345" y="20" text-anchor="end">TXT</text>
    
        <rect width="246" height="22" fill="lightskyblue"></rect>
        <rect width="300" height="22" style="fill:none; stroke-width:1; stroke:gray;"></rect>
        <text y="30" dx="0.25em" dy=".35em">0</text>
        <text x="60" y="10" dy=".35em" fill="red">|</text>
        <text x="60" y="30" dx="-0.25em" dy=".35em" fill="red">13</text>
        <text x="300" y="30" dx="-1.25em" dy=".35em">63</text>
  <svg>

user_78973950
Related