Html2canvas: SVGのテキストタグのオーバーラップ（重複/倍増）

作成日 2015年02月19日 · 24コメント · ソース: niklasvh/html2canvas

（申し訳ありませんが、私は英語が苦手です）

こんにちは、
この素晴らしいスクリプトを使用してSVGタグをレンダリングしています
SVGのテキストタグをキャンバスにレンダリングすると、テキストが重なっています
テキストタグはテキストノードおよびSVGとして処理されます
あなたはそれをtransformプロパティで簡単に見ることができます
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

最も参考になるコメント

@ヒョジン
IEでテストした後、 parentElementプロパティが現在のノードに入力されていないため、修正は機能しません。代わりにparentNode使用してください！いずれにせよ、 NodeParserに入ってノードについて話しているので、より明確になります。

それ以外の場合は、代わりにタグ名でテストし、コードを変更してparentNodeのインスタンスをテストし、parentNodeがSVGElementない場合にのみ、現在のノードにTextContainerがあることを処理します。

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日

修正していただきありがとうございます。

tspantagNameを確認することもできます。
node.nodeType === Node.TEXT_NODE && node.parentElement.tagName！== "text" && node.parentElement.tagName！== "tspan"

ncoquelet 2015年08月04日

👍1

@ncoqueletコードを更新しました。ありがとう！

hyojin 2015年08月05日

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これと修正の調査に感謝します。先日、まったく同じ問題が発生しましたが、何が原因なのか完全にはわかりませんでした。