我在自己的<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>
当我运行转换时观察调试器时，我可以看到“translate”中的值发生了变化，但其他一切都保持不变。所以它似乎不是我做错了，但你永远不能确定。 ：）
最后一条评论是，我确实在多个浏览器中看到了这一点（到目前为止尝试过Chrome和Firefox）。
以前有人遇到过这种事吗？
答案 0 :(得分：0)
对你来说可能有点晚了，但在使用transform: scale()时我注意到了类似的事情。 SVG形状仅限于文件原始大小。如果形状变得比这大，那么它将被裁剪。
我的解决方法是让SVG的边界大于形状本身，以便它有一定的扩展空间。