• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Text marker - nie pokazuje tekstu

VPS Starter Arubacloud
+2 głosów
114 wizyt
pytanie zadane 26 marca 2022 w HTML i CSS przez Jcob2222 Użytkownik (500 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 (254,880 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 Użytkownik (500 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 (254,880 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 Użytkownik (500 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 (254,880 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);

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 256 wizyt
pytanie zadane 24 kwietnia 2021 w HTML i CSS przez Darek Kurc Nowicjusz (190 p.)
+1 głos
0 odpowiedzi 289 wizyt
+1 głos
3 odpowiedzi 370 wizyt
pytanie zadane 22 marca 2021 w HTML i CSS przez Fishu Nowicjusz (150 p.)

92,770 zapytań

141,695 odpowiedzi

320,518 komentarzy

62,107 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...