Html to svg jquery

Преобразование HTML в SVG с помощью JavaScript / JQuery

Есть ли способ конвертировать html-фрагмент в svg? например: This is bolded Я хочу сделать документ svg с помощью html-фрагмента выше. это возможно?

А вот краткое руководство по использованию текстового элемента: tutorials.jenkov.com/svg/text-element.html

@RobG, но принимает ли он HTML-код и конвертирует его в svg? Я пытаюсь создать svg, предоставив innerHTML элемента div без каких-либо ручных изменений.

Чтобы использовать встроенный svg в тех браузерах, которые его поддерживают: developer.mozilla.org/en/svg_in_html_introduction

3 ответа

Я бы посоветовал вам отредактировать свой вопрос, чтобы описать фактический прецедент и цель, которую вы пытаетесь достичь, поскольку прямое выполнение того, что вы просите, сложно (см. ниже). Некоторая комбинация 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 foreignObject заключается в том, что он не поддерживается т. е. 9, а также вы не можете сериализовать SVG

  Кто-то реализовал это «безумие»? Мне нужно загрузить SVG в тег , и в этом случае foreignObject не работает .

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

  Отличное программное обеспечение. Как жаль, что у них нет разумно ценного продукта, а есть только библиотека, предназначенная для разработчиков.

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

  Мне посчастливилось объединить html2canvas с canvas2svg : вы можете передать элемент canvas в html2canvas помощью параметров; если вы оберните canvas2svg как фиктивный HTML-элемент canvas и передадите его в html2canvas , он «рисует» в SVG вместо canvas . Но canvas2svg еще не идеален, поэтому вы должны убедиться, что результаты достаточно хороши для ваших целей

  например что-то вроде: var fauxCanvas = < ctx: new C2S(), getContext: function()< return this.ctx; >, style: <>, ownerDocument: document >; html2canvas(domNode, ).then(.

  Ещё вопросы

  • 0 Следующим узлом двусвязного списка является приватный
  • 1 java.lang.NoClassDefFoundError: org / bouncycastle / asn1 / ASN1Encodable
  • 1 JAX-WS + Hibernate + JAXB: как избежать исключения LazyInitializationException во время сортировки
  • 1 System.ArgumentException: недопустимые символы в пути
  • 1 Построение запросов по шагам приводит к дублированию даже при использовании Distinct ()
  • 1 Linq to sql Отличное после присоединения
  • 0 Запуск imagecreatefrompng массива изображений, но массив только возвращает 1 изображение
  • 1 Использование значения символа для создания новых строк в Pandas
  • 0 Проблема с вложенным ng-repeat
  • 1 как удалить пользовательскую команду ввода после ответа
  • 0 PHP регулярное выражение заменить из строки в строку
  • 0 Преобразование многих битов в Base 10
  • 0 Как определить причину сбоя с помощью windbg (ntdll! KiFastSystemCallRet)?
  • 1 Получить текст XML-узла с заданным текстом соседнего узла с помощью xpath
  • 0 переключать отображение тега p в зависимости от значения внутри
  • 0 Удаление индекса и контроллера из URL Codeingiter
  • 0 Компиляция и использование OpenCV
  • 0 Случайное перемешивание с использованием вектора
  • 1 рассчитать процентную долю значения в столбце в Python
  • 1 Проект EAR Maven — JAR не исключается?
  • 0 Ошибки отображаются, когда я запускаю на своем локальном хосте
  • 1 Как мне вызвать информацию, введенную в диалоговое окно как часть слушателя действия?
  • 1 Проверка переменных Javascript: (null или undefined) против логического
  • 1 Самый быстрый способ найти кандидатов первичного ключа в файле CSV?
  • 0 Jquery — возвращение значения из массива
  • 1 Кодирование каждый раз производит разные хэши
  • 0 Jquery переключение анимации слева направо
  • 0 Многократное ожидание на одном замке
  • 0 Как работает этот блок блокировки?
  • 0 Доступ к формату пути, используемому для маршрутизации
  • 0 Ошибка проверки angularjs для поля ввода
  • 1 Как создать новый приемочный тест с родительским регрессионным тестом, используя VersionOne .Net SDK
  • 0 Автоматически генерировать строки с разными датами
  • 1 Как сделать так, чтобы текст JLabel изменялся автоматически?
  • 1 Нужен ли семафор, когда один процесс пишет, а другой читает?
  • 0 Привести итератор к другому типу
  • 0 Скрыть элемент при заполнении поля формы
  • 0 RewriteRule работает на http, но ломается на https
  • 0 AngularJS AWS S3 sdk putObject не будет отправлять несколько объектов
  • 1 Regexp с .exec не работает
  • 0 сделать фоновое изображение div
  • 0 Грунт служить VS открытие index.html в браузере
  • 1 Не могу неявно преобразовать целое число типа в bool
  • 0 Laravel PHP: создание объекта по умолчанию из пустого значения ошибки
  • 0 PHP сервер: сохранить (загрузить) изображение с Android с помощью Retrofit
  • 0 Почему я получаю сообщение об ошибке для последней строки кода?
  • 1 Как выделить таблицу строк, если дано условие?
  • 0 Список виртуальных файловых систем
  • 0 Как получить все данные из таблицы, которую вы также запрашиваете для AVG
  • 0 Синтаксическая ошибка C ++ — не удается определить проблему

  Источник

  Converting HTML to SVG using JavaScript/jQuery

  Scalable Vector Graphics (SVG) is a vector image format that is widely used on the web. It is more versatile than other image formats like PNG and JPEG because it allows for easy zooming and scaling without losing image quality. HTML, on the other hand, is a markup language used to create web pages. What if we could convert HTML to SVG? In this guide, we will explore how to convert HTML to SVG using JavaScript/jQuery.

  Prerequisites

  To follow along with this guide, you should have a basic understanding of HTML, CSS, JavaScript, and jQuery.

  Steps:

  1. Create an HTML file with the content you want to convert to SVG. For example, let’s say we have a div element with an id of ‘myDiv’ that we want to convert to SVG.

  Hello World 
  This is some text.
   

  1. Include jQuery in your HTML file. You can download it from the official jQuery website or use a CDN link.
  1. Add a script tag to your HTML file and write the JavaScript code to convert the HTML to SVG when the button is clicked.
  1. Save your HTML file and open it in a web browser. Click the ‘Convert to SVG’ button and you should see the converted SVG image displayed on the web page.

  Explanation of Code

  Let’s break down the JavaScript code that we added to our HTML file.

  • We use jQuery to select the button with an id of ‘convertBtn’.
  • We attach an event listener to the button that listens for a click event.
  • When the button is clicked, we create a new SVG element using the createElementNS() method. We also create a foreignObject element that will contain the HTML content we want to convert to SVG.
  • We set the width and height of the foreignObject element to match the dimensions of the div element with an id of ‘myDiv’.
  • We clone the div element and append it to the foreignObject element.
  • We append the foreignObject element to the SVG element.
  • We convert the SVG element to a string using the XMLSerializer() method.
  • We encode the SVG string in base64 format and append it to the ‘src’ attribute of a new img element.
  • We append the img element to the body of the HTML document.

  Conclusion

  In conclusion, converting HTML to SVG using JavaScript/jQuery is a simple process that can be accomplished with just a few lines of code. By converting HTML to SVG, we can create scalable vector graphics that retain their quality even when zoomed or scaled.

  Источник

  Converting html to svg using javascript/jquery

  I would suggest that you should edit your question to describe the actual use case and goal you are trying to achieve, as directly implementing what you seem to ask for is hard (see below). Some combination of SVG-in-XHTML or XHTML-in-SVG (for example, this) are far more likely to give you want you want.

  We can only help you achieve your goals if you tell us your goals instead of asking us help you to solve a particular implementation you thought of to achieve them.

  As I mentioned above, There is not an easy way to do what you suggest. In particular, HTML has automatic line wrapping, floating and general positioning concepts, as well as explicit z-indexing, that are not present in SVG.

  The following madness would mostly work, however:

  • Create an iframe or div on your page and set the HTML to your snippet.
  • Loop through every element and convert wrap a margin:0;padding:0;border:0 span around every word in the text.
  • Loop through every element (including your created spans) and calculate the absolute position on the page. (jQuery has a method to do this, or you could use the combination of offsetLeft / offsetTop and offsetParent to walk up the positioned tree and calculate it yourself.)
    • Calculate the equivalent z-index for each element by walking up the tree and using the getComputedStyle() and creating a chain of the local z-index.
    • For each of these elements, create the equivalent element in SVG with absolute positioning.

    Solution 2

    Check this html to SVG demo, (using HiQPDF, a commercial product). You can find there code samples for C# and VB.NET. You can convert an URL or a HTML code snippet as you requested.

    Источник

    Читайте также:  Вас отключен javascript делать