Я бы посоветовал вам отредактировать ваш вопрос, чтобы описать фактический вариант использования и цель, которую вы пытаетесь достичь, так как непосредственно реализовать то, о чем вы, кажется, просите, сложно (см. Ниже). Некоторые комбинации SVG-in-XHTML или XHTML-in-SVG (например, this ) с гораздо большей вероятностью дадут вам то, что вы хотите.
Мы можем помочь вам в достижении ваших целей, только если вы сообщите нам свои цели, а не попросите нас помочь вам решить конкретную реализацию, о которой вы думали, для их достижения.
Как я упоминал выше, не существует простого способа сделать то, что вы предлагаете. В частности, HTML имеет автоматические переносы строк, плавающие и общие концепции позиционирования, а также явное z-индексирование, которых нет в SVG.
Следующее безумие в основном сработает, однако:
- Создайте на своей странице iframe или div и установите HTML-код для своего фрагмента.
- Переберите каждый элемент и преобразуйте оболочку
margin:0;padding:0;border:0 вокруг каждого слова в тексте.
- Переберите каждый элемент (включая созданные вами пролеты) и рассчитайте абсолютную позицию на странице. (У jQuery есть метод для этого, или вы можете использовать комбинацию
offsetLeft / offsetTop и offsetParent, чтобы пройти вверх по позиционированному дереву и вычислить его самостоятельно.)
- Рассчитайте эквивалентный z-индекс для каждого элемента, пройдя по дереву, используя
getComputedStyle() и создав цепочку локального z-индекса.
- Для каждого из этих элементов создайте эквивалентный элемент в SVG с абсолютным позиционированием.
- Пересортируйте элементы SVG, созданные вами по иерархии z-индексов.