gpt4 book ai didi

svg:当外部容器旋转时停止内部组旋转

转载 作者:行者123 更新时间:2023-12-04 19:38:35 24 4
gpt4 key购买 nike

我面临一个案例,我有一个容器 svg 元素和一组内部子元素:

<g transform="translate(-157.82326597222223, 381.00000000000006),  rotate(180)">
<path d="M 0 10 L 600 10 L 680 63.5 L 600 117 L 0 117 Z"></path>
<g transform="translate(180, 35.099999999999994)">
<foreignObject width="240" height="46.800000000000004">
<body>
<div style="font-size: 19.400000000000002px; text-align: center;">xxxx
<br>2<br>
</div>
</body>
</foreignObject>
</g>
</g>

问题是,当我旋转主 g 时,所有子元素也被旋转,这当然是合理的。我只是想知道是否有办法防止某些内部子元素被旋转。所以在我的例子中,我不希望 foreignObject 被旋转,因为它包含一些文本

最佳答案

svg 中没有绝对定位的概念,对象坐标系统始终基于其父项。所以在这个例子中,当你变换和旋转 g 对象时,它设置了一个新的坐标系,它的原点从文档原点偏移 (-157.82326597222223, 381.00000000000006) 并旋转了 180 度,这个新坐标系由它的所有 child 。

所以第一个<g>下面的对象并不是真的旋转,与绘制它们的坐标系相比,与全局坐标系相比旋转了多少。

关于svg:当外部容器旋转时停止内部组旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16649051/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com