SORU
22 EYLÜL 2010, ÇARŞAMBA


Çizim SVG dosyası HTML5 tuval üzerine

Bir SVG HTML5 tuval üzerine çizim dosyasını varsayılan bir yolu var mı? Google Chrome görüntü olarak SVG yükleme destekler (sadece drawImage kullanarak), ama geliştirici resource interpreted as image but transferred with MIME type image/svg xml warn konsol.

Bir ihtimal tuval komutları (this question) gibi SVG dönüştürmek olacağını biliyorum ama buna gerek yok diye umuyorum. Eski tarayıcılar FireFox 4 ve IE 9 destek olacak bir şey varsa, o kadar iyi yani () umurumda değil.

CEVAP
22 EYLÜL 2010, ÇARŞAMBA


5 Kasım 2014 DÜZENLEYİN

Şimdi ctx.drawImage olan HTMLİmageElements çizmek için kullanabilirsiniz .svg kaynakama tüm tarayıcılar biraz. , İE11, Chrome ve Safari işine, Firefox bazı hatalar (ama gece onları sabit) ile çalışır.

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

Live example here. Canvas yeşil bir kare görmelisiniz. Bu sayfada ikinci yeşil Kare <svg> aynı öğe başvurusu için DOM eklenir.

Ayrıca yeni Path2D nesneleri (dizi) SVG yollar çizmek için kullanabilirsinizsadece Chrome şu anda çalışır). Diğer bir deyişle, yazabilirsiniz:

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

Live example of that here.


Eski kuşaklar cevap:

Doğal olarak sağlayan yerel canvas SVG yolları kullanın bir şey yok. Kendini dönüştürmek ya da sizin için bunu yapmak için bir kütüphane kullanmanız gerekir.

İçinde canvg isteyen öneririm:

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

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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • AutoklubZAPRESIC

    AutoklubZAPR

    17 Mayıs 2011
  • Rachel Raum

    Rachel Raum

    10 EYLÜL 2007
  • Xcode programming tutorials

    Xcode progra

    17 EYLÜL 2006