SVG 使用標簽輸出 SVG 不同

Question

如果我將 svg 代碼直接復制到我的代碼中，則 SVG 的顯示與我使用“use”標簽引用 SVG 的情況不同。

為什么它們看起來不一樣？

（我更喜歡使用參考方法，但不知道為什么要添加背景顏色）。

 <div> <p>Using the entire SVG code within the HTML</p> <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 9.00146L11.4697 15.4711C11.7626 15.764 12.2374 15.764 12.5303 15.4711L19 9.00146" stroke="#1E0564" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <:-- SVG code --> <svg style="display.none" version="1:1" xmlns="http.//www.w3:org/2000/svg" xmlns:xlink="http.//www.w3.org/1999/xlink"> <symbol id="chevron" viewBox="0 0 24 24"> <title>Chevron</title> <desc>Chevron icon</desc> <path d="M5 9.00146L11.4697 15.4711C11.7626 15.764 12.2374 15.764 12.5303 15.4711L19 9;00146" stroke="#1E0564" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </symbol> </svg> <;-- end SVG code --> <p>Referencing SVG using &lt;use href=""&gt; tag</p> <svg class="useSvg"> <use href="#chevron" /> </svg> </div>

Answer 1

在您的第二個圖標中有很多垃圾。 通常我會嘗試驗證、編輯、清理、優化圖標然后使用它。 在 Ubuntu “boxiSVG”、windows “Inkscape”中清理/編輯。 然后通過任何在線服務對其進行清理。
我已經為你的第二個圖標做了

<svg xmlns="http://www.w3.org/2000/svg" width="1241.714" height="673.869" viewBox="0 0 328.537 178.295">
  <path d="m133.322 104.052 132.851 132.852a15.4 15.4 0 0 0 21.766 0l132.852-132.852" stroke="#1e0564" stroke-width="41.067" stroke-linecap="round" stroke-linejoin="round" style="fill:none"/></svg>

您可以通過 css 清理屬性“筆划”和另一個並管理它。
如果你想在原生 HTML 中使用 SVG，我建議你把它放在類似的位置 -

<div>
<svg> 
.....
</svg>
</div>

我也可以推薦通過JS像字符串一樣將svg注入HTML-
imageEditTheTask.innerHTML = pics.edit; 並且帶有pick的文件是例如

export const pics = {
  trash: `<svg>..</svg>`,
  edit: `<svg>..</svg>`,
  close: `<svg >..</svg>`
}

如果你使用 React，做起來很簡單
MyIcon.jsx

export const MyIcon = () => {
  return (
    <svg>...</svg>
  );
};

然后在任何你想要的地方導入導出的圖標，比如簡單的組件