Преобразование html в svg с помощью javascript / jquery

Есть ли способ конвертировать html-fragment в svg?

например: This is bolded

Я хочу сделать документ svg с помощью html-fragmentа выше … это возможно?

Я бы посоветовал вам отредактировать ваш вопрос, чтобы описать фактический прецедент и цель, которую вы пытаетесь достичь, поскольку прямое выполнение того, что вы, похоже, попросите, сложно (см. Ниже). Некоторая комбинация SVG-in-XHTML или XHTML-in-SVG (например, это ) гораздо более вероятно даст вам желание, которое вы хотите.

Мы можем только помочь вам достичь ваших целей, если вы сообщите нам свои цели, а не попросите нас помочь вам решить конкретную реализацию, которую вы планировали достичь.


Как я уже упоминал выше, нет простого способа сделать то, что вы предлагаете. В частности, в HTML есть автоматическая обертка строк, плавающие и общие концепции позиционирования, а также явное z-индексирование, которых нет в SVG.

Однако следующее безумие будет работать:

  • Создайте iframe или div на своей странице и установите HTML в свой fragment.
  • Перебирайте каждый элемент и конвертируйте его в margin:0;padding:0;border:0 span вокруг каждого слова в тексте.
  • Прокрутите каждый элемент (включая созданные вами промежутки) и вычислите абсолютную позицию на странице. (jQuery имеет способ сделать это, или вы можете использовать комбинацию offsetLeft / offsetTop и offsetParent чтобы подойти к расположенному дереву и вычислить его самостоятельно.)
    • Вычислите эквивалентный z-индекс для каждого элемента, поднявшись по дереву и используя getComputedStyle() и создав цепочку локального z-индекса.
    • Для каждого из этих элементов создайте эквивалентный элемент в SVG с абсолютным позиционированием.
  • Повторно отсортируйте элементы SVG, созданные по иерархии z-индексов.

Проверьте этот html на демонстрацию SVG (используя HiQPDF, коммерческий продукт). Вы можете найти образцы кода для C # и VB.NET. Вы можете конвертировать URL-адрес или fragment кода HTML по вашему запросу.

Есть JS libs, которые конвертируют html в canvas: http://html2canvas.hertzen.com/ Но до сих пор я не нашел ничего похожего на svg.