Question

我有fiddle我试图围绕其中心缩放橙色圆圈（使用javascript），也就是说，它必须在原点设置为其中心的情况下展开。然而，某些东西正在导致它扩展并移动，即导致翻译。

虽然同样的东西在纯CSS环境中可以正常工作，如绿色圆圈所示

在这两种情况下，我都使用CSS修复了transform-origin：

#Orange, #Orange *{
  transform-origin:140px 300px;
}

有人可以帮忙吗？我想从脚本中缩放它以获得更大的动画序列，并且缩放量是动态的（比如2秒内的转换）。

Answer 1

你的示例代码有点长，所以我简化了一些事情。

这里的问题是，当您将scale变换应用于SVG元素时，您基本上所做的是将所有元素的坐标乘以比例因子。如果元素在缩放之前偏离原点，则此偏移也将缩放。

如果您希望对其中心进行缩放，则需要调整局部坐标，使其中心位于原点。您可以通过使用合适的转换属性将它们包装在<g>元素中来完成此操作。

例如，这是一个包含两个圆圈的SVG。橙色的中心位于（100,125），中心坐标为cx = cy = 0。当这个圆圈缩放时，它就会保持原样。

蓝色圆圈的原点设置为（200,125）（由蓝色十字表示），但在中心x坐标（cx = 100）中附加偏移量为100。缩放此圆圈时，cx的值加倍，使其向右飞出。

svg path {
    pointer-events:visibleFill;
}

svg circle {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

svg circle:hover {
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    opacity:0.5;
}

<svg viewBox="0 0 400 250" width="400" height="250">
    <rect x="0" y="0" width="400" height="250" fill="#ffa" />
    <g transform="translate(100,125)">
        <circle cx="0" cy="0" r="50" fill="#f90" />
        <path d="M0-10V10ZM10 0H-10" stroke="#a60" stroke-width="2" />
    </g>
    <g transform="translate(200,125)">
        <circle cx="100" cy="0" r="50" fill="#69f" />
        <path d="M0-10V10ZM10 0H-10" stroke="#46a" stroke-width="2" />
    </g>
</svg>

调用scale，但SVG元素也在翻译

1 个答案: