如何防止SVG内的动画元素溢出？

Question

我有一个SVG元素，我使用CSS3来制作动画。我在SVG内部缩放（transform: scale()）元素，但它们在SVG图像的边界外显示为动画。

我需要防止.shines元素溢出。我知道我无法设置<g>元素，所以我在SVG中使用<svg>来尝试让它工作。

为您的测试乐趣提供jsfiddle

Answer 1

由于形状是圆形的，请尝试border-radius: 100%

JSFiddle：DEMO

.portal {
    height: 21px;
    overflow: hidden;
    width: 21px;
    border-radius: 100%;
}