Javascript svg.js缩放和移动/中心的奇怪交互

我不太熟悉在js中使用SVG，但这里有一些东西确实很奇怪。 我有一个箭头，然后是一条路径，应该填充箭头到一定的范围。看起来像这样： 现在我的目标是能够缩放白色部分，但它仍应留在箭头内。 现在奇怪的是，我不知道如何将白色部分移回正确的位置。我尝试过不同的尝试。 以下是我当前的代码（它适用于scaleFactor 1，但不适用于任何其他类型）：

---

在SVG中进行缩放、旋转和转换时，您正在进行坐标变换。也就是说，实际上并没有更改正在绘制的对象，而是更改正在绘制对象的坐标系。可以将其视为像素在屏幕上有一定的大小，如果使用

svgObject.scale（0.5）

则像素将变为大小的一半

因此，如果您通过

路径（'M10,10 L20,10 L20,20 L10,20 z'）

绘制一个正方形，然后应用

比例（0.5）

它看起来就像您绘制了一条路径，看起来像

路径（'M5,5 L10,5 L10,10 L5,10 z'）

起初这听起来可能很奇怪，但如果你能做到这一点，很多几何计算就会变得简单得多

要围绕箭头尖端缩放（确保箭头不移动）。然后，您应该将该点放置在origo

（0,0）

中，并围绕该点绘制对象。在小组里做那件事。因为这样可以将组坐标系转换到正确的位置

var draw = SVG('arrow').size(600, 600);

// create a group
var arrow = draw.group();

// Draw the arrow path in the group
// I have placed the "tip" of the arrow in (0,0)
var arrowPath = arrow.polyline('-250,250 0,0 250,250').fill('none').stroke({
    width: 20
});

// Draw the fill arrow in the group. Again, the point 
// I which to scale around is placed at (0,0)
var fillArrow = arrow.path('M0,0L150,150,-150,150z').fill('#ffffee');

// Move the group to the position we like to display it in the SVG
arrow.move(260, 20);

var scaleFactor = 0.5
fillArrow.scale(scaleFactor);

这里是一个工作示例，您可以测试和更改比例因子。

这是一个关于平移、旋转和缩放的很好的解释。

---

在SVG中进行缩放、旋转和转换时，您正在进行坐标变换。也就是说，实际上并没有更改正在绘制的对象，而是更改正在绘制对象的坐标系。可以将其视为像素在屏幕上有一定的大小，如果使用

svgObject.scale（0.5）

则像素将变为大小的一半

因此，如果您通过

路径（'M10,10 L20,10 L20,20 L10,20 z'）

绘制一个正方形，然后应用

比例（0.5）

它看起来就像您绘制了一条路径，看起来像

路径（'M5,5 L10,5 L10,10 L5,10 z'）

起初这听起来可能很奇怪，但如果你能做到这一点，很多几何计算就会变得简单得多

要围绕箭头尖端缩放（确保箭头不移动）。然后，您应该将该点放置在origo

（0,0）

中，并围绕该点绘制对象。在小组里做那件事。因为这样可以将组坐标系转换到正确的位置

var draw = SVG('arrow').size(600, 600);

// create a group
var arrow = draw.group();

// Draw the arrow path in the group
// I have placed the "tip" of the arrow in (0,0)
var arrowPath = arrow.polyline('-250,250 0,0 250,250').fill('none').stroke({
    width: 20
});

// Draw the fill arrow in the group. Again, the point 
// I which to scale around is placed at (0,0)
var fillArrow = arrow.path('M0,0L150,150,-150,150z').fill('#ffffee');

// Move the group to the position we like to display it in the SVG
arrow.move(260, 20);

var scaleFactor = 0.5
fillArrow.scale(scaleFactor);

这里是一个工作示例，您可以测试和更改比例因子。

这是一个关于平移、旋转和缩放的很好的解释。

---

谢谢！我发现在我的例子中，不使用比例函数更容易，只需将宽度+高度乘以比例因子即可。这样，它实际上也是线性的。这就是我需要的。谢谢！我发现在我的例子中，不使用比例函数更容易，只需将宽度+高度乘以比例因子即可。这样，它实际上也是线性的。这就是我需要的。