是否可以在SVG中按指定方向縮放矩形？

Question

這是我的SVG代碼：

<svg> 
 
<path transform="matrix(1.00 0.00 0.00 1.00 0.72 0.60)" fill="none" stroke="#000000" d="M 0.00 0.00 L 0.00 78.87" /> 
 
<path transform="matrix(1.00 0.00 0.00 1.00 79.11 0.48)" fill="none" stroke="#000000" d="M 0.00 0.00 L 0.24 78.87" /> 
 
<path transform="matrix(1.00 0.00 0.00 1.00 0.60 79.35)" fill="none" stroke="#000000" d="M 0.00 0.00 L 78.75 0.00"/> 
 
<path transform="matrix(1.00 0.00 0.00 1.00 39.38 11.85)" fill="none" stroke="#000000" d="M 0.00 0.00 L 0.24 67.02"/> 
 
<rect width="77.9122" height="38.4176" transform="matrix(1.00 0.00 0.00 1.00 1.08 40.33)" fill="#000000" stroke="#000000"> 
 
</rect> 
 
</svg>

矩形開始於（1.08，40.33） - 如在 '變換' 屬性指定。

當我使用以下 'animateTransform' 標籤動畫矩形，我獲得下面的圖片：

<svg> 
 
<path transform="matrix(1.00 0.00 0.00 1.00 0.72 0.60)" fill="none" stroke="#000000" d="M 0.00 0.00 L 0.00 78.87" /> 
 
<path transform="matrix(1.00 0.00 0.00 1.00 79.11 0.48)" fill="none" stroke="#000000" d="M 0.00 0.00 L 0.24 78.87" /> 
 
<path transform="matrix(1.00 0.00 0.00 1.00 0.60 79.35)" fill="none" stroke="#000000" d="M 0.00 0.00 L 78.75 0.00"/> 
 
<path transform="matrix(1.00 0.00 0.00 1.00 39.38 11.85)" fill="none" stroke="#000000" d="M 0.00 0.00 L 0.24 67.02"/> 
 
<rect width="77.9122" height="38.4176" transform="matrix(1.00 0.00 0.00 1.00 1.08 40.33)" fill="#000000" stroke="#000000"> 
 
<animateTransform attributeName="transform" type="scale" additive="sum" from="1 1" to="1 0.5" begin="0s" dur="3s"/> </rect> 
 
</svg>

enter image description here

，但我想向上擴展的矩形， （即）由此產生的縮放圖像如下：enter image description here

Answer 1

您可以在縮放它的同時翻譯矩形。像這樣...

<svg> 
 
<path transform="matrix(1.00 0.00 0.00 1.00 0.72 0.60)" fill="none" stroke="#000000" d="M 0.00 0.00 L 0.00 78.87" /> 
 
<path transform="matrix(1.00 0.00 0.00 1.00 79.11 0.48)" fill="none" stroke="#000000" d="M 0.00 0.00 L 0.24 78.87" /> 
 
<path transform="matrix(1.00 0.00 0.00 1.00 0.60 79.35)" fill="none" stroke="#000000" d="M 0.00 0.00 L 78.75 0.00"/> 
 
<path transform="matrix(1.00 0.00 0.00 1.00 39.38 11.85)" fill="none" stroke="#000000" d="M 0.00 0.00 L 0.24 67.02"/> 
 
<rect width="77.9122" height="38.4176" transform="matrix(1.00 0.00 0.00 1.00 1.08 40.33)" fill="#000000" stroke="#000000"> 
 
<animateTransform attributeName="transform" type="scale" additive="sum" from="1 1" to="1 1.5" begin="0s" dur="3s"/> 
 
<animateTransform attributeName="transform" type="translate" additive="sum" from="0 0" to="0 -13" begin="0s" dur="3s"/> 
 
</rect> 
 
</svg>