7

パスのみを含む XML または JSON を取得し、SVG イメージを再作成する必要があります。

私は空を作成します

<svg xmlns='http://www.w3.org/2000/svg' version='1.1'></svg>、

そこに a を追加し<g transform="scale(1 -1)" fill='#aaa' stroke='black' stroke-width='5' ></g>、この要素にすべてのパスを追加します (例: <path d=... />)。

最後にSVG画像を取得しますが、SVG要素にviewBox属性を設定していないため、画像が正しく表示されません.ブラウザで開くと、その一部がフルサイズで表示されます.

パスの値からviewBoxを計算できますか?

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

4

2 に答える 2

15

Martin Spa の回答に似ていますが、最大ビューポート領域を取得するより良い方法は、getBBox 関数を使用することです。

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

次に、ビューボックスをこれらの座標に設定できます。

nb レンダリング後に svg のビューボックスを変更できると思うので、svg を再レンダリングする必要があるかもしれません。

于 2012-04-21T13:47:10.700 に答える
3

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. viewBoxを設定します。

    viewBox = max min max max

これは私の場合はうまくいきました。それが他の誰かにも役立つことを願っています。

于 2012-04-06T13:19:10.907 に答える