Question

我想缩放SVG元素的动画以适应（保留纵横比）SVG的给定区域。

我知道执行相对动画的动画

var s = Snap（＆＃34;＃myelement＆＃34;）; s.animate（{＆＃39; transform＆＃39;：＃100; t100,100s5,5,165,175＆＃39;}，1000）;

原则上，应该可以通过计算平移和缩放的参数来实现我想要的。问题是我找不到准确的参数文档。 t的参数似乎是相对x，y位置和s比例因子和比例中心坐标的参数。但是，组合翻译和缩放如何工作？相对平移位置是否随着缩放等而缩放？

换句话说：如何从动画目标元素的左上角和右下角的坐标计算相对平移和缩放参数？

或者：Snap中是否有更合适的动画功能？

Answer 1

您显示包含多个部分的变换。这些部件的顺序很重要。如果您先翻译并稍后缩放，则生成的翻译也会缩放。如果您先缩放然后翻译，则生成的翻译不会受到缩放的影响。

您在Snap.svg中使用的动画也是我也使用的动画。（但我考虑迁移到svg.js，因为例如Snap.svg与Electron不能很好地兼容。但我必须首先进行一些测试。

Answer 2

由于Snap使用SVG语法，要解决问题，需要了解SVG转换（请参阅此处以获取简介：https://sarasoueidan.com/blog/svg-transformations/）。为了设置组合的SVG变换，重要的是要理解每个变换都会改变坐标系（而不仅仅是绝对坐标系中元素的属性）。

如果组合两个变换，缩放和平移，这意味着第二个变换的参数取决于第一个变换。

要在SVG的ViewBox的坐标中实现元素到给定位置和大小的平移和缩放，可以首先执行缩放到新大小，选择缩放的中心坐标为元素的中心。然后，以下翻译的注意事项简化如下

function startAnimation() {

var svg = Snap("#baseSVG");
/* get the bounding box of the svg */
var bboxSvg = svg.getBBox();

var s = Snap("#element");
/* get the bounding box of the element */
var bbox = s.getBBox();
/* get the required scale factor (assuming that we want to fit the element inside the svg bounding box) */
var scale = Math.min(bboxSvg.width/bbox.width,bboxSvg.height/bbox.height)*0.8;
/* compute the translation needed to bring center of element to center of svg 
the scale factor must be taken into account since the translation is based on the coordinate system obtained after the previous scaling */
var tx = (200-bbox.cx)/scale;
var ty = (200-bbox.cy)/scale;
/* perform the animation (make center of scaling the center of element) */
s.animate({ 'transform' : 's' + scale + ',' + scale + ',' + bbox.cx + ',' + bbox.cy + 't' + tx + ',' + ty },1000,mina.bounce);
s.drag();
}

这假设您的SVG对象具有标识baseSVG，并且您要转换的元素具有标识element。它被转换为适合SVG（如果你想要它更大或更小，调整因子0.8）。如果您只知道元素角的坐标，则必须首先计算目标的中心坐标（替换bbox.cx和bbox.cy）以及应用此代码段的比例。这在baseSVG的坐标系中以明显的方式起作用。

使用Snap动画将SVG元素缩放到给定区域

2 个答案: