【发布时间】：2018-01-19 13:10:40
【问题描述】：
我正在使用 D3 库。
我想将 svg 导出为 png 图像，检查下面的代码中显示的这个 jsfiddle，当我们将 svg 导出为 png 时，图案背景图像不会导出为 png 图像。请检查并恢复。
我读到这样的事情可以使用 svg 的模式来完成。下面是我用来将图像附加到模式中的一些 D3 代码：
d3.select("#downloadsvg").on("click", function(){
var html = d3.select("#svg > .pattern > svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML;
//console.log(html);
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var img = '<img src="'+imgsrc+'">';
d3.select("#svgdataurl").html(img);
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d");
var image = new Image;
image.src = imgsrc;
image.onload = function() {
context.drawImage(image, 0, 0);
var canvasdata = canvas.toDataURL("image/png");
var pngimg = '<img src="'+canvasdata+'">';
d3.select("#pngdataurl").html(pngimg);
var a = document.createElement("a");
a.download = "sample.png";
a.href = canvasdata;
a.click();
};
});<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="svg">
<div class="pattern" style="margin: 25px;"><svg id="selectedsvg" width="250" height="250" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="contrast">
<feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 .5 1 1"></feFuncR>
<feFuncG type="discrete" tableValues="0 .5 1"></feFuncG>
<feFuncB type="discrete" tableValues="0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="brightness">
<feComponentTransfer>
<feFuncR type="linear" slope="5"></feFuncR>
<feFuncG type="linear" slope="5"></feFuncG>
<feFuncB type="linear" slope="5"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="grayscale">
<feColorMatrix values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"></feColorMatrix>
</filter>
<filter id="saturate">
<feComponentTransfer>
<feFuncR tableValues="1 .33 .33" type="table"></feFuncR>
<feFuncG tableValues=".33 1 .33" type="table"></feFuncG>
<feFuncB tableValues=".33 .33 1" type="table"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="hue-rotate">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"></feFuncR>
<feFuncG type="table" tableValues="1 0"></feFuncG>
<feFuncB type="table" tableValues="1 0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="sepia">
<feComponentTransfer>
<feFuncR tableValues="0.15 .25" type="table"></feFuncR>
<feFuncG tableValues=".01 .25" type="table"></feFuncG>
<feFuncB tableValues="0 .09" type="table"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="invert">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"></feFuncR>
<feFuncG type="table" tableValues="1 0"></feFuncG>
<feFuncB type="table" tableValues="1 0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="blur">
<feGaussianBlur stdDeviation="10" result="outBlur"></feGaussianBlur>
</filter>
<pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery1.png"></image></pattern>
<pattern id="pattern2" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery2.png"></image></pattern>
<pattern id="pattern3" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery3.png"></image></pattern>
<pattern id="pattern4" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1px" width="1px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/demo3/img/Embroidery4.png"></image></pattern>
</defs>
<rect x="0%" y="0%" width="100%" height="100%" fill="#FC7A04" id="1" filter="url(#blur)"></rect>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="50%" stroke="black" stroke-width="0.5" id="c1" fill="url(#pattern-77)"></circle>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="40%" stroke="black" stroke-width="0.5" fill="#eee333" id="c2" filter="url(#blur)"></circle>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="30%" stroke="black" stroke-width="0.5" id="c3" fill="url(#pattern-94)"></circle>
<circle xmlns="http://www.w3.org/2000/svg" cx="50%" cy="50%" r="20%" stroke="black" stroke-width="0.5" id="c4"></circle>
<defs><pattern id="pattern-94" height="30%" width="30%" x="-0.05" y="-0.030000000000000006" patternContentUnits="objectBoundingBox"><image width="0.30000000000000004px" height="0.30000000000000004px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/media/configurator/embroidery/Embroidery4.png"></image></pattern></defs><defs><pattern id="pattern-77" height="20%" width="20%" x="-0.02" y="0.01" patternContentUnits="objectBoundingBox"><image width="0.20000000000000004px" height="0.20000000000000004px" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://halyca.kiwis-and-brownies.de/media/configurator/embroidery/Embroidery1.png"></image></pattern></defs><text x="8" y="238" id="text-21" font-size="27" font-family="Times New Roman" style="fill: rgb(184, 19, 59);" font-weight="bold" font-style="italic">sadja</text><path d="M9.5,15L118.5,97" stroke="black" stroke-width="1px"></path><path d="M119.5,98L216.5,9" stroke="black" stroke-width="1px"></path><path d="M217.5,10L217.5,10" stroke="black" stroke-width="1px"></path><path d="M217.5,10L9.5,15" stroke="black" stroke-width="1px"></path><path d="M10.5,16L10.5,16" stroke="black" stroke-width="1px"></path><path d="M11.5,35L11.5,35" stroke="black" stroke-width="1px"></path><path d="M11.5,35L11.5,35" stroke="black" stroke-width="1px"></path><path d="M206.5,143L206.5,143" stroke="black" stroke-width="1px"></path><path d="M206.5,143L206.5,143" stroke="black" stroke-width="1px"></path><path d="M163.5,32L163.5,32" stroke="black" stroke-width="1px"></path></svg> </div>
</div>
<canvas id="canvas1" width='380' height='378' hidden></canvas>
<button id="downloadsvg"> Save Svg</button>【问题讨论】：
标签： javascript d3.js canvas svg