Question

遇到这个问题

蓝色圆圈（#Mark）应该具有黑色圆形边界。由于某种原因，它不是。尽管如果它不是svg精灵，而是两个独立的svg元素，则一切正常。

SVG：

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="r8qna" d="M1351 35.438c0 .983-.815 1.562-1.821 1.562h-4.857c0 .984-.816 1.781-1.822 1.781-1.006 0-1.821-.797-1.821-1.781h-4.857c-1.007 0-1.822-.579-1.822-1.562 0-.846.376-1.649 1.03-2.202 1.17-.99 2.006-3.618 2.006-6.705 0-2.337 1.536-4.318 3.673-5.044A1.806 1.806 0 0 1 1342.5 20c.903 0 1.647.644 1.791 1.487 2.137.726 3.673 2.707 3.673 5.044 0 3.088.837 5.716 2.007 6.705a2.882 2.882 0 0 1 1.03 2.202zm-1.568-.103c0-.34-.15-.663-.414-.886-1.688-1.428-2.737-4.296-2.737-8.024 0-2.039-1.696-3.697-3.78-3.697-2.086 0-3.782 1.658-3.782 3.697 0 3.728-1.049 6.596-2.737 8.023a1.162 1.162 0 0 0-.414.887z"/>
        <path id="rfoga" d="M1074.5 101a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/>
    </defs>
    <symbol id="Bell" viewBox="0 0 17 19">
        <g>
            <g transform="translate(-1334 -20)">
                <use fill="#a56ea3" xlink:href="#r8qna"/>
                <use fill="#e0e0e0" xlink:href="#r8qna"/>
            </g>
        </g>
    </symbol>
    <symbol id="Mark" viewBox="0 0 5 5">
        <g>
            <g transform="translate(-1072 -101)">
                <use fill="#30a1d6" xlink:href="#rfoga"/>
            </g>
        </g>
    </symbol>
</svg>

CSS代码

 &__bell-icon {
    fill: #e0e0e0;
    height: 19px;
    width: 17px;
}

&__circle-icon {
    position: absolute;
    visibility: visible;
    height: 5px;
    width: 5px;
    stroke:$icon-stroke-light;
}

HTML代码：

    <span class="notifications__icons">
        <svg class="notifications__bell-icon"><use href="../../../images/BellWithMark.svg#Bell"></svg>
        <svg class="notifications__circle-icon"><use href="../../../images/BellWithMark.svg#Mark"></svg>

    </span>

Answer 1

您的#Mark符号太小。您需要为笔划添加一些空间。使用<symbol id="Mark" viewBox="-1 -1 7 7">代替<symbol id="Mark" viewBox="0 0 5 5">。如果需要，请相应地更改CSS。

我需要看看会发生什么，所以我更改了图标的大小。

.notifications__bell-icon {
    fill: #e0e0e0;
    height: 190px;
    width: 170px;
    position: absolute;
}

.notifications__circle-icon {
    position: absolute;
    visibility: visible;
    height: 50px;
    width: 50px;
    stroke:black;
}

<span class="notifications__icons">
        <svg class="notifications__bell-icon"><use href="#Bell"></svg>
        <svg class="notifications__circle-icon"><use href="#Mark"></svg>
</span>
          
          
          <svg>
    <defs>
        <path id="r8qna" d="M1351 35.438c0 .983-.815 1.562-1.821 1.562h-4.857c0 .984-.816 1.781-1.822 1.781-1.006 0-1.821-.797-1.821-1.781h-4.857c-1.007 0-1.822-.579-1.822-1.562 0-.846.376-1.649 1.03-2.202 1.17-.99 2.006-3.618 2.006-6.705 0-2.337 1.536-4.318 3.673-5.044A1.806 1.806 0 0 1 1342.5 20c.903 0 1.647.644 1.791 1.487 2.137.726 3.673 2.707 3.673 5.044 0 3.088.837 5.716 2.007 6.705a2.882 2.882 0 0 1 1.03 2.202zm-1.568-.103c0-.34-.15-.663-.414-.886-1.688-1.428-2.737-4.296-2.737-8.024 0-2.039-1.696-3.697-3.78-3.697-2.086 0-3.782 1.658-3.782 3.697 0 3.728-1.049 6.596-2.737 8.023a1.162 1.162 0 0 0-.414.887z"/>
        <path id="rfoga" d="M1074.5 101a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/>
    </defs>
    <symbol id="Bell" viewBox="0 0 17 19">
        <g>
            <g transform="translate(-1334 -20)">
                <use fill="#a56ea3" xlink:href="#r8qna"/>
                <use fill="#e0e0e0" xlink:href="#r8qna"/>
            </g>
        </g>
    </symbol>
    <symbol id="Mark" viewBox="-1 -1 7 7">
        <g>
            <g transform="translate(-1072 -101)">
                <use fill="#30a1d6" xlink:href="#rfoga"/>
            </g>
        </g>
    </symbol>
</svg>

SVG如何使容器大于SVG

1 个答案: