gpt4 book ai didi

svg - 如何通过将固定位置保持在svg中来缩放元素

转载 作者:行者123 更新时间:2023-12-04 04:59:46 26 4
gpt4 key购买 nike

我想将以下元素缩放到固定位置。

<path id="container_svg_rectsymbol1" fill="red" stroke-width="1" stroke="Gray" d="M 73.1111111111111 -71.75 L 83.1111111111111 -71.75 L 83.1111111111111 -61.75 L 73.1111111111111 -61.75 L 73.1111111111111 -71.75" transform="scale(1)"/>

开始缩放时,它会从一个位置移动到另一位置。我不想移动对象,我只想扩大对象的大小。

我已经提到了以下链接。

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System

固定缩放怎么办?

我想为元素设置动画,即在固定位置放大尺寸。我已经按照以下方式实现。但这会使元素从原点移开。请引用下面的代码。
 var box = element.getBBox();
var scaleVal=null, x=null, y=null;
$(element).animate(
{
scale: 1,
centerX:box.x+(4*transX),
centerY:box.y+(4*transY)
},
{
duration: 4000,
step: function(now,fx) {
if (fx.prop == "scale") {
scaleVal = now;
} else if (fx.prop == "centerX") {
x = now;
} else if (fx.prop == "centerY") {
y = now;
}

if(!sf.util.isNullOrUndefined(scaleVal) && !sf.util.isNullOrUndefined(x) && !sf.util.isNullOrUndefined(y)) {
$(element).attr("transform", "translate("+(-x*(scaleVal-1))+","+(-y*(scaleVal-1))+")scale(" + scaleVal + ")");
}
}
)

请引用以下链接以缩放中心点。

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System

但它仍然从原点开始,并扩大了元素。

谢谢,

西瓦

最佳答案

缩放比例以原点(0,0)为中心,因此,如果您的形状不在(0,0)上为中心,则它似乎会移动。要解决此问题,请先平移您的形状,使其以原点为中心,然后对其进行缩放,然后将其平移回原位:
transform="translate(78.11 -66.75) scale(2) translate(-78.11 66.75)"
请注意,转换是以相反的顺序进行的。

您可以通过创建一个以原点为中心的形状来简化事情,然后对其进行缩放和转换。
<path id="container_svg_rectsymbol1" fill="red" stroke="Gray" d="M -5 -5 v10 h10 v-10 h-10" transform="translate(78.11 -66.75) scale(3)"/>
您还可以将转换转换为矩阵,这样会更有效:
<path opacity="0.5" fill="red" stroke-width="1" stroke="Gray" d="M -5 -5 v10 h10 v-10 h-10" transform="matrix(3 0 0 3 78.11 -66.75)"/>
[编辑]要使用jQuery动画,这应该可以工作(在4秒内从0缩放为1):

        var box = element.getBBox();
var cx = box.x + box.width/2;
var cy = box.y + box.height/2;

$(element).animate(
{ scale: 1 },
{ duration: 4000,
step: function(now, fx) {
scaleVal = now;
$(element).attr("transform", "translate(" + cx + " " + cy + ") scale(" + scaleVal + ") translate(" + (-cx) + " " + (-cy) + ")");
}
}
);

关于svg - 如何通过将固定位置保持在svg中来缩放元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16945951/

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