如何在SVG中导出PNG [英] How to export PNG within SVG

问题描述

我有一些麻烦导出我的SVG，其中包含一个PNG图像。我使用的是D3JS 和以下代码。

  mysvg.append（image）
 .attr（width，299）
 .attr（height，168）
 .attr（xlink：href，image.png）
 
 var html = d3.select（svg）
 .attr（version，1.1）
 .attr（xmlns，http://www.w3.org/2000/ svg）
 .node（）。parentNode.innerHTML; 
 var imgsrc ='data：image / svg + xml; base64，'+ btoa（html）; 
 var img ='< img src ='+ imgsrc +'>'; 
 d3.select（＃chartRender）。html（img）; 
 

似乎发生错误：图片上href的命名空间前缀xlink未定义。
PNG图片正确显示在SVG容器中，但不在 #chartRender

中有任何想法？

更新1：
在画布上绘制图片

  canvas = d3.select（body）append（canvas）attr（id，newCanvas）
 .attr（width 200px）attr（height，100px）。node（）
 context = canvas.getContext（'2d'）
 imageObj = new Image（）
 imageObj.src = params.url 
 imageObj.onload =  - >但是显示数据显示为空的内容：（
）  p> 
 
 
  imageData = canvas.toDataURL（image / png）
 d3.select（body）append img）。datum（imageData）.attr（src，（d） - > return d）
 d3.select（svg）append（image）。datum （height，100）
 .attr（width，200）。attr（xlink：href，（d） - > return d）
  
 
 
解决方案
您需要添加 xmlns：xlink 到您的svg标签。
 
 
 
它应该看起来像这样：
 < svg width =xxxheight =yyyxmlns =http://www.w3.org/2000/svgxmlns：svg =http://www.w3.org/2000/svg xmlns：xlink =http://www.w3.org/1999/xlink> 
  
所以只要... 
  .attr（xmlns：xlink，http://www.w3.org/ 1999 / xlink）
  
 
 
 
 UPDATE 
 
 
 
我创建了一个  JSBIN  来帮助我们。它工作很好。
  var mysvg = d3.select（'＃mysvg'）; 
 
 var src ='http://placehold.it/350x150'; 
 
 mysvg.append（image）
 .attr（width，350）
 .attr（height，150）
 .attr xlink：href，src）; 
 
 var img = document.createElement（'img'）; 
 img.src = src; 
 
 document.getElementById（target）。appendChild（img）; 
  
它能解决你的问题吗？
 
I have some trouble to export my SVG which contains a PNG image in it. I'm using D3JS and the following code.
mysvg.append("image")
  .attr("width", 299)
  .attr("height", 168)
  .attr("xlink:href", "image.png")

var html = d3.select("svg")
  .attr("version", 1.1)
  .attr("xmlns", "http://www.w3.org/2000/svg")
  .node().parentNode.innerHTML;
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var img = '<img src="'+imgsrc+'">';
d3.select("#chartRender").html(img);
It seems that an error occurs: Namespace prefix xlink for href on image is not defined.
The PNG image is correctly displayed in the SVG container but not in #chartRender

Any idea ?

Update 1 :
Drawing the image in a canvas works
canvas = d3.select("body").append("canvas").attr("id", "newCanvas")
  .attr("width", "200px").attr("height", "100px").node()
context = canvas.getContext('2d')
imageObj = new Image()
imageObj.src = params.url
imageObj.onload = -> context.drawImage(imageObj, 0, 0)
But displaying the datas show empty content :(
imageData = canvas.toDataURL("image/png")
d3.select("body").append("img").datum(imageData).attr("src", (d)-> return d)
d3.select("svg").append("image").datum(imageData).attr("height", "100")
  .attr("width", "200").attr("xlink:href", (d)-> return d)

解决方案
You need to add xmlns:xlink to your svg tag.

It should look like this:
<svg width="xxx" height="yyy" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
So just do...
.attr("xmlns:xlink", "http://www.w3.org/1999/xlink")


UPDATE

I created a JSBIN to help us with this. It is working just fine.
var mysvg = d3.select('#mysvg');

var src = 'http://placehold.it/350x150';

mysvg.append("image")
  .attr("width", 350)
  .attr("height", 150)
  .attr("xlink:href", src);

var img = document.createElement('img');
    img.src = src;

document.getElementById("target").appendChild(img);
Does it solve your problem?

                        
这篇关于如何在SVG中导出PNG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！