将文本插入到svg的边框中

Question

我有一个 svg，其周边画有边框。你能告诉我如何为此边框设置文本吗？

我需要在边框的每个部分都有文本 - 在边框的

sides

、

top

和

bottom

上。并且文本应位于边框各部分的

center

中。

请帮忙！

<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>

Answer 1

一种选择是在矩形上绘制引导线并对齐每行上的文本。

或者用单独路径绘制矩形。

你必须学习 SVG：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

您可以使用 1 条路径来完成此操作，将

pathLength

属性设置为 100（100%）
然后手动设置每个

startoffset

。
但是您需要为左侧或右侧文本添加旋转

<svg width="50%" viewBox="0 0 200 80">
  <style>
    path { stroke: red }
    textPath { fill:blue}
  </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%" 
              text-anchor="middle" dominant-baseline="middle">TOP</textPath>
    <textPath href="#P2" startoffset="50%" 
              text-anchor="middle" dominant-baseline="middle">LEFT</textPath>
    <textPath href="#P3" startoffset="50%" 
              text-anchor="middle" dominant-baseline="middle">RIGHT</textPath>
  </text>
</svg>