是否可以在 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( 开始 - 如"transform"属性中指定。

当我使用以下"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>

在此处输入图像描述

但是我想向上缩放矩形，(即(生成的缩放图像如下所示：在此处输入图像描述

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>