Question 355479 in Html Question posted in
Some basic documentation can be found here.

Html – insert text into the border in svg

I have a svg that has a border painted on the perimeter. Can you please tell me how to set a text for this border?

I need to have text on each part of the border – on the sides, top and bottom of the border. And the text should be in the center of each part of the border.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="none" width="100%" height="100%" viewBox="0 0 694 426">
    <g>
        <path d="M659.89 4.56006L34.89 4.66006V4.56006H5.48999V421.66H689.29V4.56006H659.89ZM34.89 399.56V26.7601H659.89V399.46L34.89 399.56Z" fill="#34428B"></path>
        <path d="M343.09 20.06L343.99 20.86L347.49 17.36L350.99 20.86L351.89 20.06L348.39 16.56L351.89 13.06L350.99 12.16L347.49 15.66L343.99 12.16L343.09 13.06L346.59 16.56L343.09 20.06Z" fill="#000010"></path>
        <path d="M34.79 4.56006V49.1601" stroke="#272425" stroke-width="1.24" stroke-miterlimit="9.62"></path>
        <path d="M242.69 4.56006V49.1601" stroke="#272425" stroke-width="1.24" stroke-miterlimit="9.62"></path>
        <path d="M451.89 4.56006V49.1601" stroke="#272425" stroke-width="1.24" stroke-miterlimit="9.62"></path>
        <path d="M659.79 4.56006V49.1601" stroke="#272425" stroke-width="1.24" stroke-miterlimit="9.62"></path>
        <path d="M659.79 26.86H34.79V399.36H659.79V26.86Z" stroke="#000008" stroke-width="1.24" stroke-miterlimit="9.62"></path>
    </g>
</svg>
Tags:

2

Answers


  1. 0

    One option is to draw guidelines over your rectangle and align text on each line.

    Or draw your rectangle with individual paths.

    You do have to learn SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

    You can do it with 1 path, set the pathLength attribute to 100 (100 percent)
    Then set each startoffset manually.
    But you then need to add rotation for the left or right text

    <svg width="50%" viewBox="0 0 200 80" style="background:beige">
  <style>
    path { stroke: red }
    textPath { fill:blue; dominant-baseline:middle; text-anchor:middle }
  </style>
  <path id="P1" d="M10 10h180"/>
  <path id="P2" d="M190 10v70"/>
  <path id="P3" d="M10 80v-70"/>
  <text font-size="8px">
    <textPath href="#P1" startoffset="50%">TOP</textPath>
    <textPath href="#P2" startoffset="50%">LEFT</textPath>
    <textPath href="#P3" startoffset="50%">RIGHT</textPath>
  </text>
</svg>
    Login or Signup to reply.
  2. 0

    The easiest way is to use <text> nodes with some x/y to position them on the border.

    To rotate the text on the left/right side, use a rotate(90) with the additional position of the text.

    #text-group > text {
    fill: white;
    text-anchor: middle;
    font-size: 20px;
}
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="100%" height="100%" viewBox="0 0 694 426">
    <g>
        <path d="M659.89 4.56006L34.89 4.66006V4.56006H5.48999V421.66H689.29V4.56006H659.89ZM34.89 399.56V26.7601H659.89V399.46L34.89 399.56Z" fill="#34428B"></path>
    </g>
    
    <g id='text-group'>
        <text x="50%" y="21">TOP</text>
        <text x="50%" y="98%">BOTTOM</text>

        <text x="22"  y="50%" transform="rotate(-90 26, 213)">LEFT</text>
        <text x="95%" y="50%" transform="rotate(90 667, 213)">RIGHT</text>
    </g>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search