Can't manage to display mask svg.

popoleeMaster commented 4 years ago

Hello,

I am using this package to load svg (no preloading) in my angular 9 app. I am using the latest version.

My designer provided me with some icon like this one, that I download optimized from Zepelin (the UX app for mockup) :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
    <defs>
        <path id="prefix__a" d="M1.333 0c.736 0 1.334.597 1.334 1.333s-.598 1.334-1.334 1.334C.597 2.667 0 2.069 0 1.333 0 .597.597 0 1.333 0zm4 0c.736 0 1.334.597 1.334 1.333s-.598 1.334-1.334 1.334C4.597 2.667 4 2.069 4 1.333 4 .597 4.597 0 5.333 0zm4 0c.736 0 1.334.597 1.334 1.333s-.598 1.334-1.334 1.334C8.597 2.667 8 2.069 8 1.333 8 .597 8.597 0 9.333 0z"/>
    </defs>
    <g fill="none" fill-rule="evenodd" transform="translate(2.667 6.667)">
        <mask id="prefix__b" fill="#fff">
            <use xlink:href="#prefix__a"/>
        </mask>
        <use fill="#2D2D2D" xlink:href="#prefix__a"/>
        <g fill="#6E7C89" mask="url(#prefix__b)">
            <path d="M0 0H16V16H0z" transform="translate(-2.667 -6.667)"/>
        </g>
    </g>
</svg>

Now, if I draw this as an image, or using background-image it draw perfectly fine. Using this package tho, I have a grey cube.

2020-07-21_16-45

If I edit the svg, and make it like this :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
    <g fill="#6E7C89" fill-rule="evenodd" transform="translate(2.667 6.667)">
        <path id="prefix__a" d="M1.333 0c.736 0 1.334.597 1.334 1.333s-.598 1.334-1.334 1.334C.597 2.667 0 2.069 0 1.333 0 .597.597 0 1.333 0zm4 0c.736 0 1.334.597 1.334 1.333s-.598 1.334-1.334 1.334C4.597 2.667 4 2.069 4 1.333 4 .597 4.597 0 5.333 0zm4 0c.736 0 1.334.597 1.334 1.333s-.598 1.334-1.334 1.334C8.597 2.667 8 2.069 8 1.333 8 .597 8.597 0 9.333 0z"/>
    </g>
</svg>

Now it does appear in both.

I am not sure if it's a problem with the library, if I use it incorrectly, or if the svg are faulty. but since they work in css, I am thinking the problem come from how I use this or the library itself.

czeckd commented 4 years ago

I saw no problem loading the first or second SVG. This is the template code I used:

<svg-icon src="assets/images/popolee2.svg"></svg-icon>

This is how the second SVG loaded in Chrome:

Screen Shot 2020-07-21 at 1 49 29 AM

What do you have for the template code and styling?

popoleeMaster commented 4 years ago

I am using ng-bootstrap (so bootstrap and jquery...) in the same time. I call the svg exactly like you, and there is no style in the template or on the component.

If the problem doesn't come from the library itself, might be something in my project. I will look into it then.

Thank you (you can close as this is a non issue)

czeckd / angular-svg-icon

Can't manage to display mask svg. #109