Question

<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中的rotate属性，我们可以这样做：

transform="rotate( -30 50 50 )"

第一个值：-30逆时针旋转元素。 50 50定义变换原点（分别为x和y）。我可以使用scale执行此操作吗？我希望我的红色三角形能够向上扩展但保持原点居中。

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

Answer 1

你可以翻译 - ＆gt;规模 - ＆gt; translate_back e.g。

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

说明：假设您想使用（50 50）作为比例原点，这将首先将您的形状转换为（-50，-50），以便您所需的比例原点现在为（0,0）。然后你缩放，最后你翻转翻译，把形状放回原处。

Answer 2

我认为这可能是您要寻找的东西

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

这将与SVG元素的绑定框左侧的参考点成比例。

使用变换原点缩放SVG元素

2 个答案: