css - SVG 圆缩放

Question

我有一个简单的 SVG 圆圈:

<svg version="1.1"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
 x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" overflow="visible" enable-background="new 0 0 100 100"
 xml:space="preserve">
<circle fill="#6E6F6F" cx="50" cy="50" r="49"/>
</svg>

此图像用作背景，并调整为 22 像素:

background: transparent url('++resource++svg/star_neg.svg') no-repeat 0 0 / 22px 22px;

当我在浏览器中查看时，圆圈的右侧和底部在 Firefox 中显得平坦(Chrome 看起来不错)。如果我在 Firefox 上放大，圆圈会按预期显示完整。我该如何解决这个问题？

Answer 1

终于找到了一个简单的解决方案。将 svg 显示为背景的 div 应大于 SVG。我的盒子是 22px 的正方形，与我设置 SVG 的尺寸相同。为解决此问题，我将框显示为 25 像素，背景图像居中而不是设置在 Angular 落。