SVG图标文件修改fill属性失效解决方案

举个例子,以下为一个svg文件的代码

<svg t="1740016684352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1210" width="200" height="200"><path d="M395.345 121.194l62.089 93.08a112.63 112.63 0 0 1 8.82 109.083l-38.29 84.24a18.875 18.875 0 0 0-1.415 10.494c5.826 37.915 27.696 75.83 65.612 113.746 37.915 37.915 75.83 59.786 113.746 65.612 3.56 0.545 7.2 0.042 10.493-1.415l84.24-38.291a112.63 112.63 0 0 1 109.084 8.82l90.967 60.645c50.494 33.664 65.038 101.044 33.676 152.372l-3.154 4.88-82.874 118.404c-24.514 35.01-66.734 53.123-108.991 46.719C581.602 925.905 437.262 848.6 306.33 717.668 175.397 586.736 98.092 442.396 74.415 284.65c-6.404-42.257 11.71-84.477 46.719-108.991l117.351-82.146c50.96-35.672 121.189-23.279 156.86 27.68z m-76.327 50.61c-6.494-7.424-17.315-9.371-25.983-4.697l-2.119 1.307-117.34 82.138c-6.573 4.602-9.961 12.505-8.745 20.527 20.649 137.571 88.537 264.328 206.148 381.94C488.591 770.63 615.348 838.517 753.047 859.185a21.043 21.043 0 0 0 18.915-6.878l1.473-1.871 81.806-116.887 1.28-1.975 0.956-1.77c3.989-8.584 1.714-18.925-5.575-25.076l-1.927-1.447-90.967-60.645a21.203 21.203 0 0 0-18.273-2.536l-2.261 0.875-85.086 38.67a110.324 110.324 0 0 1-61.366 8.17c-59.107-9.08-113.826-40.644-164.511-91.33-50.685-50.684-82.248-105.403-91.334-164.54-2.934-19.135-0.753-38.606 6.461-57.149l2.092-5.033 38.291-84.24a21.203 21.203 0 0 0-0.424-18.43l-1.223-2.085-61.173-91.697-1.183-1.509z" fill="#576176" p-id="1211"></path></svg>

博主封装了一个svg的组件,内容如下

<template>
    <svg :style="{width, height}">
        <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
</template>

<script setup lang="ts">
defineProps({
    //xink:href的前缀
    prefix: {
        type: String,
        default: '#icon-'
    },
    //图标名称
    name:String,
    // 接受父组件传递:颜色值
    color: {
        type: String,
        default: ''
    },
    // 接受父组件传递:宽度
    width: {
        type: String,
        default: '16px'
    },
    // 接受父组件传递:高度
    height: {
        type: String,
        default: '16px'
    }


})
</script>

<style>

</style>

传递fill属性时,使用该svg失效,原因是因为原svg代码中已经包含了fill属性,删除该内容即可,

删除后可正常修改fill属性

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嘿rasa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值