Question

我想更改SVG的颜色。在我的js文件中，我首先包含了它，例如：

let VrmSvg = require('@src/assets/images/vrm.svg');

然后，我尝试执行以下操作：

 let _new_svg = VrmSvg.replace("rgb(255,255,255)", ((index) >= colors.length) ? "%23fff" : colors[(index)].replace("#","%23"));

不要关注我的变量。

现在，这不起作用。我会告诉你它什么时候起作用。在我之前，其他开发人员会尝试进行http api调用以获取该svg，作为响应，他正在与我执行相同的代码（替换功能）。因此，我认为区别在于要求它与使http api对其进行调用。

如果需要，我还将发布我的svg内容。

<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 40 40" width="40" height="40">

    <defs>
        <clipPath id="_clipPath_bV3rFtMJT2YVUd3w3HxRFhJgB50imkCE">
            <rect width="40" height="40"/>
        </clipPath>
    </defs>
    <g clip-path="url(#_clipPath_bV3rFtMJT2YVUd3w3HxRFhJgB50imkCE)">
        <mask id="_mask_C4LsnjmjxRPYTQbZR4sq3rRWgds6obLw">
            <path d=" M 31.299 12.597 C 31.299 6.192 26.107 1 19.703 1 C 14.836 1 10.669 3.998 8.949 8.247 C 8.405 9.59 8.106 11.059 8.106 12.597 C 8.106 14.142 8.414 15.613 8.962 16.961 L 8.955 16.963 L 8.99 17.038 C 9.066 17.219 9.154 17.393 9.238 17.569 L 19.69 40 L 19.691 40 L 19.715 40 L 19.716 40 L 30.184 17.533 C 30.262 17.37 30.343 17.21 30.412 17.043 L 30.45 16.963 L 30.442 16.96 C 30.991 15.613 31.299 14.141 31.299 12.597 Z " 
                  fill="white" 
                  stroke="none"/>
        </mask>
        <path d=" M 31.299 12.597 C 31.299 6.192 26.107 1 19.703 1 C 14.836 1 10.669 3.998 8.949 8.247 C 8.405 9.59 8.106 11.059 8.106 12.597 C 8.106 14.142 8.414 15.613 8.962 16.961 L 8.955 16.963 L 8.99 17.038 C 9.066 17.219 9.154 17.393 9.238 17.569 L 19.69 40 L 19.691 40 L 19.715 40 L 19.716 40 L 30.184 17.533 C 30.262 17.37 30.343 17.21 30.412 17.043 L 30.45 16.963 L 30.442 16.96 C 30.991 15.613 31.299 14.141 31.299 12.597 Z " 
              fill="rgb(255,255,255)" 
              mask="url(#_mask_C4LsnjmjxRPYTQbZR4sq3rRWgds6obLw)" 
              vector-effect="non-scaling-stroke" stroke-width="4" 
              stroke="rgb(55,55,55)" 
              stroke-linejoin="miter" 
              stroke-linecap="butt"
              stroke-miterlimit="4"/>
    </g>
</svg>

Answer 1

这取决于您是否使用像webpack这样的捆绑程序，但是要求svg通常不会将svg作为字符串值返回。

您可以改为执行以下操作：

设置“ vrm.js”文件

在其中...

shuffle

然后通过以下代码在您的代码中要求它...

modulde.exports = {
  svg: "<svg>...SVG code goes here...</svg>"
}

在js中需要svg时svg无法更改颜色

1 个答案: