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>
  );
};

然后在任何你想要的地方导入导出的图标，比如简单的组件