문제 Textpath svg to png

Question

SVG 그래픽 내보내기 (d3.js 라이브러리 사용)에서 PNG로 작업하고 있습니다. 문제는 textPath 레이블입니다. PNG로 내보낼 때 텍스트가 나타나지 않습니다. 누구든지이 문제에 대한 해결책이 있다면 알 수 있습니까? 나는 변환을 수행하기 위해 사용하고

코드입니다 :

var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg')); 

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

var DOMURL = self.URL || self.webkitURL || self; 
var img = new Image(); 
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}); 
var url = DOMURL.createObjectURL(svg); 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    var png = canvas.toDataURL("image/png"); 
    var a = document.createElement("a"); 
    a.download = "grafico.png"; 
    a.href = png; 
    a.click(); 
    DOMURL.revokeObjectURL(png); 
}; 
img.src = url; 

이 모든 주셔서 대단히 감사합니다. 인사말 소니아

Answer 1

수정 됨. CSS 스타일 시트의 속성으로 해결했습니다.

font-size: 16px; 
color: black; 
fill: none; 

Answer 2

같은 문제가 있습니다. 이 변환 방법이 본문의 글꼴 크기를 얻지 못하는 것 같습니다. 그러나 생성 된 SVG를 .svg 파일로 덤프하고 브라우저에서 해당 파일을 열면 올바르게 렌더링됩니다.