秤利用變換原點

<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

秤利用變換原點

回答

相關問題