SVG Text属性加倍 - HTML2CANVAS [英] SVG Text attribute is doubling - HTML2CANVAS

问题描述

这是mycode和 JSFiddle 的链接。

Here is mycode and link to JSFiddle.

HTML

<input type="button" id="export" value="Export"/>
    <svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

<text x="162" text-anchor="middle" class="highcharts-title" zindex="4" style="color:#333333;font-size:18px;font-weight:normal;text-decoration:normal;font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif;visibility:visible;fill:#333333;width:260px;" y="25">Inventory</text>
</svg>

JS

$(document).ready(function(){
        $('#export').on('click', function() {       
            html2canvas(document.body, {
                onrendered: function(canvas) {
                    document.body.appendChild(canvas);
                },
            });
        });
});

我正在尝试使用html2canvas库将svg转换为canvas图像。在示例中，我只是将画布图像附加到输出。您可以清楚地看到文本成倍增加。任何人都可以建议我解决这个问题。

I'm trying to convert an svg to canvas image using html2canvas library. In the example I'm just appending the canvas image to the output. You can clearly see that the text is multiplied. Could anyone advice me to solve this issue.

希望我的问题很明确。在此先感谢。

Hope my question is clear. Thanks in advance.

推荐答案

由问题生成文本元素两次。

应用此修补程序进行修复，直到此拉取请求包含在html2canvas版本中：

Apply this patch to fix until this pull request is incorporated in a html2canvas release:

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

这篇关于SVG Text属性加倍 - HTML2CANVAS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！