Question

パス付きのXMLまたはJSONが得られ、SVGイメージを再作成する必要があります。

私はそれに<g transform="scale(1 -1)" fill='#aaa' stroke='black' stroke-width='5' ></g>を追加し、この要素に私はそれにすべてのパス（例えば<path d= ... />）を追加

、空

<svg xmlns='http://www.w3.org/2000/svg' version='1.1'></svg>を作成します。

最終的に私はSVGイメージを取得しますが、SVG要素のviewBox属性を設定していないため、イメージが正しく表示されません。ブラウザで開くと、その一部がフルサイズで表示されます。

パスからの値からviewBoxを計算することはできますか？

ありがとうございました！

Answer 1

OKはので、私はそれを次のように解決：

1. は、最大と最小は見つかりパス文字列からすべての文字を削除し、

   var values = pathValue.split('L').join(' ').split('M').join(' ').split('z').join('').split(' ');

2. とそれから配列を作りましたそれらの値：

   var max = Math.max.apply(Math, values);

   var min = Math.min.apply(Math, values);

3. は、ビューボックスを設定します。

   ビューボックス=最大最小最大最大

これは私の場合には、優れ働いていました。それが他の人にも役立つことを願っています。

Answer 2

マーティン・スパの答えに似ていますが、最大のビューポートエリアを取得行うには良い方法はgetBBox機能を使用している：

var clientrect = path.getBBox(); 
var viewBox = clientrect.x+' '+clientrect.y+' '+clientrect.width+' '+clientrect.height; 

あなたは、これらの座標にビューボックスを設定することができます。

n.b.私はあなたがSVGを再レンダリングする必要があるかもしれないので、それがレンダリングされた後にSVGのビューボックスを変更することができると思う。