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在这里比在这里更严格是正确的，尽管我并不完全确定：基URI已经改变了，这个新URI应该用于相对URI {{ 1}}。

Robert Longson的最后一句话：

Firefox是正确的，但规范has changed recently。 Firefox 55将反映新规范并忽略基本标记对于以＃
开头的网址

但是，在画布中呈现绝对URI（实际上在#symbolType1元素中）都失败是正常的。）您无法从<img>＆＃加载外部资源39; s内容。

因此，我能想到的唯一解决方案是在将URI转换为String时重写此URI。

这是一个概念的快速证明，我首先克隆svg节点，然后使用<img>属性搜索此克隆中的所有元素，并简单地用空字符串替换与当前位置匹配的元素

＆＃13;

href

＆＃13;

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();
});

＆＃13;

d3.js svg使用<base href =“/”/>

1 个答案: