是否可以直接在 Svelte 中渲染 SVG 元素？

Posted 2023-03-28

【中文标题】是否可以直接在 Svelte 中渲染 SVG 元素？

【英文标题】：Is it possible to render SVG elements directly in Svelte?

【发布时间】：2020-08-10 14:33:00

【问题描述】：

我正在尝试在 Svelte 中导入和渲染 SVG。

我正在使用@rollup/plugin-url 像这样导入 SVG 代码：

<script>
  import arrowCircle from "heroicons/dist/solid-sm/sm-arrow-circle-up.svg"
</script>

<main>
  <object title="Arrow Circle" type="image/svg+xml" data=arrowCircle></object>
</main>

现在这可以工作了（就引入的 SVG 内容而言），但它会呈现以下屏幕：

理想情况下，我想使用 <object /> 元素，这样我就可以将类应用于 SVG，但考虑到错误，我想我会尝试使用 <img /> 标记，看看这是否至少可以渲染 SVG，而是得到了这个：

<img src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22currentColor%22%3E%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2018a8%208%200%20100-16%208%208%200%20000%2016zm3.707-8.707l-3-3a1%201%200%2000-1.414%200l-3%203a1%201%200%20001.414%201.414L9%209.414V13a1%201%200%20102%200V9.414l1.293%201.293a1%201%200%20001.414-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E">

我也尝试了arrowCircle，但这会将上面的图像src 呈现为纯文本。

据我所知，这与作为原始导入一部分的 data 前缀有关。

我知道codefeathers/rollup-plugin-svelte-svg 插件，但如果可能的话，我希望能够在没有其他插件的情况下做到这一点，或者至少了解发生了什么。

作为参考，SVG 在<img /> 标签和<object /> 中均有效，根据此article。

【问题讨论】：

您是否尝试添加缺少的命名空间？ developer.mozilla.org/en-US/docs/Web/SVG/…

@RobertLongson 你是指 SVG 本身吗？

是的，它们不是没有命名空间的有效 SVG。

如果您可以选择将文件重命名为 .svelte 并将它们用作任何其他组件，它将内联 SVG。

嗯，我可以看到它们没有命名空间，但我也可以将原始 SVG 输入粘贴进去，它们可以工作......

【参考方案1】：

看起来 SVG 文件作为独立图像无效。试试这个：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>

【讨论】：

我已经意识到我要加载的 SVG 仅供内联使用，这意味着我可以使用类似 github.com/sionzeecz/rollup-plugin-inline-svg#readme 的东西或找到另一个库，以解决您手头的问题答案是正确的。