javascript - d3.js svg 将符号保存到 Canvas 浏览器输出

Question

我正在尝试将这个简化的 SVG 示例保存到 Canvas 上，我已经使用下面的代码成功实现了它(在 Chrome 中) - 请参阅 JSFiddle

var symbolsArray = [{
  "compID": "1",
  "compB64": "data: image\/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyOSAyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjkgMjk7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KCS5zdDF7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8Y2lyY2xlIGlkPSJYTUxJRF8yOV8iIGNsYXNzPSJzdDAiIGN4PSIxNC41IiBjeT0iMTQuNSIgcj0iMTMiLz4NCjxsaW5lIGlkPSJYTUxJRF8xXyIgY2xhc3M9InN0MSIgeDE9IjUiIHkxPSI1IiB4Mj0iMjQiIHkyPSIyNCIvPg0KPGxpbmUgaWQ9IlhNTElEXzI4XyIgY2xhc3M9InN0MSIgeDE9IjI0IiB5MT0iNSIgeDI9IjUiIHkyPSIyNCIvPg0KPC9zdmc+DQo="
}];

d3.select("#draw").append('svg').attr("width", "100px").attr("height", "100px");
var svg = d3.select('svg');

var sym = svg.append("g")
  .attr("id", "symbols").selectAll("symbol")
  .data(symbolsArray)
  .enter().append("symbol")
  .attr("id", function(d) {
    return "symbolType" + d.compID
  });

sym.append("image")
  .attr("xlink:href", function(d) {
    var symbol = d.compB64;
    return symbol;
  })
  .attr("class", "symbol-image")
  .attr("width", 30)
  .attr("height", 30);

svg.append("g").attr("class", "symbol")
  .append("use")
  .attr("xlink:href", function(d) {
    //return window.location.href + "#symbolType1"
    return "#symbolType1"
  });

// save 
function saveDrawing() {
  var w = d3.select('svg').node().getBoundingClientRect().width;
  var h = d3.select('svg').node().getBoundingClientRect().height;
  var ratio = 2
  var canvas1 = document.createElement('canvas');
  canvas1.id = "canvas1";
  canvas1.width = w * ratio;
  canvas1.height = h * ratio;
  var container = document.getElementById('saved');
  container.innerHTML = "";
  container.appendChild(canvas1);

  var svg = document.getElementById('draw').querySelector('svg');

  var html = new XMLSerializer().serializeToString(document.getElementById('draw').querySelector('svg'));

  var imgsrc = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(html)));

  var canvas = document.getElementById("canvas1");
  var context = canvas.getContext("2d");
  var canvasdata;
  var image = new Image;
  image.src = imgsrc;

  image.onload = function() {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
    canvasdata = canvas.toDataURL("image/png");
    var a = document.createElement("a");
  }
}

var saveBtn = document.getElementById('saveBtn');
saveBtn.addEventListener('click', function(event) {
  saveDrawing();
});

符号已渲染并单击保存按钮将其保存到 Canvas 。

问题 -如果我在 Firefox 中运行相同的代码，则不会显示符号，除非我用注释掉的行替换返回值。然而，该符号确实保存到 Canvas 上。

svg.append("g").attr("class", "symbol")
.append("use")
.attr("xlink:href", function(d) {
    return window.location.href + "#symbolType1"
});

这很好，除非回到 Chrome 中，符号最初被渲染，但添加了 window.location.href现在不保存到 Canvas 。

正在删除<base href="/">修复了问题，但我的项目使用了这个。

任何对我出错的地方的帮助将不胜感激!

Answer 1

我想说 FF 比 chrome 更严格是正确的，尽管我不完全确定:基本 URI 已经更改，这个新的 URI 应该用于相对 URI #symbolType1也。

罗伯特·朗森的最后一句话:

Firefox was right but the specification has changed recently. Firefox 55 will reflect the new specification and ignore the base tag for URLs that start with #

<小时/>

但是，两者都无法在 Canvas 中渲染绝对 URI(实际上是在 <img> 元素中)，这是正常的。您无法从 <img> 加载外部资源。的内容。

所以我能想到的唯一解决方案是在将其转换为字符串时重写此 URI。

这是一个快速的概念证明，我首先克隆 svg 节点，然后使用 href 搜索该克隆内的所有元素。属性，只需将与当前位置匹配的内容替换为空字符串即可。

var symbolsArray = [{
  "compID": "1",
  "compB64": "data: image\/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyOSAyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjkgMjk7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KCS5zdDF7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8Y2lyY2xlIGlkPSJYTUxJRF8yOV8iIGNsYXNzPSJzdDAiIGN4PSIxNC41IiBjeT0iMTQuNSIgcj0iMTMiLz4NCjxsaW5lIGlkPSJYTUxJRF8xXyIgY2xhc3M9InN0MSIgeDE9IjUiIHkxPSI1IiB4Mj0iMjQiIHkyPSIyNCIvPg0KPGxpbmUgaWQ9IlhNTElEXzI4XyIgY2xhc3M9InN0MSIgeDE9IjI0IiB5MT0iNSIgeDI9IjUiIHkyPSIyNCIvPg0KPC9zdmc+DQo="
}];

d3.select("#draw").append('svg').attr("width", "100px").attr("height", "100px");
var svg = d3.select('svg');

var sym = svg.append("g")
  .attr("id", "symbols").selectAll("symbol")
  .data(symbolsArray)
  .enter().append("symbol")
  .attr("id", function(d) {
    return "symbolType" + d.compID
  });

sym.append("image")
  .attr("xlink:href", function(d) {
    var symbol = d.compB64;
    return symbol;
  })
  .attr("class", "symbol-image")
  .attr("width", 30)
  .attr("height", 30);

svg.append("g").attr("class", "symbol")
  .append("use")
  .attr("xlink:href", function(d) {
    return window.location.href + "#symbolType1"
//    return "#symbolType1"
  });

// save 
function saveDrawing() {
  var w = d3.select('svg').node().getBoundingClientRect().width;
  var h = d3.select('svg').node().getBoundingClientRect().height;
  var ratio = 2
  var canvas1 = document.createElement('canvas');
  canvas1.id = "canvas1";
  canvas1.width = w * ratio;
  canvas1.height = h * ratio;
  var container = document.getElementById('saved');
  container.innerHTML = "";
  container.appendChild(canvas1);


  var svg = document.getElementById('draw').querySelector('svg');
  var xlinkNS = "http://www.w3.org/1999/xlink";
  // clone the node to not mess up the displayed one
  var toBeSaved = svg.cloneNode(true);
  // fix all the href
  toBeSaved.querySelectorAll('[*|href*="#"]').forEach(function(el) {
    var href = el.getAttributeNS(xlinkNS, 'href').replace(location.href, '');
    el.setAttributeNS(xlinkNS, 'href', href);
  });

  var html = new XMLSerializer().serializeToString(toBeSaved);

  var imgsrc = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(html);

  var canvas = document.getElementById("canvas1");
  var context = canvas.getContext("2d");
  var canvasdata;
  var image = new Image;
  image.src = imgsrc;

  image.onload = function() {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
    canvasdata = canvas.toDataURL("image/png");
    var a = document.createElement("a");
  }
}


var saveBtn = document.getElementById('saveBtn');
saveBtn.addEventListener('click', function(event) {
  saveDrawing();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<base href="/">
<div id="draw"></div>
<button id="saveBtn">save</button>
<div id="saved"></div>