2011-04-04 15 views
15

kullanarak svg? örneğindönüştürme html html parçacığı svg dönüştürmek için bir yolu var mı javascript/jquery

: <b>This is bolded</b>

Yukarıdaki html snippet'iyle bir svg belgesini yapmak istiyorum ... Bu mümkün mü?

+0

Kesin bir başvuru değil, ancak gitmenize yetecek kadar: http://www.w3schools.com/svg/default.asp – RobG

+0

Ve burada metin öğesinin kullanımı hakkında hızlı bir öğretici: http: //tutorials.jenkov .com/svg/text-element.html – RobG

+0

@RobG aslında HTML kodunu alıp svg'ye dönüştürüyor mu? Benim yapmaya çalıştığım, herhangi bir manuel değişiklik yapmadan bir div öğesinin innerHTML sağlayarak bir svg oluşturmaktır. – FoGy

cevap

7

Ben size ulaşmak için çalışıyoruz fiili kullanım durumunda ve hedefe açıklamak için soruyu düzenlemek gerektiğini öneririm, hem doğrudan istemeye göründüğü gibi uygulanması (aşağıya bakınız) zordur. Bazı SVG-in-XHTML veya XHTML-in-SVG (örneğin, this) birleşimi, istediğiniz şeyi vermek için çok daha olasıdır.

Biz sadece bunları başarmak için, aklınıza belirli bir uygulama çözmek için yardımcı bizi soran yerine bize hedeflerinize söylersem size hedeflerinize ulaşmanıza yardımcı olabilir.


Yukarıda belirttiğim gibi, önerilerinizi gerçekleştirmenin kolay bir yolu yoktur. Özellikle, HTML'de SVG'de bulunmayan otomatik satır kaydırma, yüzer ve genel konumlandırma kavramlarının yanı sıra açık bir z-endeksleme vardır.

  • sayfanızdaki bir iframe veya div oluşturun ve Snippet'te HTML ayarlayın:

    aşağıdaki delilik çoğunlukla ancak çalışacak.

  • Döngü her eleman içinden ve sarma metinde her sözcüğün etrafında margin:0;padding:0;border:0 yayılma dönüştürün.
  • (sizin oluşturulan açıklıklı dahil) her eleman döngü ve sayfadaki mutlak pozisyonunu hesaplar. (JQuery Bunu yapmak için bir yöntem varsa veya konumlandırılmış ağaca yürümek ve kendiniz hesaplamak offsetLeft/offsetTop ve offsetParent kombinasyonunu kullanabilirsiniz.)
    • kadar yürüyerek her element için eşdeğer Z endeksini hesaplayın ağacı ve getComputedStyle()'u kullanarak ve yerel z dizini zincirini oluşturarak.
    • Bu elemanların her biri için, SVG'de mutlak konumlandırma ile eşdeğer elemanı oluşturun.
  • Yeniden sıralama Eğer z endekslerin hiyerarşisi tarafından oluşturulan SVG öğeleri. http://html2canvas.hertzen.com/ Ancak bugüne kadar , ben svg için benzer bir şey bulundu vermedi:
+0

sorunu Yani 9 tarafından desteklenmez ve ayrıca SVG – FoGy

+0

serileştiremezsiniz Birisi bu "delilik" uyguladı mı? Bu durumda SVG'leri bir etiketine ve 'foreignObject' [iyi çalışmıyor] (https://codepen.io/qgustavor/pen/bLarww) yüklemem gerekiyor. –

3

tuvaline html dönüştürmek JS kütüphaneleri vardır.

4

Bu, html to SVG demo numaralı telefonu (ticari bir ürün olan HiQPDF kullanarak) kontrol edin. Orada C# ve VB.NET için kod örnekleri bulabilirsiniz. Bir URL'yi veya HTML kod snippet'ini istediğiniz gibi dönüştürebilirsiniz.

+0

Harika bir yazılım. Ne yazık ki makul bir ürüne sahip olmadıkları, ancak sadece geliştiricilerin hedeflediği kütüphane. – Christian

İlgili konular