SVG缩放而不改变位置

13 浏览
0 Comments

SVG缩放而不改变位置

我试图做的事情很简单：使用原始js在兄弟元素悬停时将一些SVG点从scale(0)缩放到scale(1)。它们是演示中的红色点。

以下是基本的SVG设置：

问题是SVG基于原点位置进行缩放，而不是当前位置，因此当应用变换时，它会移动元素并缩放。我试图通过按BBox()偏移量进行平移、缩放，然后再平移回来来解决这个问题，但似乎只有帮助，而没有完全解决问题。

我尝试使用setAttribute和CSS的transform（我无法使setAttribute过渡，可能是因为它不可由CSS进行动画处理），但无论哪种方法都无法实现。我只在Chrome中进行了测试。

有人知道如何在不移动的情况下缩放红点吗？

如果你错过了，这是演示。

编辑：

我根据RashFlash的答案制作了一个函数，它非常简单易用，还考虑了偏移量和不同的变换原点。

function scaleMe(elem, scaleX, scaleY, newOffsetX, newOffsetY, originX, originY) {
    newOffsetX = null ? 0 : newOffsetX;
    newOffsetY = null ? 0 : newOffsetY;
    originX = null ? "center" : originX;
    originY = null ? "center" : originY;
    var bbox = elem.getBBox(),
        cx = bbox.x + (bbox.width / 2),
        cy = bbox.y + (bbox.height / 2),        
        tx = -cx * (scaleX - 1) + newOffsetX,
        ty = -cy * (scaleY - 1) + newOffsetY;        
    if(originX === "left" || originX === "right") {
        tx = newOffsetX;
    }
    if(originY === "top" || originY === "bottom") {
        ty = newOffsetY;
    }
    var scalestr = scaleX + ',' + scaleY,
        translatestr = tx + 'px,' + ty + 'px';
    elem.style.WebkitTransformOrigin = originX + " " + originY;
    elem.style.MozTransformOrigin = originX + " " + originY;
    elem.style.msTransformOrigin = originX + " " + originY;
    elem.style.transformOrigin = originX + " " + originY;
    elem.style.WebkitTransform = "translate(" + translatestr + ") scale(" + scalestr + ")";
    elem.style.MozTransform = "translate(" + translatestr + ") scale(" + scalestr + ")";
    elem.style.msTransform = "translate(" + translatestr + ") scale(" + scalestr + ")";
    elem.style.transform = "translate(" + translatestr + ") scale(" + scalestr + ")";
}

0