0

I am trying to add <svg> into an HTML5 Canvas using jQuery. What I have currently done is, when I click in the canvas area, I retrieve the x and y coordinates and append an SVG element.

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

The SVG seems to be added in the DOM when I check the source (using F12 in Mozilla Firefox) in the correct position (x,y), a square is highlighted in the browser window, when I hover my mouse over the added <svg> element in the source. But the <svg> is not visible. The code looks something like this after doing 3 clicks on the HTML5 Canvas.

<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>

Can somebody help me with the problem? I am using <svg> because later I want to be able to click and drag the circles rather than drawing the standard arcs into the 2d context canvas using javascript.

psiyumm
  • 6,437
  • 3
  • 29
  • 50
  • 1
    Any markup within `` is treated as a fallback for when the browser doesn't support the Canvas API. From MDN: A fallback text is provided if a browser is unable to render the canvas, or if can't read a canvas. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas – 6twenty Apr 24 '17 at 01:08

4 Answers4

0

I was not aware you could use svg elements inside a canvas. Normally you either chose to use canvas or you use svg. These are 2 different technologies. Are you absolutely sure that what you are trying is possible?

Gregory
  • 1,148
  • 1
  • 9
  • 24
  • well now I am currently I am using raphaeljs to do that, but most perhaps you are right that these are two different technologies – psiyumm Mar 10 '14 at 17:09
0

Is there realy need for mixing canvas and 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>

I suggest that you create wrapper for SVG. Like this :

<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>

then, when adding another svg element do this :

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

See this question for detail about that problem with not showing svg : link

Community
  • 1
  • 1
Nikola Loncar
  • 2,611
  • 1
  • 26
  • 38
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>

call the javascript function like convertsvg('#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);
    }
Jithi Vasudev
  • 13
  • 4
-1

To get the full potential of SVG I suggest this plugin. Its lot easier and developer friendly http://raphaeljs.com/

arivu86
  • 81
  • 2
  • 2
  • 12