How to add text inside an SVG path-CodePudding

I have an svg image, I want to add text inside the path element however it doesn't seem to inside the image, just around it.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <g id="Templates">
        <path id="cloud"
              d="M17,10.57a3,3,0,0,1,1.18.23,3.11,3.11,0,0,1,1,.64,2.82,2.82,0,0,1,.65,1,3,3,0,0,1-1.6,3.95,3.08,3.08,0,0,1-1.16.23H8a4,4,0,0,1-1.56-.31,4,4,0,0,1,0-7.38A4,4,0,0,1,8,8.57a3.54,3.54,0,0,1,.73.07,4.63,4.63,0,0,1,.72-.87,4.72,4.72,0,0,1,.89-.65,4.58,4.58,0,0,1,1-.41,4.79,4.79,0,0,1,1.13-.14,4.37,4.37,0,0,1,1.64.3,4.55,4.55,0,0,1,1.36.84,4.39,4.39,0,0,1,1,1.27A4.66,4.66,0,0,1,17,10.57Z"
              style="fill:#1d2639" />
    </g>
    <text font-size="2">
        <textPath href="#cloud" text-anchor="middle">
            CLOUDD
        </textPath>
    </text>
</svg>

How to place the text in the center of the cloud.

CodePudding user response：

The side="left|right" attribute can be used for placing the text on a specific side. This can be used in combination with dominant-baseline="auto|hanging" to make the text stick to the bottom or top of the text.

In this example I also added the pathLength attribute to the <path> to control the position along the path together with startOffset on the <textPath>. And a stroke to the <path> so that the text is not directly on the edge of the cloud.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <g id="Templates">
    <path id="cloud" d="M17,10.57a3,3,0,0,1,1.18.23,3.11,3.11,0,0,1,1,.64,2.82,2.82,0,0,1,.65,1,3,3,0,0,1-1.6,3.95,3.08,3.08,0,0,1-1.16.23H8a4,4,0,0,1-1.56-.31,4,4,0,0,1,0-7.38A4,4,0,0,1,8,8.57a3.54,3.54,0,0,1,.73.07,4.63,4.63,0,0,1,.72-.87,4.72,4.72,0,0,1,.89-.65,4.58,4.58,0,0,1,1-.41,4.79,4.79,0,0,1,1.13-.14,4.37,4.37,0,0,1,1.64.3,4.55,4.55,0,0,1,1.36.84,4.39,4.39,0,0,1,1,1.27A4.66,4.66,0,0,1,17,10.57Z"
      style="fill:#1d2639" stroke="#1d2639"
      stroke-width="1" pathLength="100"/>
  </g>
  <text font-size="2">
    <textPath href="#cloud" fill="white" text-anchor="start"
      dominant-baseline="auto" side="right" startOffset="55">
        CLOUDD
    </textPath>
  </text>
</svg>

Update

Here is a version where the text is just placed in the middle of the SVG.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <g id="Templates">
    <path id="cloud" d="M17,10.57a3,3,0,0,1,1.18.23,3.11,3.11,0,0,1,1,.64,2.82,2.82,0,0,1,.65,1,3,3,0,0,1-1.6,3.95,3.08,3.08,0,0,1-1.16.23H8a4,4,0,0,1-1.56-.31,4,4,0,0,1,0-7.38A4,4,0,0,1,8,8.57a3.54,3.54,0,0,1,.73.07,4.63,4.63,0,0,1,.72-.87,4.72,4.72,0,0,1,.89-.65,4.58,4.58,0,0,1,1-.41,4.79,4.79,0,0,1,1.13-.14,4.37,4.37,0,0,1,1.64.3,4.55,4.55,0,0,1,1.36.84,4.39,4.39,0,0,1,1,1.27A4.66,4.66,0,0,1,17,10.57Z"
      style="fill:#1d2639" />
  </g>
  <text font-size="2" x="12" y="12" text-anchor="middle"
  dominant-baseline="middle" fill="white">CLOUDD</text>
</svg>