pdfkit을 사용하여 그림자 효과를 렌더링 할 수 있습니까?

Question

SVG를 PDF로 렌더링하기 위해 javascript pdfkit bower 패키지를 사용했습니다. 모든 것이 잘 작동하지만 그림자 효과는 렌더링되지 않습니다.

<filter id="SVGID_32" y="-22%" height="144%" x="-21%" width="142%" > 
    <feGaussianBlur in="SourceAlpha" stdDeviation="1"></feGaussianBlur> 
    <feOffset dx="-2" dy="0" result="oBlur" ></feOffset> 
    <feFlood flood-color="rgba(0,0,0,1)"/> 
    <feComposite in2="oBlur" operator="in" /> 
    <feMerge> 
     <feMergeNode></feMergeNode> 
     <feMergeNode in="SourceGraphic"></feMergeNode> 
    </feMerge> 
</filter> 
    <g transform="translate(588.56 1434.18) scale(1.06 1.06)" style="filter: url(#SVGID_32);"> 
     <text xml:space="preserve" font-family="us101" font-size="93.33333333333334" font-style="italic" font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(236,236,236); fill-rule: nonzero; opacity: 1; white-space: pre;" > 
      <tspan x="-378.71" y="29.32" >AAAAA</tspan> 
     </text> 
    </g> 

(fabricjs에서 렌더링)

SVG 코드는 PDF 파일을 생성 할 때 그림자를 렌더링 경험이 사람이 있습니까? 의견을 보내 주셔서 감사합니다.

UPDATE :

자바 스크립트 코드 :

doc = new PDFDocument({ 
    layout: 'landscape', 
    size: [docHeight, docWidth] 
}); 
setTimeout(function() { 
    var fd = new FormData(); 
    var div = document.createElement('div'); 
    div.innerHTML = '<svg ' + canvas.fabric.toSVG().split('<svg ')[1]; 
    var element = div.firstChild; 
    SVGtoPDF(doc, element, 0, 0, { useCSS: true }); 
    stream = doc.pipe(blobStream());  
    stream.on('finish', function() { 
     var blob = stream.toBlob('application/pdf'); 

     fd.append("pdfimage", blob); 
     $.ajax({ 
      ... 
     }); 
    }); 
doc.end(); 

Answer 1

는 SVG에는 그림자가 있습니다 없으며, SVG는 명시 적으로 PDF 지원. SVG 생성을 위해 fabricjs를 사용하고 있습니다. Fabric은 필터 (흐림 및 오프셋)를 사용하여 그림자 효과를 에뮬레이션합니다.

아마도 SVGtoPDF가 경로를 구문 분석하고 pdf 용 ps 언어로 동일한 명령을 그립니다. 필자는 필터가 전혀 지원되지 않는다고 생각합니다.

Answer 2

그림자 사진을 수동으로 추가하여 그림자를 추가했습니다. 이것은 그림 생성 코드입니다.

canvas._objects.forEach(function(obj, index){ 
    if(obj.shadow && obj.type == 'i-text'){ 
    objForm = obj.toObject(); 
    var Duplicated_obj = new fabric.IText(objForm.text, objForm); 
    Duplicated_obj.fill = "rgba('50,50,50,0.8')"; 
    fabric.util.loadImage(Duplicated_obj.toDataURL({format:'png'}),function(image){ 
     var object = new fabric.Image(image); 
     object.name = 'shadowImage???'; 
     object.left = obj.left; 
     object.top = obj.top; 
     canvas.insertAt(object,index-1); 
    }); 
    } 
});