How to add text inside an SVG path - svg

Question

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.

Answer 1

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>