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