Html 使用变换原点缩放SVG元素

多边形{填充：无；笔划宽度：0.5；笔划：#f00；}

您可以翻译-->缩放-->回译 e、 g

---

说明：假设要使用（50-50）作为缩放原点，这将首先将形状平移（-50，-50），以便所需的缩放原点现在位于（0，0）。然后缩放，最后反转平移，将形状放回原处

我想这可能就是你想要的：

<style>
#<Some id> { 
    transform-box:fill-box; transform-origin: left;  transform:scale(0.3,1);
    fill:green;
}
</style>

# { 
变换框：填充框；变换原点：左侧；变换：比例（0.3,1）；
填充：绿色；
}

---

这将使用SVG元素的bouding框左侧的referencepoint进行缩放。

这是一种奇怪的行为。为什么x和y坐标也按比例缩放？在我看来，刻度的默认行为应该只刻度宽度和高度，而不包括x和y。一点也不。实际上，这是几乎所有图形系统（2d和3d）的默认行为，否则缩放后整个场景合成将被破坏。这个例子可能会有所帮助：假设你在一个场景中有两个并排的矩形（例如，谷歌地图中的两个邻居的房子），并且你缩放场景（放大/缩小地图），如果只缩放了宽度和高度，而不是x和y，如果缩放>1，矩形将重叠；如果缩放<1，矩形将分离。

<style>
#<Some id> { 
    transform-box:fill-box; transform-origin: left;  transform:scale(0.3,1);
    fill:green;
}
</style>