css - SVG 图像反复将自身绘制在图标内

Question

我有一个使用许多 SVG 图片的网站，但有一个 SVG 文件显示不正确，并且似乎在图标内重复自身(下图红色圆圈)。

这只会影响一张图片:

<svg id="_1" data-name="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 215.24">
    <defs>
        <style>.cls-1,.cls-3{fill:#fff;}.cls-2,.cls-3{fill-rule:evenodd;}.cls-2{fill:url(#GradientFill_1);}.cls-3{opacity:0.84;}.cls-4{font-size:188.94px;fill:#1a1a18;stroke:#fff;stroke-miterlimit:5;stroke-width:0.28px;font-family:TimesNewRomanPSMT, Times New Roman;letter-spacing:-0.06em;}
        </style>
        <linearGradient id="GradientFill_1" x1="100.1" y1="90.61" x2="47.48" y2="68.54" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#fab400"/>
            <stop offset="1" stop-color="#8e4107"/>
        </linearGradient>
    </defs>
    <title>150x150</title>
    <rect class="cls-1" y="20.64" width="150" height="150" rx="4" ry="4"/>
    <path class="cls-2" d="M72.28,130.67A51.72,51.72,0,1,0,20.56,78.94,51.83,51.83,0,0,0,72.28,130.67Z" transform="translate(0 20.64)"/>
    <path class="cls-3" d="M54.77,59.41,35.47,56q3.27-11.83,11.26-17.51t23.71-5.68q14.28,0,21.3,3.37c4.64,2.26,7.94,5.11,9.83,8.59s2.85,9.83,2.85,19.12l-.31,24.9a87.84,87.84,0,0,0,1,15.69,45.24,45.24,0,0,0,3.81,10.82H87.76c-.55-1.4-1.25-3.48-2-6.23a26,26,0,0,0-.75-2.49,38.15,38.15,0,0,1-11.67,8A33.11,33.11,0,0,1,60,117.3q-12.41,0-19.58-6.77a22.46,22.46,0,0,1-7.16-17.09,23,23,0,0,1,3.27-12.19,21.31,21.31,0,0,1,9.16-8.2q5.88-2.84,17-5c10-1.87,16.89-3.63,20.72-5.24V60.68c0-4.15-1-7.11-3-8.9s-5.89-2.65-11.52-2.65c-3.81,0-6.77.75-8.9,2.28s-3.87,4.18-5.19,8ZM83.4,76.68Q79.32,78,70.41,80c-5.91,1.27-9.8,2.52-11.62,3.71a9,9,0,0,0-4.18,7.52A10.45,10.45,0,0,0,58,98.94a11.66,11.66,0,0,0,8.51,3.27,18.65,18.65,0,0,0,11-3.79,13.46,13.46,0,0,0,5.08-7.08c.54-1.81.83-5.29.83-10.4Z" transform="translate(0 20.64)"/>
    <text class="cls-4" transform="translate(7.8 157.16)">A</text>
</svg>

当我单独显示这张图片(在浏览器中单独打开)时，它看起来很正常。

问题:问题可能来自 SVG 中的代码吗？我不是 SVG 专家，但由于它是一百多个图标中唯一显示此行为的图标，所以这是我要查找的第一个位置。

编辑 1:图像声明为:

 <a href="tool/{{{urlencode product}}}" data-navigo class="tool__format" style="background-image:url(https://assets.doctoolhub.com/{{{getToolLogo product}}})">

编辑 2:tool__format

的 CSS 样式

.tool__format {
  width: 45px;
  height: 45px;
  border-radius: 4px;
  border: 1px solid $color-border-icon;
  margin-bottom: verticalGrid(3) - 45px;
  position: relative;
  margin-right: 10px;
}

Answer 1

当背景图像小于应用区域的大小时或具有不同的纵横比时会发生这种情况。 the background-repeat CSS property 的初始值是 repeat，当图像没有填满整个空间时，它会导致图像在 x 和 y 中重复。由于其他背景填满了整个区域，因此此处不可见。

根据需要的结果，background-repeat 可以设置为 no-repeat 来避免这种情况。

图像将仍然位于左上角，不一定会拉伸(stretch)整个区域。相关background-position可以设置为 center 使图像居中，background-size可以设置为 contain 以使背景尽可能大而不被裁剪。