SVG Text属性加倍 - HTML2CANVAS

本文介绍了SVG Text属性加倍 - HTML2CANVAS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是mycode和的链接。

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>

$(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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

HTML2canvas