Question

我无法将svg图像添加到画布，画布是对象的一部分。如果我在window.onload函数中将此svg图像添加到画布 - 它可以工作，但如果我在内部执行此操作 handObj.prototype.svgToBlob，不显示图片。如果我将svg复制并粘贴到html，它会显示键盘图像。 smth是否与范围发生？我怎么解决这个问题？我的意思是如何在函数上显示svg，这是函数原型的一部分？

// Svg非常大，这是一个缩短版本。

 <!DOCTYPE html>
 <svg xmlns="http://www.w3.org/2000/svg" width="1300" height="600">
 <rect x="0" y="10" width="16" height="64" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
 <text x="16" y="31" font-family="Calibri" font-size="12" fill="white" id="r1b1" data-json="r1b1" data-modif="lowercase"  >&#110;</text>
 </svg>

//记录结果

handObj.js:265 249 in timeout url=blob:http://localhost/bce88b61-edbe-4889-b131-6b2f36912560
handObj.js:266 250 img=[object HTMLImageElement]
handObj.js:267 <img src="blob:http://localhost/bce88b61-edbe-4889-b131-6b2f36912560">

The function which is part of object, and should disply svg on canvas. 

handObj.prototype.svgToBlob = function () {

    var DOMURL = window.URL || window.webkitURL || window;

    this.genSvg();

    var kbsv = this.svgStr; //generates valid svg, i can display it , but not on canvas
    $("#tmp").html(kbsv); // displys svg

    // keyboard image 
    var img1 = new Image();
    var svg1 = new Blob( [kbsv], {type: 'image/svg+xml'} );
    console.log('246 this.svgStr='+this.svgStr);
    var url1 = DOMURL.createObjectURL(svg1);
    console.log('247 url1='+url1); 

    var canvas = document.getElementById('canvas1');
    var ctx = canvas.getContext('2d');

    img1.onload = function() {
        console.log('217 this.ctx='+ctx); 
        console.log('249 in timeout url='+url1); 
        console.log('250 img='+img1); 
        console.log(img1);
        ctx.drawImage(img1, 0, 0);
        DOMURL.revokeObjectURL(url1); 
    } // img1.onload = function() {
    img1.src = url1;

}  // handObj.prototype.svgToBlob = function () {

我还尝试根据以下内容添加namespacesa：

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

https://www.w3.org/TR/SVG2/struct.html

在这种情况下，svg不会全部显示，不仅来自对象，还来自html页面。

<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:svg="http://www.w3.org/2000/svg">

    <head>
        <title>TODO supply a title</title>
        <meta http-equiv="Content-Type" content="text/html;  charset="UTF-8">
    </head>
    <body> 
        <svg:svg id='display' width='400' height='300'>
            <svg:circle id='cursor' cx='200' 
cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/>
        </svg:svg> <br>

如何将svg添加到canvas，它是对象的一部分

0 个答案: