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：CSS样式tool__format

.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

当背景图像小于应用区域的大小或具有不同的纵横比时，就会发生这种情况。CSS 属性的background-repeat初始值为，repeat这会导致图像在两种情况下重复x，并且y当图像未填充整个空间时。由于其他背景填充了整个区域，因此在那里不可见。

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

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