Текстовый элемент SVG, вырвавшийся из родительской ширины

Таким образом, я установил ширину моего элемента SVG на 100%, и ширина последнего текстового элемента, который у меня там, превышает ширину элемента SVG, который является его родителем.

Я пытался использовать перенос текста и установить максимальную ширину текстового элемента безрезультатно.

В основном, я хочу, чтобы текстовый элемент не вырвался из родительского элемента SVG, как это делается в настоящее время, и чтобы слова обернулись, когда они достигнут края ширины родительского элемента.

Кроме того, я не хочу просто переместить текстовый элемент влево, у меня он там, где он находится.

<svg height="1000" width="100%">
        <circle cx="50%" cy="50" r=40 stroke="black" stroke-width="2" fill="white"/>
        <text x="49.8%" y="50" font-family="sans-serif" font-size="20px" text-anchor="middle" fill="black" dy=".38em">1939</text>
        <line x1="50%" y1="90" x2="50%" y2="950" style="stroke:black;stroke-width:2"/>
        <text id="first-life-block" x="50%" y="150" font-family="sans-serif" font-size="20px" fill="black" style="word-wrap: normal;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</text>
</svg> 

Вот скриншот проблемы в режиме отладчика

Введите описание изображения здесь

Вот ссылка на страницу my Codepen dubugger: http://s.codepen.io/edsonmendieta/debug/jqjRry

Помощь очень ценится 🙂

1 ответ

  1. SVG 1.1 не поддерживает перенос текста.

    Вы должны были бы вручную разделить его с JavaScript на отдельные элементы или поместить текст в a <foreignObject>и позволить ему обернуть как текст HTML.

    Роберт Лонгсон


    Кроме того, проверьте этот ответ на «автоматическое обтекание строки в тексте SVG» и этот jsfiddle с (длинным) обходным путем JavaScript.