使用变换原点缩放 SVG 元素答案

【问题标题】：Scale an SVG element using a transform origin使用变换原点缩放 SVG 元素
【发布时间】：2018-01-26 12:15:47
【问题描述】：

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

我想在定义特定的变换原点的同时使 sn-p 以上比例中的红色三角形更大。使用 SVG 中的 rotate 属性，我们可以做到这一点：

transform="rotate( -30 50 50 )"

第一个值：-30 逆时针旋转元素。 50 50 定义了变换原点（分别为 x 和 y ）。我可以用scale 做到这一点吗？我希望我的红色三角形放大但保持原点居中。

注意： 我知道 CSS 中的 transform-origin，但我假设 CSS 使用的坐标系是相对于整个网页的，或者它通常是最接近的定位元素是...我想用 SVG 坐标术语来定义它，就像使用 rotate 属性一样。

【问题讨论】：

标签： html css svg transform scale

【解决方案1】：

你可以翻译 --> 缩放 --> translate_back 例如

<g transform="translate( 0 12.5 ) translate( 50 50) scale( 1.5 ) translate( -50 -50)">

解释：假设您想使用 (50 50) 作为比例原点，这将首先将您的形状平移 (-50, -50)，以便您想要的比例原点现在位于 (0, 0)。然后你缩放，最后你反转平移把形状放回原来的位置。

【讨论】：

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

【解决方案2】：

我认为这可能是您正在寻找的：

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

这将随着 SVG 元素边界框左侧的参考点进行缩放。

【讨论】：