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

Posted 2023-02-19

【中文标题】使用 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