秤利用变换原点

<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元素。随着SVG的旋转属性，我们可以这样做：

transform="rotate(-30 50 50)"

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

注：我知道CSS约transform-origin，但我假设的坐标系统，CSS用途将是相对于整个网页或它的位置最靠近元素就像它通常是...我想定义它在SVG坐标中就像用rotate属性完成的一样。

来源

2017-08-17 basement

您可以翻译 - >缩放 - > translate_back 例如，

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

说明：假设你想用（50 50）为标尺原点，这将首先通过翻译你的形状（-50，-50），以便在所需的规模起源现在将在（0 ，0）。然后你缩放，最后你翻译翻译，把形状放回原来的位置。

来源

2017-08-17 22:53:55 Shahrivar

这太好了。有用。谢谢。 – basement

秤利用变换原点

回答

相关问题