SVG圓圈位置的過渡導致移動時的截斷

Question

我有多個<circle>元素，每個元素都在它們自己的<g>之內。要移動這些圈子，我正在對每個<g>應用一個「平移」轉換。

我注意到，隨着圓圈的移動，它們中的一些似乎被略微截斷。只要他們休息一下，他們就會看起來很好，所以只要他們在運動。截斷效果看起來像你看到的一樣，如果你有一個與圓相同大小的正方形視口，然後稍微將圓移出中心。它只是在一側稍微變平。

這是我的元件組的一個樣子：

<g class="datapoint dot" transform="translate(360,56)"> 
    <circle class="rendering" style="fill: #3182bd; stroke: #225b84; stroke-opacity: 1; fill-opacity: 1; " r="7"></circle> 
</g> 

當我運行的過渡看着我調試器可以看到值「翻譯」的變化，但一切保持不變。所以這似乎不是我做錯的事情，但你永遠無法確定。 :)

最後一點評論是，我確實在多個瀏覽器（到目前爲止嘗試Chrome和Firefox）看到這一點。

有沒有人遇到過這種事情？

Answer 1

大概有點晚了，但我注意到使用transform: scale()時類似的東西。 SVG形狀僅限於文件原始大小。如果形狀比這更大，那麼它會被裁剪。

我的修復是讓SVG的邊界比形狀本身更大，以便它有一定的擴展空間。