SVG using <use> tag appears completely black and missing a part of it

I'm trying to add a SVG to an HTML page with the <use> tag as following:

<div id="ampoule_container">
    <svg>
        <use href="resources/assets/Ampoule.svg#ampoule"/>
    </svg>
</div>

The problem is that it appears completely black, and a part of it is missing like so:

It should look like this:

If I type its path in a navigator it shows up correctly. After checking, no CSS is influencing its color.

My guess is that <use> tag doesn't support colors, but only shapes, what can I do ?

Here is the SVG code made with Adobe Illustrator:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="ampoule" data-name="ampoule" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 180 500">
  <defs>
    <style...>
    <clippath id="clippath-4">...</clippath>
    <linearGradient.../>
    <linearGradient.../>
  </defs>
  <g class="cls-10">
    <g id=...>...</g>
    <g id=...>...</g>
    <g id=...>...</g>
    <g id=...>...</g>
  </g>
</svg>

Here are three SVGs inserted using <use> and with reference to an ID. All SVGs display a orange circle with a blur filter.

I don't know about the general support for this, but as I see it (using Firefox and Chrome), only the SVGs with the fill defined as an attribute (fill="orange") or inline style (style="fill:orange;") on the circle element works.

In all SVGs the filter is defined in <defs>. So, I don't think that the problem is the use of filters, masks or clip paths, but only an issue when you define CSS styles in <style>.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  display: flex;
  gap: 10px;
}

svg {
  display: block;
  width: 200px;
  height: 200px;
  border: solid thin black;
}

<!-- language: lang-html -->

<div>
  <p>Circle with fill attribute:</p>
  <svg>
    <use href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBpZD0ic3ZnMDEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGZpbHRlciBpZD0iYmx1ciI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIC8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMzAiIGZpbGw9Im9yYW5nZSIgZmlsdGVyPSJ1cmwoJyNibHVyJykiLz4KPC9zdmc+CgoK#svg01"/>
  </svg>
</div>
<div>
  <p>Circle styled with a CSS property in a <code><style></code> element:</p>
  <svg>
    <use href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBpZD0ic3ZnMDEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICBjaXJjbGUgeyBmaWxsOiBvcmFuZ2U7IH0KICAgIDwvc3R5bGU+CiAgICA8ZmlsdGVyIGlkPSJibHVyIj4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIzMCIgZmlsdGVyPSJ1cmwoJyNibHVyJykiLz4KPC9zdmc+CgoK#svg01"/>
  </svg>
</div>
<div>
  <p>Circle styles with CSS property in the style attribute:</p>
  <svg>
    <use href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBpZD0ic3ZnMDEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGZpbHRlciBpZD0iYmx1ciI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIC8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMzAiIHN0eWxlPSJmaWxsOm9yYW5nZTsiIGZpbHRlcj0idXJsKCcjYmx1cicpIi8+Cjwvc3ZnPgoKCg==#svg01"/>
  </svg>
</div>

<!-- end snippet -->

Just noticed that you also have gradients in your SVG. So, here is a circle with a gradient defined in <defs>. That works fine in Firefox, but not in Chrome or Opera (but in general the examples does not work in Opera, but I guess that is an issue with data URLs).

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  display: flex;
  gap: 10px;
}

svg {
  display: block;
  width: 200px;
  height: 200px;
  border: solid thin black;
}

<!-- language: lang-html -->

<div>
  <p>Circle with fill attribute and gradient:</p>
  <svg>
    <use href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBpZD0ic3ZnMDEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGZpbHRlciBpZD0iYmx1ciI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIC8+CiAgICA8L2ZpbHRlcj4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoOTApIj4KICAgICAgPHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0ib3JhbmdlIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0ibWFyb29uIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMzAiIGZpbGw9InVybCgjZ3JhZGllbnQpIiBmaWx0ZXI9InVybCgnI2JsdXInKSIvPgo8L3N2Zz4KCgo=#svg01"/>
  </svg>
</div>

<!-- end snippet -->