131

Bir SVG dosyasını HTML5 tuvaline çizmenin varsayılan bir yolu var mı? Google Chrome, SVG'yi bir resim olarak yüklemeyi (ve yalnızca kullanmayı drawImage) destekler, ancak geliştirici konsolu bunu uyarır resource interpreted as image but transferred with MIME type image/svg+xml.

SVG'yi tuval komutlarına dönüştürmek için bir olasılık olduğunu biliyorum ( bu soruda olduğu gibi ), ancak buna gerek olmadığını umuyorum. Eski tarayıcıları umursamıyorum (yani FireFox 4 ve IE 9 bir şeyi destekleyecekse, bu yeterince iyi).

html canvas svg

— Randy Voet
kaynak

4

Bu sorunun cevabı canlı bir demo stackoverflow.com/questions/5495952/… ile var

— Drew LeSueur

122

DÜZENLE Aralık 16th, 2019

Path2D artık tüm büyük tarayıcılar tarafından desteklenmektedir

EDIT Kasım 5, 2014

Artık tüm tarayıcılarda olmasa da bazılarındactx.drawImage .svg kaynağı olan HTMLImageElements öğesini çizmek için kullanabilirsiniz . Chrome, IE11 ve Safari çalışır, Firefox bazı hatalarla çalışır (ancak her gece bunları düzeltir).

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

Burada canlı örnek . Tuvalde yeşil bir kare görmelisiniz. Sayfadaki ikinci yeşil kare, <svg>referans için DOM'a eklenen aynı öğedir.

SVG (dize) yollarını çizmek için yeni Path2D nesnelerini de kullanabilirsiniz. Başka bir deyişle, yazabilirsiniz:

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

Bunun canlı bir örneği burada.

Eski gelecek cevabı:

SVG yollarını tuvalde yerel olarak kullanmanıza izin veren yerel hiçbir şey yoktur. Bunu sizin için yapmak için kendinizi dönüştürmeli veya bir kitaplık kullanmalısınız.

Canvg'ye bakmanızı öneririm:

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

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

— Simon Sarris
kaynak

4

Bu neden gerekli? SVG, sadece bir tuval üzerine mükemmel bir şekilde çiziyor gibi görünüyor drawImage. Ama yine de bu uyarıyı alıyorum. Nereden geliyor?

— shoosh

1

Simon, söylediğin doğru değil. İkincisi, Chrome'da onaylanmış bir hata.

— Mathias Lykkegaard Lorenzen

4

Wikimedia, SVG'yi kullanmanızı sevmiyor gibi görünüyor. Bulduğum ilk kullanılabilir SVG olarak snapsvg.io/assets/images/logo.svg'yi değiştirdim . FF'de çalıştı. jsfiddle.net/Na6X5/331

— Thomas

1

Bunu yapmak için Veri URI'larını da kullanabilirsiniz : jsfiddle.net/020k543w

— Döndürme

9

Not: Uzun süredir devam eden bir FireFox Bug nedeniyle, ne yazık ki, genişlik ve yükseklik etiketlerine sahip olmayan svg'ler tuvalde hiç görüntülenmez. Ayrıca genişlik ve yükseklik yüzde olarak olmamalıdır.

— Hatoru Hansou

26

Üzgünüm, @Matyas cevabına yorum yapmak için yeterli itibarım yok, ancak svg'nin görüntüsü de base64'teyse, çıktıya çekilecek.

Demo:

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

Snippet'i genişlet

— Henrique Campos
kaynak

1

Yazı tipleriyle aynı şey, SVG'ye gömülmeleri

— Sphinxxx

1

içindeki imgetiketleri yineleyebilir svgve daha sonra resimleri tuval üzerine ayrı ayrı çizebilirsiniz.

— luckydonald

24

Aşağıdakileri svgyaparak bir tuvale kolayca basit s çizebilirsiniz :

Svg'nin kaynağını base64 formatındaki bir resme atama
Görüntüyü bir tuval üzerine çizme

Not: Yöntemin tek dezavantajı svg,. (demoya bakın)

gösteri:

(Gömülü görüntünün yalnızca içinde görülebileceğini unutmayın 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/>

Snippet'i genişlet

— Matyas
kaynak

2

Bahsettiğiniz sorunu çözmenin herhangi bir yolu var mı? Svg'ye gömülü resim.

— Vijay Baskaran

Maalesef gömülü görüntü sorununa bir çözüm bulamadım.

— Matyas

Tamam. Teşekkürler Matyas :)

— Vijay Baskaran

6

Mozilla denilen tuval üzerinde SVG'yi çizim için basit bir yol var " Çizim DOM bir tuval içine nesneleri "

— Nati Krisi
kaynak

Bu, @ Simon'ın ilk yöntemiyle aynı dezavantaja sahiptir: Firefox'ta çalışmaz, Chrome OK.

— amergin

3

Bağlantınız artık çalışmıyor. Hala Mozilla tarzıyla ilgileniyorum

— Alirezak

6

Simon'ın yukarıda dediği gibi, drawImage kullanmak işe yaramaz. Ancak canvg kitaplığını kullanarak ve:

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

Bu, Simon'ın yukarıda sağladığı bağlantıdan gelir, burada başka öneriler de vardır ve canvg.js ve rgbcolor.js'ye bağlanmak veya bunları indirmek istediğinizi belirtir. Bunlar, JavaScript işlevleri içinde, URL aracılığıyla veya svg etiketleri arasında satır içi SVG kodu kullanarak bir SVG'yi işlemenize ve yüklemenize olanak tanır.

— Max West
kaynak

HTML5 tuvalinde bir SVG dosyası çizme

DÜZENLE Aralık 16th, 2019

EDIT Kasım 5, 2014

Eski gelecek cevabı:

Demo:

gösteri: