Преобразование SVG с элементом изображения в HTML-холст

0

Я просто пытаюсь преобразовать svg в html canvas, он отлично работает, пока я не использую элемент изображения в svg, если я использую элементы изображения, значит, canvg не работает.

Это код, который я использовал для преобразования svg в холст

var svgCanvas, context, svgCanvasElement, link;
svgCanvas = $('<canvas id="svgCanvas" width="250px" height="25px" style="display:none;"></canvas>');
context = svgCanvas[0].getContext('2d');
svgCanvasElement = $(svgCanvas)[0];
var serializer = new XMLSerializer();
var svgElement = document.getElementsByTagName("svg");
var svg = serializer.serializeToString(svgElement[0]);
var canvgMethod = new canvg(svgCanvasElement, svg);

Здесь не работает JSFiddle DEMO.

ПРИМЕЧАНИЕ. Этот код работает отлично для других элементов, таких как круг, прямоугольник, многоугольник и т.д. Здесь работает JSFiddle Demo с элементом окружности.

Как преодолеть эту проблему и как я могу преобразовать этот элемент изображения в холст?
Любые предложения будут оценены.

Теги:
svg

2 ответа

1

Вам нужно будет преобразовать изображение в URL-адрес данных. То, что вы передаете в canvg, должно быть завершено в одном файле, он не может иметь внешних ссылок.

Я могу показать вам шаги, чтобы увидеть работу с изображениями. Начните с этого...

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="paste your data URL in here" height="75" width="75" y="27.5" x="29.5"></image>
</svg>
  1. goto http://dopiaza.org/tools/datauri/index.php
  2. Выберите выбор из URL-адреса
  3. Введите URL-адрес http://archiveteam.org/images/thumb/4/40/Google_Logo.png/800px-Google_Logo.png в качестве URL-адреса
  4. Замените выход в указанном выше месте (он слишком большой, чтобы включить сюда)
  5. Вставьте весь участок выше в тестовую коробку здесь
  6. Вы закончили, посмотрите результат слева. Примечание. Я тестировал это только в Firefox.
Поделиться
  • 0
    Спасибо за ваш ответ. Можете ли вы отредактировать мой пример скрипта и заставить его работать, или же вы можете опубликовать некоторый код здесь.
  • 0
    jsfiddle.net/Vky7b/5 это моя обновленная скрипка с вашими инструкциями, но она не работает для меня. Есть ли что-то неправильное, что я сделал, или я что-то пропустил здесь.
Показать ещё 1 комментарий
0

Попробуйте это: - http://jsfiddle.net/adiioo7/xvQHb/3/

Это было сделано с canvg плагина canvg Reference

//load a svg snippet in the canvas with id = 'drawingArea'
  canvg(document.getElementById('canvas'), '<svg>...</svg>')
Поделиться
  • 0
    @karthik Это отвечает на ваш запрос?
  • 0
    спасибо, но это не работает Можете ли вы заставить мою скрипку работать на ваш ответ.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню