Html2canvas: SVG 中的文本标签重叠（重复/加倍）

创建于 2015-02-19 · 24评论 · 资料来源: niklasvh/html2canvas

（对不起，我英语不好）

你好，
我正在使用这个很棒的脚本来渲染 SVG 标签
当我将 SVG 中的文本标签渲染到画布时，有一些文本重叠
文本标签被处理为文本节点和 SVG
您可以使用转换属性轻松看到
2015-02-19 15 08 29_2
这是示例代码（使用 html2canvas 0.5.0-alpha2）

<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/html2canvas.js"></script>
</head>
<body>
  <svg width="100" height="100">
    <g transform="translate(20,20)">
      <text dy=".45em" y="10" x="0" dx="-.8em" transform="translate(0,0) rotate(-70)" style="font-size:12px;">Text</text>
    </g>
  </svg>
  <script>
    $(document).ready(function() {
      html2canvas(document.body, {
        onrendered: function(canvas) {
          document.body.appendChild(canvas);
        }
      });
    })
  </script>
</body>
</html

这是我的快速更改

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

我希望这个能帮上忙

Needs More Information

资料来源

hyojin

👍4 ❤2

最有用的评论

@hyojin
在 IE 上对其进行测试后，您的修复不起作用，因为parentElement属性未填充到当前节点上。使用parentNode代替！无论如何，它会更清楚，因为我们进入了NodeParser并且它谈论了节点。

否则，改为测试标签名称，我更改我的代码以测试parentNode的实例，并仅在 parentNode 不是SVGElement时才处理当前节点具有TextContainer SVGElement .

它适用于 chrome 和 ie11。在 Firefox 上，由于空白画布错误，我无法对其进行测试！

我的代码

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

我希望这有帮助。

ncoquelet 于 2015-08-06

❤2

所有24条评论

谢谢#孝真。这对我有帮助。

josnabattula 于 2015-03-17

谢谢，帮了我很多！

natee 于 2015-07-23

感谢您的修复！

您还可以检查 tspan tagName ：
node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" && node.parentElement.tagName !== "tspan"

ncoquelet 于 2015-08-04

👍1

@ncoquelet我更新了我的代码。谢谢！

hyojin 于 2015-08-05

否则，改为测试标签名称，我更改我的代码以测试parentNode的实例，并仅在 parentNode 不是SVGElement时才处理当前节点具有TextContainer SVGElement .

它适用于 chrome 和 ie11。在 Firefox 上，由于空白画布错误，我无法对其进行测试！

我的代码

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

我希望这有帮助。

ncoquelet 于 2015-08-06

❤2

修复我的 firefox 问题，也适用于 ff :-)

ncoquelet 于 2015-08-06

更清晰！
我还检查了它在 ff 上运行良好。
我合并了您的修复程序并更新了拉取请求。谢谢：）

hyojin 于 2015-08-12

👍1

@hyojin @ncoquelet感谢您对此的调查和修复。前几天我遇到了完全相同的问题，我不完全确定是什么导致了它。