4

SVGからPNGを作成することに興味があります。私はで与えられたコードに従いました：

https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

ただし、CSSのスタイルが原因で、画像が正しく表示されません。次の説明に従って、ローカルCSSファイルを作成し、SVGにインポートしました。

埋め込まれたSVGにスタイルを適用するにはどうすればよいですか？

しかし、スタイルシートを使用しているようには見えません。なぜこのエラーが発生するのか考えてみてください。

ありがとう。

4

3 に答える 3

0

html2canvasを使用して、任意の dom 要素 (svg 要素を含む) からキャンバスを生成できます。

ただし、スタイルシートで定義された svg 要素のスタイル定義は、生成されたキャンバスには適用されません。これは、html2canvas を呼び出す前にスタイル定義を svg 要素に追加することで修正できます。

この記事に触発されて、私はこれを作成しました：

function generateStyleDefs(svgDomElement) {
  var styleDefs = "";
  var sheets = document.styleSheets;
  for (var i = 0; i < sheets.length; i++) {
    var rules = sheets[i].cssRules;
    for (var j = 0; j < rules.length; j++) {
      var rule = rules[j];
      if (rule.style) {
        var selectorText = rule.selectorText;
        var elems = svgDomElement.querySelectorAll(selectorText);

        if (elems.length) {
          styleDefs += selectorText + " { " + rule.style.cssText + " }\n";
        }
      }
    }
  }

  var s = document.createElement('style');
  s.setAttribute('type', 'text/css');
  s.innerHTML = "<![CDATA[\n" + styleDefs + "\n]]>";
  //somehow cdata section doesn't always work; you could use this instead:
  //s.innerHTML = styleDefs;

  var defs = document.createElement('defs');
  defs.appendChild(s);
  svgDomElement.insertBefore(defs, svgDomElement.firstChild);
}

// generate style definitions on the svg element(s)
generateStyleDefs(document.getElementById('svgElementId'));

// after generating the style defintions, call html2canvas
html2canvas(document.getElementById('idOfElement')).then(function(canvas) {
  document.body.appendChild(canvas);
});
于 2015-08-11T18:45:34.310 に答える