是否可以在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>

enter image description here

但我想向上缩放矩形，（即）得到的缩放图像如下：enter image description here

Answer 1

您可以在缩放时同时翻译矩形。像这样......

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;