CODEWITHSUNDEEP
csssvg
Imposter
Imposter

Reputation: 31

SVG how to make container bigger than svg

Have this problem

enter image description here

The blue circle (#Mark) should have black round border. For some reason it is not. Although if it is not a svg sprite but two separate svg elements everything is ok.

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 code

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

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

HTML code:

    <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>

Upvotes: 0

Views: 89

Answers (1)

enxaneta
enxaneta

Reputation: 33024

Your #Mark symbol is too small. You need to add some space for the stroke. Use <symbol id="Mark" viewBox="-1 -1 7 7"> instead of <symbol id="Mark" viewBox="0 0 5 5">. If needed change CSS accordingly.

I needed to see what happens so I've changed the size of your icons. 

.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>

Upvotes: 1

Related Questions