34

次の SVG グラフィックがあります。

<svg version="1.1" id="diagram" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="375px" height="150px">
    <path d="M45,11.5H33.333c0.735-1.159,1.167-2.528,1.167-4C34.5,3.364,31.136,0,27,0s-7.5,3.364-7.5,7.5c0,1.472,0.432,2.841,1.167,4H9l-9,32h54L45,11.5z M22.5,7.5C22.5,5.019,24.519,3,27,3s4.5,2.019,4.5,4.5c0,1.752-1.017,3.257-2.481,4h-4.037 C23.517,10.757,22.5,9.252,22.5,7.5z" id="control"/>
</svg>

このオブジェクトのスケールをプログラムで変更したいのですが、中心点からスケールしたいです。

私は<g>タグの周りにそれをラップしようとしました

<g transform="translate(0,0)">
<path x="0" y="0" id="control" transform="scale(2)">...</path>
</g>

しかし、これはうまくいかないようです。私はオンラインで見てきましたが、パスをスケーリングするにはパスマトリックスを操作する必要があるようです。これは恐ろしく難しいようです。厄介なことに、additive="sum" プロパティを使用して簡単にスケーリングできますが、この例では変換アニメーションを使用していません。

誰でも私を助けることができますか？

編集：これをうまく機能させることができました。同じことで立ち往生している人のために、プログラムでそれを行う良い方法があります：

var elem = document.getElementById("control");
var bBox = elem.getBBox();
var scaleX = 2;
var scaleY = 2;
$(elem).attr("transform", "scale("+scaleX+", "+scaleY+") translate("+-bBox.width/2+","+-bBox.height/2+") ");
4

3 に答える 3

50

中心点の座標がわかっている場合は、平行移動とスケーリングを 1 つの変換で組み合わせることができます。換算は次のように計算されます(1 - scale) * currentPosition。

中心が(10, 20)あり、スケーリングしている場合は、 =で3変換します。(1 - 3)*10, (1 - 3)*20(-20, -40)

<g transform="translate(-20, -40) scale(3)">
    <path d="M45,11.5H33.333c0.735-1.159,1.167-2.528,1.167-4C34.5,3.364,31.136,0,27,0s-7.5,3.364-7.5,7.5c0,1.472,0.432,2.841,1.167,4H9l-9,32h54L45,11.5z M22.5,7.5C22.5,5.019,24.519,3,27,3s4.5,2.019,4.5,4.5c0,1.752-1.017,3.257-2.481,4h-4.037 C23.517,10.757,22.5,9.252,22.5,7.5z" id="control"/>
</g>

変換は、宣言された順序とは逆の順序で適用されるため、上記の例では、scaleが最初に実行され、次にtranslate. スケーリングは座標に影響するため、ここでの変換はスケーリングされた座標になります。

を使用してプログラムで中心点を計算できますelement.getBBox()。

于 2012-07-26T14:20:45.047 に答える
2

以前にaetheriaによって提供された回答は素晴らしいです。同様に注意すべきもう 1 つの点があります。ストローク幅です。これにより、オブジェクトがスケーリングされてもアウトラインが同じ幅のままになります。使用法：

stroke-width: (1/scaling-factor)

したがって、スケーリングがたとえば 2 の場合、次のようになります。

stroke-width: (0.5)

transform: translate(...) scale(2)注: aetheria で言及されている を見逃してはいけません。

于 2016-01-22T00:38:38.530 に答える