d3.js svg 使用 <base href="/"> 将符号保存到画布浏览器输出

Question

我正在尝试将这个简化的 SVG 示例保存到画布上，我已经使用下面的代码（在 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();
});

符号被渲染并单击保存按钮将其保存到画布。

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

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

这很好，除非在 Chrome 中最初呈现符号但添加的 window.location.href 现在不会保存到画布。

删除<base href="/"> 解决了这个问题，但我的项目使用了这个。

如果我出错了，我们将不胜感激！

Answer 1

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

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

Firefox 是正确的，但规范 has changed recently。 Firefox 55 将反映新规范并忽略基本标签 对于以 #

开头的 URL

---

但是，两者都无法在画布中呈现绝对 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>