是否可以直接在 Svelte 中渲染 SVG 元素?
Is it possible to render SVG elements directly in Svelte?
我正在尝试在 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。
SVG 文件作为独立图像似乎无效。试试这个:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>
我正在尝试在 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。
SVG 文件作为独立图像似乎无效。试试这个:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>