求助，用JS如何控制svg

Posted 2023-03-23

参考技术A 解决方法：
A）让伺，服，器代为读取这些外部资源，使它们变成同网域的资料。
B）用　JS 建立 img，将其 crossOrigin 特性设成 *anonymous*，再请求 SVG。如果对方的伺，服，器有明确允许(有设定正确的　Access-Control-Allow-Origin)，并且该 SVG 没有引用任何外部资源，并且浏览器支援，那麼载入后你可以用 JS 存取其内部资料。

使用 vuetify / Vue.js 控制 svg 的颜色

【中文标题】使用 vuetify / Vue.js 控制 svg 的颜色

【英文标题】：Control the color of a svg with vuetify / Vue.js

【发布时间】：2021-12-21 12:34:26

【问题描述】：

颜色由 vuetify 控制，有深色和浅色主题。如何根据活动主题更改 svg 的颜色？

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" xml:space="preserve">
<path fill="blue"

填充仅适用于颜色，但不适用于“主要”“错误”等通常的主题属性。

谢谢

【参考方案1】：

在您的 vuetify.js 文件中启用 customProperties 将允许您将组件内的主题颜色作为 css 变量读取。

将css-class应用到你的svg元素并定位css中的fill属性，例如：

<rect
class="fillClass"
..
/>

<style scoped>
.fillClass 
fill: var(--v-error-base);

</style>

查看这个帖子，特别是 4 月 21 日的答案以获取更多信息：

Using custom theming in Vuetify and pass color variables to components