调用比例，但SVG元素也翻译

Question

我有这个fiddle我试图缩放围绕其中心的橙色圆圈（使用JavaScript），也就是说，它必须扩大原点设置为其中心。然而，有些东西正在引起它的扩大和移动，即导致翻译。

而同样的事情会工作在纯CSS环境优良如图所示为绿色圆圈

在这两种情况下，我已经固定的使用CSS这样的变换产地：

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

灿有人帮忙吗？我想从脚本中缩放一个更大的动画序列，并且缩放量是动态的（就像2秒内的转换）。

Answer 1

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

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

如果您希望事物按比例关于其中心，则需要调整本地坐标以使其中心位于原点。您可以通过将它们包装在<g>元素中并使用适当的transform属性来完成此操作。

例如，这里是一个包含两个圆圈的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>