使用变换原点缩放SVG元素

Question

使用变换原点缩放SVG元素

5

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

transform="rotate( -30 50 50 )"

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

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

- basement

2个回答

0

我认为这可能是你正在寻找的内容：

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

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

- Bigman74066

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shahrivar · Accepted Answer

你可以进行翻译 --> 缩放 --> 再次翻译回来例如：

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

假设您想将比例尺的原点设置为 (50,50)，那么此时首先需要将形状向左上平移 (-50,-50) 以使所需的比例尺原点现在位于 (0,0)。然后进行缩放操作，最后再反转平移操作以将形状还原到原来的位置。