0

次のSVG文字列をJSで画像に変換しようとしています:

<svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-line" id="test-chart" style="width: 100%; height: 100%;"><g class="ct-grids"><line y1="165" y2="165" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line><line y1="115" y2="115" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line><line y1="65" y2="65" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line><line y1="15" y2="15" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line></g><g><g series-name="performance" class="ct-series ct-series-a"><path d="M50,165C53.57,165,403.415,155,406.984,155" class="ct-line"></path></g><g series-name="bemchmark" class="ct-series ct-series-b"><path d="M50,165C53.57,165,403.415,45,406.984,45" class="ct-line"></path></g></g><g class="ct-labels"><foreignObject style="overflow: visible;" x="40" y="170" width="356.984375" height="20"><span class="lineChartLabel ct-horizontal ct-end" style="width: 357px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jan</span></foreignObject><foreignObject style="overflow: visible;" x="396.984375" y="170" width="30" height="20"><span class="lineChartLabel ct-horizontal ct-end" style="width: 30px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Feb</span></foreignObject><foreignObject style="overflow: visible;" y="115" x="10" height="50" width="30"><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">0%</span></foreignObject><foreignObject style="overflow: visible;" y="65" x="10" height="50" width="30"><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">0.5%</span></foreignObject><foreignObject style="overflow: visible;" y="15" x="10" height="50" width="30"><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">1%</span></foreignObject><foreignObject style="overflow: visible;" y="-15" x="10" height="30" width="30"><span class="lineChartLabel ct-vertical ct-start" style="height: 30px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">1.5%</span></foreignObject></g></svg>

たとえば、 simg.jsやこのスクリプトなど、見つけられるものはすべて試しました。

var svg  = document.getElementById('test-chart'),
xml  = new XMLSerializer().serializeToString(svg),
data = "data:image/svg+xml;base64," + btoa(xml),
img  = new Image();
img.setAttribute('src', data)
document.body.appendChild(img)

しかし、生成された画像は常に「壊れた」ものです。つまり、まったく表示されません。単純な SVG 文字列を使用した同じスクリプトは問題なく機能します。

chartist.js によって生成され、ブラウザーに適切に表示される文字列の何が問題なのか正確にはわかりませんが、原因は<foreignObject>要素にあるようです。それらを削除した場合、問題なく動作します。

そのSVG文字列をJSで画像に変換する方法はありますか?

4

2 に答える 2

2

あなたの問題は、に含まれる要素にxmlns設定された属性が間違っていることです。現在、それらはデフォルトの XML 名前空間に設定されています。含めている要素が xhtml 名前空間に属しているためです。<span><foreignObjects>http://www.w3.org/2000/xmlns/http://www.w3.org/1999/xhtml

私はあなたがそれを自分で設定したのではなく、あなたが使用しているライブラリがこれを行ったと信じています。

作成者にイシュー レポートを残すこともできますが、IE<11 はこの<foreignObject>タグをサポートしていないことに注意してください。また、現在の Safari には、その<img>ようなタグを表すタグにいくつかのセキュリティ制限があることに注意してください (キャンバスに再度描画したい場合は、これを汚します）。したがって、私の個人的な意見では、このタグの使用はまだ推奨されていません。

また、他の人が言ったように、タグに正しく表示されるように、ルートに絶対属性widthと属性を設定する必要があることに注意してください。height<svg><img>

最後に、文字列を base64 でエンコードする必要はありません'data:image/svg+xml; charset=utf8, '。dataURI ヘッダーは、IE9 から Edge までのすべてのブラウザーでサポートされている唯一のヘッダーです。

マークアップは次のようになります。

var svgData = (new XMLSerializer()).serializeToString(test)
var dataURI = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData);
var img = new Image();
img.src = dataURI;
document.body.appendChild(img);
<h3>
svg version
</h3>

<svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="500" height="200" class="ct-chart-line" id="test" style="width: 100%; height: 100%;">
  <g class="ct-grids">
    <line y1="165" y2="165" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line>
    <line y1="115" y2="115" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line>
    <line y1="65" y2="65" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line>
    <line y1="15" y2="15" x1="50" x2="406.984375" class="ct-grid ct-vertical"></line>
  </g>
  <g>
    <g series-name="performance" class="ct-series ct-series-a">
      <path d="M50,165C53.57,165,403.415,155,406.984,155" class="ct-line"></path>
    </g>
    <g series-name="bemchmark" class="ct-series ct-series-b">
      <path d="M50,165C53.57,165,403.415,45,406.984,45" class="ct-line"></path>
    </g>
  </g>
  <g class="ct-labels">
    <foreignObject style="overflow: visible;" x="40" y="170" width="356.984375" height="20" requiredExtensions="http://www.w3.org/1999/xhtml"><span class="lineChartLabel ct-horizontal ct-end" style="width: 357px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">Jan</span></foreignObject>
    <foreignObject style="overflow: visible;" x="396.984375"
    y="170" width="30" height="20"><span class="lineChartLabel ct-horizontal ct-end" style="width: 30px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">Feb</span></foreignObject>
    <foreignObject style="overflow: visible;" y="115" x="10" height="50" width="30" ><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">0%</span></foreignObject>
    <foreignObject style="overflow: visible;" y="65" x="10" height="50" width="30" ><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">0.5%</span></foreignObject>
    <foreignObject style="overflow: visible;" y="15" x="10" height="50" width="30" ><span class="lineChartLabel ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">1%</span></foreignObject>
    <foreignObject style="overflow: visible;" y="-15" x="10" height="30" width="30" ><span class="lineChartLabel ct-vertical ct-start" style="height: 30px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">1.5%</span></foreignObject>
  </g>
</svg>
<h3>
img version
</h3>

そのため、以前に問題を修正できない場合は、要素に含まれるすべての HTML 要素をループし<foreignObject>て手動で修正する必要があります ( HTMLelem.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'))

于 2016-04-11T01:19:29.670 に答える
-1

ファブリック js を使用できます: http://fabricjs.com/

var addShape = function(shapeName) {

fabric.loadSVGFromURL('../assets/' + shapeName + '.svg', function(objects, options) {
  var loadedObject = fabric.util.groupSVGElements(objects, options);
   loadedObject.set({
     left: 0,
     top:0,
     angle:0
   }).setCoords();
  canvas.add(loadedObject);
  window.open(canvas.toDataURL('png'));
  });
};
于 2016-04-10T19:42:08.420 に答える