我試圖用& lt使用& gt標記如下:

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

問題是它看起來完全是黑色的，而且有一部分像這樣不見了:

它應該是這樣的:

如果我在導航器中輸入它的路徑，它會正確顯示。經過檢查，沒有CSS影響它的顏色。

我的猜測是& lt使用& gttag不支持顏色，只支持形狀，怎么辦？

下面是用Adobe Illustrator制作的SVG代碼:

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

# # #這里有三個使用& lt使用& gt并且參照一個ID。所有SVG都顯示一個帶有模糊濾鏡的橙色圓圈。

我不知道對它的普遍支持，但在我看來(使用Firefox和Chrome ),只有將填充定義為屬性的SVG(fill = & quot；橙色& quot)或內聯樣式(style = & quot填充:橙色；")上的圓圈元素起作用。

在所有SVG中，過濾器都是在& ltdefs & gt。所以，我不認為問題在于過濾器、遮罩或剪輯路徑的使用，而只是在& ltstyle & gt。

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

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

<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>&lt;style&gt;</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>