Text marker - nie pokazuje tekstu

Question

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>

 

Comments

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>

 

---

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.

---

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>

 

---

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

---

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