我正在构建一个编辑器,用户可以从CDN中选择一个SVG,并选择它的填充颜色。在前端,我希望能够以用户选择的颜色呈现这些SVG,但这似乎是不可能的。有人知道我应该尝试什么方法吗?
我从服务器获得的数据如下:
- cdnURL:加载SVG的URL
- fillColor:与前端中的SCSS变量相对应的文本。我为所有颜色创建了实用程序类来实现fill-property:
color__fill--black { fill: black; }
我在这个网站上遇到过建议更改SVG文件的fill-property的答案,但这是不可能的,因为我在CDN上只有它的source-URL。我也看到有人建议使用CSS过滤器,但这并不能解决我的问题,因为颜色变化很大,从黑色到蓝色到黄色到白色。
2条答案
按热度按时间wfveoks01#
我建议你加载选定的SVG并将其内嵌到HTML元素中。这里我只使用fetch function。基本上,数组中的数据URL可以替换为普通URL,代码仍然可以工作(从同一域的Web服务器运行)。
当涉及到颜色时,可能有许多不同的方法。这里我改变了一个样式元素的内容。SVG中的任何元素都将获得指定的颜色。
pdkcd3nj2#
很简单,创建一个本地javascript
<load-svg>
Web组件。<style>
元素