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

Ответ 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 с абсолютным позиционированием.
• Повторно отсортируйте элементы SVG, созданные по иерархии z-индексов.

Ответ 2

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

Ответ 3

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