<html lang="en-US">
<head>
<link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css">
</head>
<body>
<iframe src="https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQr"></iframe>
<div class="wrp">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
width="100" height="100"
class="canvas"
>
<defs>
<style type="text/css">
polygon { fill: none; stroke-width: 0.5; stroke: #f00; }
</style>
</defs>
<g transform="translate( 0 12.5 ) scale( 1 )">
<polygon
points="
75,6.7
75,93.3
0,50
"
transform="rotate( -30 50 50 )"
/>
</g>
</svg>
</div>
<script src="origin.js"></script>
</body>
</html>我想在定义特定的转换原点时使上述代码段中的红色三角形更大。使用 SVG 中的旋转属性，我们可以做到这一点：
transform="rotate( -30 50 50 )"
第一个值：-30逆时针旋转元素。50 50定义了变换原点(分别为 x 和 y(。我可以用scale做到这一点吗？我希望我的红色三角形放大，但保持原点居中。
注意：我知道 CSS 中的transform-origin，但我假设 CSS 使用的坐标系将相对于整个网页或它最接近定位的元素，就像通常一样......我想用 SVG 坐标术语定义它，就像使用 rotate 属性一样。
你可以翻译 --> 比例 --> translate_back 例如
<g transform="translate( 0 12.5 ) translate( 50 50) scale( 1.5 ) translate( -50 -50)">
说明：假设您想使用 (50 50( 作为比例原点，这将首先将您的形状平移 (-50， -50(，以便您所需的比例原点现在位于 (0， 0(。然后你缩放，最后你反转平移，把形状放回原来的位置。
我认为这可能是您要查找的：
<style>
#<Some id> {
transform-box:fill-box; transform-origin: left; transform:scale(0.3,1);
fill:green;
}
</style>
这将与 SVG 元素的浮雕框左侧的参考点一起缩放。