svgpathdirection

svg change path direction in my path for text inside in semicircle

I want to change the direction of my path, so that the text looks inside the semi-circle (see image).

How do I do it? I want this code to be kept simple, so that I can change the height and simulate a parabola (to move it with a slider in html later).

I tried with illustrator, it works but, it adds a lot of extra code, that later I cannot modify the height(for simulate parabola). That's why I want the simple code to change the address of the path in my simple path.

Simple code path:

d=" M 300 10 A 100 100 0 0 1 100 10"

My code SVG:

    <?xml version="1.0" encoding="utf-8"?>
    <svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
         
        
    <path id="demo" fill="transparent" d=" M 300 10 A 100 100 0 0 1 100 10" stroke="Black" stroke-width="2" />
        
        <text id="" _lengthAdjust="spacingAndGlyphs" _textLength="399" font-size="24">
            <textPath id="result" _dominant-baseline="middle" text-anchor="middle" _method="align" _spacing="auto" startOffset="50%" xlink:href="#demo">
                Bienvenido 2024
            </textPath>
        </text>
            
    </svg>

I expect (image):

Solution

  • Like the comments say, easiest is to change the <path> start point

    Do note the issues in your code:

    svg{ 
  width: 50vw;
  background:pink;
}
    <svg viewBox="0 0 400 125">
  <path id="P1" fill="transparent" d="M100 10a100 100 0 00200 0" stroke="black"/>
    <text font-size="40">
      <textPath text-anchor="middle" startOffset="50%" href="#P1">
        Bienvenido 2024
      </textPath>
    </text>
</svg>