SVG圆位置的转换导致移动时截断

我有许多

元素，每个元素都在自己的

中。为了移动圆圈，我在每个

上应用了“translate”变换

我注意到的是，随着圆圈的移动，有些圆圈似乎被稍微截断了。他们一休息，看上去就很好，所以这只是他们运动的时候。截断效果类似于使用与圆大小相同的方形视口，然后将圆稍微移出中心时所看到的效果。它只是在一侧稍微变平

这是我的一个元素组的外观：

<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>

当我观察调试器运行转换时，我可以看到“translate”中的值发生了变化，但其他内容保持不变。所以这似乎不是我做错了什么，但你永远无法确定这一点

最后一点意见是，我确实在多个浏览器中看到了这一点（到目前为止，我已经尝试了Chrome和Firefox）

---

以前有人遇到过这种情况吗？

对您来说可能有点晚了，但我在使用

transform:scale（）

时注意到类似的情况。SVG形状仅限于文件的原始大小。如果形状放大到比这个大，那么它将被裁剪

---

我的解决方案是使SVG的边界比形状本身更大，这样它就有了一些扩展空间。

对您来说可能有点晚了，但我在使用

transform:scale（）

时注意到了类似的事情。SVG形状仅限于文件的原始大小。如果形状放大到比这个大，那么它将被裁剪

---

我的解决方案是使SVG的边界比形状本身更大，这样它就有了一些扩展空间。

我也注意到了这一点，并且对此感到好奇。我也注意到了这一点，并且对此感到好奇