Text marker - nie pokazuje tekstu

pytanie zadane 26 marca 2022 w HTML i CSS przez Jcob2222 Początkujący (480 p.)

Co robię źle, że tekst nie pokazuje się w elipsie?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 100">
  <defs>
    <marker id="StartText" markerWidth="100" markerHeight="70" 
    refX="10" refY="3.5">
      <text x="0" y="7" fill="#aaa" font-size="4">hello</text>
    </marker>
  </defs>
  <ellipse cx="100" cy="50" rx="90" ry="50" fill="rgb(255 115 0)" cursor="grab" marker-start="url(#StartText)" id="ellipseStart0" class="ellipseStart free"></ellipse>
</svg>

komentarz 27 marca 2022 przez VBService Ekspert (253,400 p.)

A możesz bez <marker>?

<svg viewBox="0 0 350 100">
  <defs>
    <path id="myTextPath" d="M0,50 a3,1 0 0,0 200,0" />
  </defs>

  <ellipse cx="100" cy="50" rx="90" ry="50" fill="rgb(255 115 0)" 
           cursor="grab" id="ellipseStart0" class="ellipseStart free"></ellipse>
  <text x="45" y="0" style="stroke: #000000; font-size: 12px;">
    <textPath xlink:href="#myTextPath" >
      Zakrzywiony tekst, ........
    </textPath>
  </text> 
</svg>

komentarz 27 marca 2022 przez Jcob2222 Początkujący (480 p.)

Bardziej chodzi mi o to, żeby ten tekst był jakby zespolony z elipsą. Chodzi o to żeby podczas poruszania elipsą tekst podążał razem z nią bez ingerencji JavaScriptem.

komentarz 27 marca 2022 przez VBService Ekspert (253,400 p.)

To może użyj <g>

... g element is used to group SVG shapes together, ...

<svg viewBox="0 0 350 100">
  <g id="ellipse-text-1">
    <defs>
      <path id="myTextPath" d="M0,50 a3,1 0 0,0 200,0" />
    </defs>

    <ellipse cx="100" cy="50" rx="90" ry="50" fill="rgb(255 115 0)"
             cursor="grab" id="ellipseStart0" class="ellipseStart free"></ellipse>
    <text x="45" y="0" style="stroke: #000000; font-size: 12px;">
      <textPath xlink:href="#myTextPath" >
        Zakrzywiony tekst, ........
      </textPath>
    </text>
  </g>
</svg>

komentarz 27 marca 2022 przez Jcob2222 Początkujący (480 p.)

Próbowałem już, elipsę przemieszczam zmieniając jej współrzędne więc grupa tu nie zadziała...

komentarz 27 marca 2022 przez VBService Ekspert (253,400 p.)

Przemieszcza całą grupę

<svg viewBox="0 0 600 400">
    <g id="ellipse-text-1">
    <defs>
      <path id="myTextPath" d="M0,50 a3,1 0 0,0 200,0" />
    </defs>
 
    <ellipse cx="100" cy="50" rx="90" ry="50" fill="rgb(255 115 0)"
             cursor="grab" id="ellipseStart0" class="ellipseStart free"></ellipse>
    <text x="45" y="0" style="stroke: #000000; font-size: 12px;">
      <textPath xlink:href="#myTextPath" >
        Zakrzywiony tekst 1, ........
      </textPath>
    </text>
  </g>
  <g id="ellipse-text-2">
    <defs>
      <path id="myTextPath" d="M0,50 a3,1 0 0,0 200,0" />
    </defs>
 
    <ellipse cx="100" cy="50" rx="90" ry="50" fill="rgb(255 115 0)"
             cursor="grab" id="ellipseStart0" class="ellipseStart free"></ellipse>
    <text x="45" y="0" style="stroke: #000000; font-size: 12px;">
      <textPath xlink:href="#myTextPath" >
        Zakrzywiony tekst 2, ........
      </textPath>
    </text>
  </g>
</svg>

function moveGroup(id, xOffset, yOffset) {
  const domElemnt = document.getElementById(id);
  if (domElemnt) {
    const transformAttr = ' translate(' + xOffset + ',' + yOffset + ')';
    domElemnt.setAttribute('transform', transformAttr);
  }
}

setTimeout(_=> { moveGroup("ellipse-text-2", 250, 220); }, 2000);