Chciałbym wyświetlić <text>
w SVG, co spowoduje automatyczne zawijanie linii do kontenera w <rect>
taki sam sposób, jak tekst HTML wypełnia <div>
elementy. Czy jest na to sposób? Nie chcę umieszczać linii sporadycznie za pomocą <tspan>
s.
108
Oto alternatywa:
Zwracając uwagę, że nawet jeśli ForeignObject może zostać zgłoszone jako obsługiwane przez ten ciąg cech, nie ma gwarancji, że HTML może zostać wyświetlony, ponieważ nie jest to wymagane przez specyfikację SVG 1.1. W tej chwili nie ma łańcucha funkcji do obsługi html-in-Foreignobject. Jednak jest nadal obsługiwany w wielu przeglądarkach, więc prawdopodobnie stanie się wymagany w przyszłości, być może z odpowiednim ciągiem funkcji.
Zwróć uwagę, że element „textArea” w SVG Tiny 1.2 obsługuje wszystkie standardowe funkcje SVG, np. Zaawansowane wypełnianie itp., I że możesz określić szerokość lub wysokość jako auto, co oznacza, że tekst może swobodnie przepływać w tym kierunku. ForeignObject działa jako rzutnia przycinająca.
Uwaga: chociaż powyższy przykład jest prawidłową zawartością SVG 1.1, w SVG 2 atrybut „requiredFeatures” został usunięty, co oznacza, że element „switch” będzie próbował wyrenderować pierwszy element „g” niezależnie od obsługi SVG 1.2 ”textArea ' elementy. Patrz specyfikacja elementu przełączającego SVG2 .
źródło
xhtml:div
zamiastdiv
, ale może to być spowodowane d3.js. Nie mogłem znaleźć żadnej użytecznej informacji o TextFlow, czy istnieje (nadal) czy tylko w jakiejś wersji roboczej?W niektórych przypadkach właściwość textPath może być dobra.
źródło
Opierając się na kodzie @Mike Gledhill, poszedłem o krok dalej i dodałem więcej parametrów. Jeśli masz SVG RECT i chcesz zawinąć w nim tekst, może to być przydatne:
źródło
boxwidth = parseInt(boxObject.getAttribute('width'))
zaakceptowałbym po prostu szerokość w pikselach, podczas gdyboxwidth = parseInt(boxObject.getBBox().width)
zaakceptowałbym dowolny typ jednostki miaryTę funkcjonalność można również dodać za pomocą JavaScript. Carto.net ma przykład:
http://old.carto.net/papers/svg/textFlow/
Coś jeszcze, co może być przydatne, to edytowalne obszary tekstowe:
http://old.carto.net/papers/svg/gui/textbox/
źródło
Poniższy kod działa poprawnie. Uruchom fragment kodu, co robi.
Może da się go wyczyścić lub sprawić, by działał automatycznie ze wszystkimi tagami tekstowymi w SVG.
źródło
Opublikowałem następującą instrukcję dodawania fałszywego zawijania słów do elementu „tekst” SVG:
Zawijanie słów SVG - Pokaż korek?
Wystarczy dodać prostą funkcję JavaScript, która podzieli Twój ciąg na krótsze elementy „tspan”. Oto przykład tego, jak to wygląda:
Mam nadzieję że to pomoże !
źródło