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的专家，但由于它是显示此行为的100多个中唯一的图标，这是我第一个看的地方。

编辑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以避免这种情况。

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

Answer 2

您正在使用background-image来显示SVG图标。

您必须将background-repeat属性添加到类.tool__format以禁用重复background-image。在您的情况下，图标SVG小于<a>元素。因此，您可以将background-image与background-position属性对齐：

.tool__format {
    background-repeat: no-repeat; /** disable repeating */
    background-position: center; /** center the background image */
    width: 45px;
    height: 45px;
    border-radius: 4px;
    border: 1px solid $color-border-icon;
    margin-bottom: verticalGrid(3) - 45px;
    position: relative;
    margin-right: 10px;
}

示例：

.tool__format {
    border:1px solid red;
    background-repeat:no-repeat; /** prevent repeating */
    background-position:center; /** background image to the center */
    width: 45px;
    height: 45px;
    border-radius: 4px;
    border: 1px solid $color-border-icon;
    margin-bottom: verticalGrid(3) - 45px;
    position: relative;
    margin-right: 10px;
    display:inline-block;
    
}

<a href="#" class="tool__format" style="background-image:url(https://placehold.it/20x20)"></a>

SVG图像反复在图标内部绘制

2 个答案: