SVG не может изменить цвет, когда требуется SVG в JS

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

Это зависит от того, используете ли вы такой упаковщик, как веб-пакет или нет, но требуется svg, который обычно не возвращает svg в виде строкового значения.

Вместо этого вы можете сделать что-то вроде этого:

Настройка файла vrm.js

и внутри этого есть ...

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

затем укажите это в своем коде с помощью следующего ...

let VrmSvg = require('...path to new js file').svg;