調用比例，但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>