Question

我正在尝试使用<svg>将jQuery添加到HTML5 Canvas中。我目前所做的是，当我在画布区域中单击时，我检索x和y坐标并附加一个SVG元素。

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

当我在正确的位置（x，y）检查源（在Mozilla Firefox中使用F12）时，SVG似乎被添加到DOM中，当我将鼠标悬停在浏览器窗口上时，在浏览器窗口中突出显示一个正方形在源中添加了<svg>元素。但<svg>不可见。在对HTML5 Canvas进行3次点击后，代码看起来像这样。

<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>，因为稍后我希望能够点击并拖动圆圈，而不是使用javascript将标准arcs绘制到2d上下文画布中。

Answer 1

我不知道你可以在画布中使用svg元素。通常你选择使用canvas或使用svg。这些是两种不同的技术。你绝对相信你所尝试的是可能的吗？

Answer 2

真的需要混合canvas和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

的问题的详细信息，请参阅此问题

Answer 3

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

调用像convertvg这样的javascript函数（＆＃39;＃forsvgtopng＆＃39;）

  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);
    }

Answer 4

为了充分发挥SVG的潜力，我建议使用此插件。它更容易和开发人员友好http://raphaeljs.com/

将SVG元素添加到HTML5 Canvas

4 个答案: