SVG ben JS ile görüntüye aşağıdaki SVG dizeyi dönüştürmek çalışıyorum

Question

:

<svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-line" id="test-chart" style="width: 100%; height: 100%;"><g class="ct-grids"><line y1="165" y2="165" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line><line y1="115" y2="115" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line><line y1="65" y2="65" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line><line y1="15" y2="15" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line></g><g><g series-name="performance" class="ct-series ct-series-a"><path d="M50,165C53.57,165,403.415,155,406.984,155" class="ct-line"></path></g><g series-name="bemchmark" class="ct-series ct-series-b"><path d="M50,165C53.57,165,403.415,45,406.984,45" class="ct-line"></path></g></g><g class="ct-labels"><foreignObject style="overflow: visible;" x="40" y="170" width="356.984375" height="20"><span class="lineChartLabel ct-horizontal ct-end" style="width: 357px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jan</span></foreignObject><foreignObject style="overflow: visible;" x="396.984375" y="170" width="30" height="20"><span class="lineChartLabel ct-horizontal ct-end" style="width: 30px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Feb</span></foreignObject><foreignObject style="overflow: visible;" y="115" x="10" height="50" width="30"><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">0%</span></foreignObject><foreignObject style="overflow: visible;" y="65" x="10" height="50" width="30"><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">0.5%</span></foreignObject><foreignObject style="overflow: visible;" y="15" x="10" height="50" width="30"><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">1%</span></foreignObject><foreignObject style="overflow: visible;" y="-15" x="10" height="30" width="30"><span class="lineChartLabel ct-vertical ct-start" style="height: 30px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">1.5%</span></foreignObject></g></svg> 

Ben mesela simg.js gibi bulabildiğim her şeyi, ya bu senaryoyu, denedik:

var svg = document.getElementById('test-chart'), 
xml = new XMLSerializer().serializeToString(svg), 
data = "data:image/svg+xml;base64," + btoa(xml), 
img = new Image(); 
img.setAttribute('src', data) 
document.body.appendChild(img) 

Ancak oluşturulan görüntü her zaman "bozuk", yani hiç görünmüyor. Daha basit bir SVG dizesiyle aynı betik iyi çalışıyor.

Grafikist.js tarafından oluşturulan ve tarayıcıda güzel bir şekilde görüntülenen dizgemde neyin yanlış olduğunu tam olarak anlamıyorum, ancak sanki onları sildiğim gibi, işler iyi çalışıyor gibi <foreignObject> öğeleridir.

Bu SVG dizesini JS ile bir görüntüye dönüştürmenin bir yolu var mı?

Answer 1

Senin sorunun <foreignObjects> içerdiği <span> elemanlarında set xmlns nitelik yanlış olmasıdır. Şu anda varsayılan XML ad alanı olan http://www.w3.org/2000/xmlns/ olarak ayarlanmıştır. Dahil ettiğiniz öğe xhtml ad alanına ait olduğundan, http://www.w3.org/1999/xhtml olmalıdır.

Kendiniz ayarlamamanıza ve kullandığınız kitaplığın bunu yapmadığına inanıyorum.

Bunu yazarları bir sorun raporu bırakın, ancak IE < 11 bu <foreignObject> etiketi destek vermedi ve bu akım Safari onu geri çekmek istiyorsanız (örneğin bir etiket temsil <img> etiketinde bazı güvenlik kısıtlamaları vardır unutmayın olabilir bir tuvale, bunu tarar). Yani benim kişisel düşüncem Bu etiketin kullanımı hala tavsiye edilmez.

Ayrıca başkalarının söylediği gibi, sen ve root <svg> için height nitelik yüzden <img> etiketinde doğru görüntüler width mutlak ayarlamak zorunda olduğunu unutmayın.

Son olarak, dize kodunuzu base64 kodlamanıza gerek yoktur ve 'data:image/svg+xml; charset=utf8, ' dataURI başlığı, IE9'dan Edge'e tüm tarayıcılar tarafından desteklenen tekdir. Daha önce sorunu düzeltemez eğer içine alan bütün HTML öğeleri arasında döngü gerekecek, Yani

var svgData = (new XMLSerializer()).serializeToString(test) 
 
var dataURI = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData); 
 
var img = new Image(); 
 
img.src = dataURI; 
 
document.body.appendChild(img);

<h3> 
 
svg version 
 
</h3> 
 

 
<svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="500" height="200" class="ct-chart-line" id="test" style="width: 100%; height: 100%;"> 
 
    <g class="ct-grids"> 
 
    <line y1="165" y2="165" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line> 
 
    <line y1="115" y2="115" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line> 
 
    <line y1="65" y2="65" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line> 
 
    <line y1="15" y2="15" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line> 
 
    </g> 
 
    <g> 
 
    <g series-name="performance" class="ct-series ct-series-a"> 
 
     <path d="M50,165C53.57,165,403.415,155,406.984,155" class="ct-line"></path> 
 
    </g> 
 
    <g series-name="bemchmark" class="ct-series ct-series-b"> 
 
     <path d="M50,165C53.57,165,403.415,45,406.984,45" class="ct-line"></path> 
 
    </g> 
 
    </g> 
 
    <g class="ct-labels"> 
 
    <foreignObject style="overflow: visible;" x="40" y="170" width="356.984375" height="20" requiredExtensions="http://www.w3.org/1999/xhtml"><span class="lineChartLabel ct-horizontal ct-end" style="width: 357px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">Jan</span></foreignObject> 
 
    <foreignObject style="overflow: visible;" x="396.984375" 
 
    y="170" width="30" height="20"><span class="lineChartLabel ct-horizontal ct-end" style="width: 30px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">Feb</span></foreignObject> 
 
    <foreignObject style="overflow: visible;" y="115" x="10" height="50" width="30" ><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">0%</span></foreignObject> 
 
    <foreignObject style="overflow: visible;" y="65" x="10" height="50" width="30" ><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">0.5%</span></foreignObject> 
 
    <foreignObject style="overflow: visible;" y="15" x="10" height="50" width="30" ><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">1%</span></foreignObject> 
 
    <foreignObject style="overflow: visible;" y="-15" x="10" height="30" width="30" ><span class="lineChartLabel ct-vertical ct-start" style="height: 30px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">1.5%</span></foreignObject> 
 
    </g> 
 
</svg> 
 
<h3> 
 
img version 
 
</h3>

: Burada

İşaretlemenizin gibi görünmelidir nasıl <foreignObject> öğelerini elle düzeltip düzeltin (HTMLelem.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'))

Answer 2

Eğer kumaş js kullanabilirsiniz: http://fabricjs.com/

var addShape = function(shapeName) { 

fabric.loadSVGFromURL('../assets/' + shapeName + '.svg', function(objects, options) { 
    var loadedObject = fabric.util.groupSVGElements(objects, options); 
    loadedObject.set({ 
    left: 0, 
    top:0, 
    angle:0 
    }).setCoords(); 
    canvas.add(loadedObject); 
    window.open(canvas.toDataURL('png')); 
    }); 
};