取消分组后，将组上的变换应用于每个元素

我们正在从头开始创建SVG编辑器的项目（我们不能使用任何外部库） - 并且我们遇到了麻烦。取消分组后，将组上的变换应用于每个元素

我们需要创建一个工具来对形状进行分组，我们已经设法做到这一点，并且我们还可以在组上使用我们所有的工具（缩放/平移/旋转）。但是，我们坚持要尝试取消组合。我认为这两个选项要么是从组元素中进行变换，然后以某种方式将它们应用到每个元素，要么忽略变换组并仅从一开始就将变换应用到每个元素。

有没有人与此合作或有任何开始的想法可能有帮助？因为变换不是可交换的，例如，旋转是针对每个形状的不同相对点，所以我们很困难。

来源

2016-12-27 Zack Stewart

你可以看看SVG的编辑一样。 “ –

”旋转是针对每种形状的不同相对点“... 这是什么意思？在svg transfroms中没有相关点... –

以嵌套方式转换工作。因此，要取消组合并将组转换应用于子组，需要做的就是将父组的转换预先添加到子组的转换中。

所以下面两个SVGs是等价的：

svg { 
 
    border: solid 1px blue; 
 
}

<svg> 
 
    <g transform="translate(100,30)"> 
 
    <rect width="100" height="80" transform="rotate(30, 50,40)"/> 
 
    </g> 
 
</svg> 
 

 
<br/> 
 

 
<svg> 
 
    <rect width="100" height="80" transform="translate(100,30) rotate(30, 50,40)"/> 
 
</svg>

来源

2016-12-28 08:32:02

取消分组后，将组上的变换应用于每个元素

回答

相关问题