Question

我有一个SVG元素的节点。它是由D3生成的。

在我的Angular 2应用程序中，我需要使用该元素并使用dom-to-image将其转换为png。

我的问题是当我使用SVG元素并将其设置为img元素的src时，SVG代码被编码。

如何将实际字符串放入src？

这是我的代码。基本上我正在创建一个div，然后创建一个img，并将img src设置为节点中的内容。

  var divelem = document.createElement('div');
  var imgelem = document.createElement('img');
  imgelem.height = 400;
  imgelem.width = 300;
  imgelem.src = node.outerHTML;
  //imgelem.src = decodeURI(imgelem.src)

这是node.outerHTML：

的值

<svg width="166" height="195"><g trantsform="translate(86,[object Window])"><g class="layer" id="annual-stacked-bar" height="NaN" style="stroke-dasharray: 3, 3; fill: rgb(193, 191, 193);"><rect y="36.29999999999998" x="12" height="158.70000000000002" width="77.4"><text y="182.9" x="25.8" style="fill: rgb(255, 255, 255);">NaNundefined%</text></rect></g><g class="layer" id="annual-stacked-bar" height="NaN" style="stroke-dasharray: 3, 3; fill: rgb(142, 86, 158);"><rect y="15.669000000000011" x="12" height="20.630999999999972" width="77.4"><text y="31.07699999999998" x="25.8" style="fill: rgb(255, 255, 255);">NaNundefined%</text></rect></g><g><text dy=".9em" y="28.299999999999983" height="36.29999999999998">---------------------</text></g><g><text dy=".9em" x="100" y="26.299999999999983" height="36.29999999999998" style="fill: rgb(128, 128, 132);">Expected</text></g></g></svg>

imgelem.src是

＆＃34; http://localhost:4208/%3Csvg%20width=%22166%22%20height=%22195%22%3E%3Cg%20trantsform=%22translate(86,[object%20Window])%22%3E%3Cg%20class=%22layer%22%20id=%22annual-stacked-bar%22%20height=%22NaN%22%20style=%22stroke-dasharray:%203,%203;%20fill:%20rgb(193,%20191,%20193);%22%3E%3Crect%20y=%2236.29999999999998%22%20x=%2212%22%20height=%22158.70000000000002%22%20width=%2277.4%22%3E%3Ctext%20y=%22182.9%22%20x=%2225.8%22%20style=%22fill:%20rgb(255,%20255,%20255);%22%3ENaNundefined%%3C/text%3E%3C/rect%3E%3C/g%3E%3Cg%20class=%22layer%22%20id=%22annual-stacked-bar%22%20height=%22NaN%22%20style=%22stroke-dasharray:%203,%203;%20fill:%20rgb(142,%2086,%20158);%22%3E%3Crect%20y=%2215.669000000000011%22%20x=%2212%22%20height=%2220.630999999999972%22%20width=%2277.4%22%3E%3Ctext%20y=%2231.07699999999998%22%20x=%2225.8%22%20style=%22fill:%20rgb(255,%20255,%20255);%22%3ENaNundefined%%3C/text%3E%3C/rect%3E%3C/g%3E%3Cg%3E%3Ctext%20dy=%22.9em%22%20y=%2228.299999999999983%22%20height=%2236.29999999999998%22%3E---------------------%3C/text%3E%3C/g%3E%3Cg%3E%3Ctext%20dy=%22.9em%22%20x=%22100%22%20y=%2226.299999999999983%22%20height=%2236.29999999999998%22%20style=%22fill:%20rgb(128,%20128,%20132);%22%3EExpected%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E＆＃34;

解码它没有帮助，因为它不是一个有效的URL，所以我不确定如何将node.outerHTML中的值放在imgelem.src中。

更新

我尝试这样做，但无论我做什么，一旦它被放入src，它就会被编码。

  imgelem.src = 
   '<svg width="166" height="195"><g trantsform="translate(86,[object Window])"><g class="layer" id="annual-stacked-bar" height="NaN" style="stroke-dasharray: 3, 3; fill: rgb(193, 191, 193);"><rect y="36.29999999999998" x="12" height="158.70000000000002" width="77.4"><text y="182.9" x="25.8" style="fill: rgb(255, 255, 255);">NaNundefined%</text></rect></g><g class="layer" id="annual-stacked-bar" height="NaN" style="stroke-dasharray: 3, 3; fill: rgb(142, 86, 158);"><rect y="15.669000000000011" x="12" height="20.630999999999972" width="77.4"><text y="31.07699999999998" x="25.8" style="fill: rgb(255, 255, 255);">NaNundefined%</text></rect></g><g><text dy=".9em" y="28.299999999999983" height="36.29999999999998">---------------------</text></g><g><text dy=".9em" x="100" y="26.299999999999983" height="36.29999999999998" style="fill: rgb(128, 128, 132);">Expected</text></g></g></svg>';

Answer 1

要使其工作，您必须在图像的src属性中放置一个字符串，不能放置标记（或SVG在您的情况下）

src:是一个反映src HTML属性的DOMString，包含图像的完整URL，包括基URI。

请参阅Image()文档here

那么你最好的选择就是使用data url syntax，
这是一个有效的例子：

var svg = '<svg width="166" height="195"><g trantsform="translate(86, ...></svg>'
var serializer = new XMLSerializer()
var data = serializer.serializeToString(svg)
yourImageElement.src = "data:image/svg+xml;charset=utf-8," + data

我希望它会对你有所帮助！

Img src在设置为SVG时正在编码

1 个答案: