Добавление элементов SVG в холст HTML5

0

Я пытаюсь добавить <svg> в холст HTML5 с помощью jQuery. То, что я сейчас сделал, когда я нажимаю в области холста, я извлекаю координаты x и y и добавляю элемент SVG.

var svg = "<svg><circle cx='"+x+"' cy='"+y+"' r='"+r+"' fill='red'/></svg>";
$("#canvas").append(svg);

SVG, кажется, добавляется в DOM, когда я проверяю источник (используя F12 в Mozilla Firefox) в правильной позиции (x, y), квадрат выделяется в окне браузера, когда я наводил указатель мыши на добавленный <svg> в источнике. Но <svg> не отображается. Код выглядит примерно так после 3 щелчков на холсте HTML5.

<canvas id="canvas">
    <svg><circle cx="557.8500061035156" cy="222" r="20" fill="red"></circle></svg>
    <svg><circle cx="729.8500061035156" cy="251" r="20" fill="red"></circle></svg>
    <svg><circle cx="517.8500061035156" cy="109" r="20" fill="red"></circle></svg>
</canvas>

Может ли кто-нибудь помочь мне с проблемой? Я использую <svg> потому что позже я хочу, чтобы можно было щелкнуть и перетащить круги, а не рисовать стандартные arcs в холст контекста 2d с помощью javascript.

  • 0
    Любая разметка в пределах <canvas> рассматривается как запасной вариант, когда браузер не поддерживает Canvas API. От MDN: резервный текст предоставляется, если браузер не может отобразить холст или не может прочитать холст. developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas
Теги:
svg
canvas
html5-canvas

4 ответа

0 
    <div id="forsvgtopng">
            <div id="svgelemntdiv">
               <svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1">
                 <rect width="150" height="150" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)"/>
               </svg>
            </div>
           <div class="canvasdiv">
                <canvas ></canvas>
           </div>
        <div class="pngdiv">
             <img id="svgpng" />
        </div>
    </div>

вызовите функцию javascript, такую как converttsvg ('# forsvgtopng')

  function convertsvg(selectors) {
          [].forEach.call(document.querySelectorAll(selectors), function (div) {
            try {

                var sourceImage;
                var imgs = document.getElementById('svgpng'),
                  svg = div.querySelector('svg'),
                  can = div.querySelector('canvas'),
                  ctx = can.getContext('2d');
                  can.width =500;
                  can.height = 550;

                 sourceImage = new Image;
                sourceImage.width = can.width;
                sourceImage.height = can.height;
                sourceImage.onload = function () {
                    ctx.drawImage(sourceImage,80,90);

                    imgs.src = can.toDataURL();
                };

                sourceImage.src = svg ? svgDataURL(svg) :"";
            } catch (e) { console.log(e) }
        });
    }

}

  function svgDataURL(svg) {

        var svgAsXML = (new XMLSerializer).serializeToString(svg);
        return "data:image/svg+xml," + encodeURIComponent(svgAsXML);
    }
Поделиться
0

Есть ли необходимость в смешивании холста и svg?

<canvas id="canvas">
    <svg><circle cx="557.8500061035156" cy="222" r="20" fill="red"></circle></svg>
    <svg><circle cx="729.8500061035156" cy="251" r="20" fill="red"></circle></svg>
    <svg><circle cx="517.8500061035156" cy="109" r="20" fill="red"></circle></svg>
</canvas>

Я предлагаю создать оболочку для SVG. Как это:

<div id="parent">
    <svg id="content">
        <circle cx="557.8500061035156" cy="222" r="20" fill="red"></circle>
        <circle cx="729.8500061035156" cy="251" r="20" fill="red"></circle>
        <circle cx="517.8500061035156" cy="109" r="20" fill="red"></circle>
    </svg>    
</div>

то при добавлении другого элемента svg выполните следующее:

$("#parent").html($("#parent").html());

См. Этот вопрос для подробностей об этой проблеме, не отображая svg: link

Поделиться
0

Я не знал, что вы можете использовать элементы svg внутри холста. Обычно вы либо решили использовать холст, либо использовать svg. Это две разные технологии. Вы абсолютно уверены, что то, что вы пытаетесь, возможно?

Поделиться
  • 0
    Хорошо, сейчас я использую Raphaeljs для этого, но, возможно, вы правы, что это две разные технологии
-1

Чтобы получить полный потенциал SVG, я предлагаю этот плагин. Его партия проще и удобна для разработчиков http://raphaeljs.com/

Поделиться
  • 0
    У меня проблемы с EventListeners. Есть ли другой способ предложить?
  • 0
    Ссылка кажется мертвой.
Показать ещё 1 комментарий

Ещё вопросы

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