SVG how to make container bigger than svg

up vote
0
down vote

favorite

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>

edited Nov 19 at 19:15

asked Nov 19 at 18:37

Raulis Radziukas

337

@RobertLongson blue circle inside the bell. It should have a black border around (now it's more a square). And it do just that border don't fit inside the container for some reason. What other code do you need?
– Raulis Radziukas
Nov 19 at 19:00

@RobertLongson well this is called svg sprites. I call them by this manner <svg class="notifications__circle-icon"><use href="../../../images/BellWithMark.svg#Mark"></svg>
– Raulis Radziukas
Nov 19 at 19:07

@RobertLongson all other code is irrelevant in this situation... I can give it to you, but that dosn't change a thing. The bell is in no way connected to the circle. Maybe it's my bad for taking that picture as an example :D
– Raulis Radziukas
Nov 19 at 19:14

add a comment |

up vote
0
down vote

favorite

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>

edited Nov 19 at 19:15

asked Nov 19 at 18:37

Raulis Radziukas

337

@RobertLongson blue circle inside the bell. It should have a black border around (now it's more a square). And it do just that border don't fit inside the container for some reason. What other code do you need?
– Raulis Radziukas
Nov 19 at 19:00

@RobertLongson well this is called svg sprites. I call them by this manner <svg class="notifications__circle-icon"><use href="../../../images/BellWithMark.svg#Mark"></svg>
– Raulis Radziukas
Nov 19 at 19:07

@RobertLongson all other code is irrelevant in this situation... I can give it to you, but that dosn't change a thing. The bell is in no way connected to the circle. Maybe it's my bad for taking that picture as an example :D
– Raulis Radziukas
Nov 19 at 19:14

add a comment |

up vote
0
down vote

favorite

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>

edited Nov 19 at 19:15

asked Nov 19 at 18:37

Raulis Radziukas

337

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>

css svg

edited Nov 19 at 19:15

asked Nov 19 at 18:37

Raulis Radziukas

337

edited Nov 19 at 19:15

asked Nov 19 at 18:37

Raulis Radziukas

337

edited Nov 19 at 19:15

asked Nov 19 at 18:37

Raulis Radziukas

337

asked Nov 19 at 18:37

Raulis Radziukas

337

asked Nov 19 at 18:37

Raulis Radziukas

337

@RobertLongson blue circle inside the bell. It should have a black border around (now it's more a square). And it do just that border don't fit inside the container for some reason. What other code do you need?
– Raulis Radziukas
Nov 19 at 19:00

@RobertLongson well this is called svg sprites. I call them by this manner <svg class="notifications__circle-icon"><use href="../../../images/BellWithMark.svg#Mark"></svg>
– Raulis Radziukas
Nov 19 at 19:07

@RobertLongson all other code is irrelevant in this situation... I can give it to you, but that dosn't change a thing. The bell is in no way connected to the circle. Maybe it's my bad for taking that picture as an example :D
– Raulis Radziukas
Nov 19 at 19:14

add a comment |

@RobertLongson blue circle inside the bell. It should have a black border around (now it's more a square). And it do just that border don't fit inside the container for some reason. What other code do you need?
– Raulis Radziukas
Nov 19 at 19:00

@RobertLongson well this is called svg sprites. I call them by this manner <svg class="notifications__circle-icon"><use href="../../../images/BellWithMark.svg#Mark"></svg>
– Raulis Radziukas
Nov 19 at 19:07

@RobertLongson all other code is irrelevant in this situation... I can give it to you, but that dosn't change a thing. The bell is in no way connected to the circle. Maybe it's my bad for taking that picture as an example :D
– Raulis Radziukas
Nov 19 at 19:14

@RobertLongson blue circle inside the bell. It should have a black border around (now it's more a square). And it do just that border don't fit inside the container for some reason. What other code do you need?
– Raulis Radziukas
Nov 19 at 19:00

@RobertLongson well this is called svg sprites. I call them by this manner <svg class="notifications__circle-icon"><use href="../../../images/BellWithMark.svg#Mark"></svg>
– Raulis Radziukas
Nov 19 at 19:07

@RobertLongson all other code is irrelevant in this situation... I can give it to you, but that dosn't change a thing. The bell is in no way connected to the circle. Maybe it's my bad for taking that picture as an example :D
– Raulis Radziukas
Nov 19 at 19:14

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

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>

answered Nov 19 at 21:21

enxaneta

4,2422413

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53380753%2fsvg-how-to-make-container-bigger-than-svg%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

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>

answered Nov 19 at 21:21

enxaneta

4,2422413

add a comment |

up vote
1
down vote

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>

answered Nov 19 at 21:21

enxaneta

4,2422413

add a comment |

up vote
1
down vote

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>

answered Nov 19 at 21:21

enxaneta

4,2422413

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>

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

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

answered Nov 19 at 21:21

enxaneta

4,2422413

answered Nov 19 at 21:21

enxaneta

4,2422413

answered Nov 19 at 21:21

enxaneta

4,2422413

answered Nov 19 at 21:21

enxaneta

4,2422413

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk