gpt4 book ai didi

html - 使用变换原点缩放 SVG 元素

转载 作者:可可西里 更新时间:2023-11-01 13:21:52 26 4
gpt4 key购买 nike

<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>

我想在定义特定变换原点时放大上面代码片段中的红色三 Angular 形。使用 SVG 中的旋转属性,我们可以这样做:

transform="rotate( -30 50 50 )"

第一个值:-30 逆时针旋转元素。 50 50 定义变换原点(分别为 x 和 y)。我可以使用 scale 来做到这一点吗?我希望我的红色三 Angular 形按比例放大,但保持其原点居中。

注意: 我知道 CSS 中的 transform-origin 但我假设 CSS 使用的坐标系是相对于整个网页或它是最接近定位的元素,就像它通常那样...我想用 SVG 坐标术语来定义它,就像使用 rotate 属性所做的那样。

最佳答案

你可以翻译 --> scale --> translate_back例如

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

说明:假设您想使用 (50 50) 作为比例原点,这将首先将您的形状平移 (-50, -50),这样您想要的比例原点现在将位于 (0, 0)。然后缩放,最后反转平移以将形状放回原来的位置。

关于html - 使用变换原点缩放 SVG 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45745988/

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