HTML5 कैनवास पर एक SVG फ़ाइल खींचना

Question

वहाँ एक HTML5 कैनवास पर एक SVG फ़ाइल ड्राइंग का एक डिफ़ॉल्ट तरीका है? Google Chrome एसवीजी को एक छवि के रूप में लोड करने का समर्थन करता है (और बस उपयोग करके drawImage), लेकिन डेवलपर कंसोल चेतावनी देता है कि resource interpreted as image but transferred with MIME type image/svg+xml।

मुझे पता है कि एसवीजी को कैनवस कमांड में बदलने की संभावना होगी (जैसे कि इस प्रश्न में ), लेकिन मुझे उम्मीद है कि इसकी आवश्यकता नहीं है। मुझे पुराने ब्राउज़रों की परवाह नहीं है (इसलिए अगर FireFox 4 और IE 9 कुछ का समर्थन करेंगे, तो यह काफी अच्छा है)।

Comments

यह सवाल एक लाइव डेमो के साथ जवाब है stackoverflow.com/questions/5495952/...

— ड्रयू लेसुइयूर

Answer 1

EDIT Dec 16, 2019

Path2D अब सभी प्रमुख ब्राउज़रों द्वारा समर्थित है

EDIT 5 नवंबर 2014

अब आप ctx.drawImageHTMLImageEelines को आकर्षित करने के लिए उपयोग कर सकते हैं, जिनके पास कुछ नहीं बल्कि सभी ब्राउज़रों में .svg स्रोत है । क्रोम, IE11 और सफ़ारी काम, फ़ायरफ़ॉक्स कुछ बग्स के साथ काम करता है (लेकिन रात को उन्हें ठीक कर दिया है)।

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

इसका जीता जागता उदाहरण है । आपको कैनवास में एक हरे रंग का वर्ग देखना चाहिए। पृष्ठ पर दूसरा हरा वर्ग <svg>संदर्भ के लिए DOM में डाला गया एक ही तत्व है।

आप नए Path2D ऑब्जेक्ट का उपयोग SVG (स्ट्रिंग) पथ बनाने के लिए भी कर सकते हैं। दूसरे शब्दों में, आप लिख सकते हैं:

var path = new Path2D('M 100,100 h 50 v 50 h 50');
ctx.stroke(path);

इसका जीता जागता उदाहरण यहाँ है।

---

पुराने उत्तर का उत्तर:

देशी कुछ भी नहीं है जो आपको मूल रूप से कैनवास में एसवीजी पथ का उपयोग करने की अनुमति देता है। आपको स्वयं को परिवर्तित करना होगा या आपके लिए इसे करने के लिए लाइब्रेरी का उपयोग करना होगा।

मेरा सुझाव है कि आप कैनवग में देख सकते हैं:

http://code.google.com/p/canvg/

http://canvg.googlecode.com/svn/trunk/examples/index.htm

Comments

इसकी आवश्यकता क्यों है? एसवीजी सिर्फ एक कैनवस पर पूरी तरह से आकर्षित करने के लिए लगता है drawImage। लेकिन मुझे अब भी वह चेतावनी मिलती है। यह कहां से आता है?

— शौ

साइमन, आप जो कह रहे हैं, वह सही नहीं है। और दूसरी बात, यह क्रोम में एक पुष्ट बग है।

— मैथियास लिकेगार्ड लोरेंजेन

विकिमीडिया आपको एसवीजी का उपयोग करना पसंद नहीं करता है, ऐसा लगता है। मैंने पहले उपलब्ध एसवीजी के रूप में स्नैप्सवग.आईओ / कैसेट्स / विमेज / स्लोग.गव में स्वैप किया, जो मुझे मिला। एफएफ में काम किया। jsfiddle.net/Na6X5/331

— थॉमस

आप ऐसा करने के लिए डेटा यूआरआई का भी उपयोग कर सकते हैं : jsfiddle.net/020k543w

— कुंडा

नोट: एक लंबे समय तक चलने वाले फायरफॉक्स बग के कारण, दुख की बात है कि चौड़ाई और ऊँचाई टैग की कमी के कारण कैनवास पर बिल्कुल भी रेंडर नहीं होगा। साथ ही, चौड़ाई और ऊंचाई प्रतिशत में नहीं होनी चाहिए।

— हाटोरू हांसौ

Answer 2

क्षमा करें, मेरे पास @Matyas उत्तर पर टिप्पणी करने के लिए पर्याप्त प्रतिष्ठा नहीं है, लेकिन अगर svg की छवि बेस 64 में भी है, तो इसे आउटपुट पर आकर्षित किया जाएगा।

डेमो:

var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.onload = function() {
    // draw the image onto the canvas
    canvas.getContext('2d').drawImage(img, 0, 0);
}
img.src = image64;

svg, img, canvas {
  display: block;
}

SVG

<svg height="40">
  <rect width="40" height="40" style="fill:rgb(255,0,255);" />
  <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAEX0lEQVQ4jUWUyW6cVRCFv7r3/kO3u912nNgZgESAAgGBCJgFgxhW7FkgxAbxMLwBEmIRITbsQAgxCEUiSIBAYIY4g1EmYjuDp457+Lv7n+4tFjbwAHVOnVPnlLz75ht67OhhZg/M0p6d5tD9C8SNBBs5XBJhI4uNLC4SREA0UI9yJr2c4e6QO+v3WF27w+rmNrv9Pm7hxDyHFg5yYGEOYxytuRY2SYiSCIwgRgBQIxgjEAKuZWg6R9S0SCS4qKLZElY3HC5tp7QPtmlMN7HOETUTXBJjrEGsAfgPFECsQbBIbDGJZUYgGE8ugQyPm+o0STtTuGZMnKZEjRjjLIgAirEOEQEBDQFBEFFEBWLFtVJmpENRl6hUuFanTRAlbTeZarcx0R6YNZagAdD/t5N9+QgCYAw2jrAhpjM3zaSY4OJGTDrVwEYOYw2qioigoviq5MqF31m9fg1V5fCx+zn11CLNVnufRhBrsVFE1Ihpthu4KDYYwz5YQIxFBG7duMZnH31IqHL6wwnGCLFd4pez3/DaG2/x4GNPgBhEZG/GGlxkMVFkiNMYay3Inqxed4eP33uf7Y0uu90xWkGolFAru7sZn5w5w921m3u+su8vinEO02hEWLN/ANnL2rkvv2an2yd4SCKLM0JVBsCgAYZZzrnPP0eDRzXgfaCuPHXwuEYjRgmIBlQVVLl8/hKI4fRzz3L6uWe5+PMvnHz6aa4uX+D4yYe5vXaLH86eoyoLjLF476l9oKo9pi5HWONRX8E+YznOef7Vl1h86QWurlwjbc+QpikPPfoIcZLS39pmMikp8pzae6q6oqgriqrGqS+xeLScoMYSVJlfOMTl5RXW1+5w5fJVnFGWf1/mxEMnWPppiclkTLM5RdJoUBYFZVlQ5DnZMMMV167gixKLoXXsKGqnOHnqOJ/+/CfZ+XUiZ0jTmFv5mAvf/YjEliQ2vPD8Ir6qqEcZkzt38cMRo5WruFvfL9FqpyRxQhj0qLOax5I2S08+Tu/lFiGUGOPormxwuyfMnjrGrJa88uIixeYWl776lmrzNjmw8vcG8sU7ixpHMXFsCUVg9tABjEvRgzP82j7AhbyiX5Qcv2+Bvy7dYGZ1k7efeQB/Y4PBqGBtdYvb3SFzLcfqToZc/OB1zYeBSpUwLBlvjZidmWaSB1yaYOfn6LqI/r0hyU6P+cRSlhXjbEI2zvnt7y79oqQ3qeg4g6vKjCIXehtDmi6m0UnxVnCRkPUHVNt9qkLJxgXOCYNOg34v48raPaamU2o89/KKsQ9sTSpc0JK7NwdcX8s43Ek5cnSOLC/Z2R6Rj0ra0w2W1/t0xyWn51uk2Ri1QtSO6OU5d7OSi72cQeWxKG7p/Dp//JXTy6C1Pcbc6DMpPRtjTxChEznWhwVZUCKrjCrPoPDczHLmnLBdBgZlRRWUEBR3ZKrme5TlrTGlV440Y1IrXM9qQGi6mkG5V6uza7tUIeCDElTZ1L26elX+fcH/ACJBPYTJ4X8tAAAAAElFTkSuQmCC" height="20px" width="20px" x="10" y="10"></image>
</svg>
<hr/><br/>

IMAGE
<img/>
<hr/><br/>
   
CANVAS
<canvas></canvas>
<hr/><br/>

Comments

फोंट के साथ एक ही बात, उन्हें एसवीजी में एम्बेड करने की आवश्यकता है: jsfiddle.net/ykx7kp8L/121

— स्फिंक्सएक्स

आप imgटैग के माध्यम से पुनरावृति करने में सक्षम हो सकते हैं svg, और बाद में कैनवास पर अलग से चित्र बना सकते हैं।

— भाग्योदयकाल

Answer 3

आप आसानी से svgएक कैनवास पर सरल एस आकर्षित कर सकते हैं :

1. Base64 प्रारूप में छवि के लिए svg के स्रोत को निर्दिष्ट करना
2. एक कैनवास पर छवि खींचना

नोट: विधि का एकमात्र दोष यह है कि यह अंदर एम्बेडेड छवियों को आकर्षित नहीं कर सकता है svg। (डेमो देखें)

प्रदर्शन:

(ध्यान दें कि एम्बेडेड छवि केवल में दिखाई दे रही है svg)

var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.src = image64;

// draw the image onto the canvas
canvas.getContext('2d').drawImage(img, 0, 0);

svg, img, canvas {
  display: block;
}

SVG

<svg height="40">
  <rect width="40" height="40" style="fill:rgb(255,0,255);" />
  <image xlink:href="https://en.gravatar.com/userimage/16084558/1a38852cf33713b48da096c8dc72c338.png?size=20" height="20px" width="20px" x="10" y="10"></image>
</svg>
<hr/><br/>

IMAGE
<img/>
<hr/><br/>
   
CANVAS
<canvas></canvas>
<hr/><br/>

Comments

क्या आपके द्वारा बताई गई समस्या को ठीक करने का कोई तरीका है। छवि svg में सन्निहित है।

— विजय बस्करन

क्षमा करें, लेकिन मुझे एम्बेडेड छवि समस्या का समाधान नहीं मिला है।

— मतस्य

ठीक है। धन्यवाद

— मतीस

Answer 4

मोज़िला को एसवीजी को कैनवास पर खींचने का एक आसान तरीका है, जिसे " ड्राइंग डोम ऑब्जेक्ट्स को कैनवास में " कहा जाता है।

Comments

इसमें @ साइमन की पहली विधि के समान दोष है: फ़ायरफ़ॉक्स, क्रोम ओके में काम नहीं करता है।

— 23-28 को amergin

आपका लिंक अब काम नहीं करता है। मैं अभी भी मोज़िला तरीके से दिलचस्पी

— लेता हूं

Answer 5

जैसा कि साइमन ऊपर कहते हैं, drawImage का उपयोग करके काम नहीं करना चाहिए। लेकिन, कैनवस लाइब्रेरी और:

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);

यह उस लिंक से आता है जो साइमन ऊपर प्रदान करता है, जिसमें कई अन्य सुझाव हैं और बताते हैं कि आप या तो लिंक करना चाहते हैं, या canvg.js और rgbcolor.js डाउनलोड कर सकते हैं। ये आपको जावास्क्रिप्ट कार्य में हेरफेर करने और लोड करने की अनुमति देते हैं, या तो URL के माध्यम से या जावास्क्रिप्ट कार्यों के बीच इनवॉइस SVG कोड का उपयोग करके।