title: Scale an SVG element using a transform origin
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en-US"&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css"&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
      &lt;iframe src="https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQr"&gt;&lt;/iframe&gt;
      
      &lt;div class="wrp"&gt;  
        &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
             width="100" height="100"
             class="canvas"
        &gt; 
          &lt;defs&gt;   
            &lt;style type="text/css"&gt; 
              polygon { fill: none; stroke-width: 0.5; stroke: #f00; }
            &lt;/style&gt;       
          &lt;/defs&gt;
          
          &lt;g transform="translate( 0 12.5 ) scale( 1 )"&gt;
          
            &lt;polygon 
              points="
                75,6.7
                75,93.3
                0,50
              " 
              transform="rotate( -30 50 50 )"
            /&gt;
            
          &lt;/g&gt;   
          
        &lt;/svg&gt;
      &lt;/div&gt;
      &lt;script src="origin.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to make the red triangle in the snippet above scale larger while defining a specific transform origin. With the rotate attribute in SVG we can do this:</p>
  
  <pre><code>transform="rotate( -30 50 50 )"
  </code></pre>
  
  <p>The first value: <code>-30</code> rotates element counter-clockwise. The <code>50 50</code> defines the transform origin ( x and y respectively ). Can I do this with <code>scale</code>?. I want my red triangle to scale up but keep it's origin centered.</p>
  
  <p><strong>Note:</strong> <em>I know about <code>transform-origin</code> in CSS but I'm assuming the coordinate system that CSS uses will be relative to the whole web page or it's closest positioned element like it usually is... I want to define it in SVG coordinate terms like done with the rotate property.</em></p>