2

我有许多<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）。

有没有人遇到过这种事情？

4

1 回答 1

0

对你来说可能有点晚了，但我在使用transform: scale(). SVG 形状仅限于文件的原始大小。如果形状变得比这更大，那么它将被裁剪。

我的解决方法是使 SVG 的边界大于形状本身，以便它有一些扩展空间。

于 2014-01-09T12:49:37.240 回答