I have an SVG logo, and I want to be able to change its color through background images. So I use a mask tag inside SVG. Normally, the code in HTML looks like this:
<svg id="mainLogo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 985.6 521.1" style="enable-background:new 0 0 985.6 521.1;" xml:space="preserve">
<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In -->
<defs>
<mask id="mainLogo-mask1"><rect x="0" y="0" fill="white" width="100%" height="100%" data-percent="100"/></mask>
<mask id="mainLogo-mask2"><rect x="0" y="0" fill="white" width="100%" height="100%" data-percent="100"/></mask>
</defs>
<path mask="url(#mask2)" fill="pink" d="M204.2,479.7h10.3c3.8,0,6.8,0.2,8.9,0.5c2.2,0.3,4,0.8,5.6,1.5c3.3,1.4,5.7,3.7,7.4,6.8s2.5,6.9,2.5,11.5
c0,4.6-0.9,8.4-2.6,11.5c-1.7,3.1-4.2,5.3-7.4,6.7c-1.6,0.7-3.5,1.2-5.8,1.5c-2.3,0.3-5.1,0.5-8.7,0.5h-10.3V479.7z M215,518.5
c3.4,0,6.1-0.2,8.1-0.5c2-0.3,3.8-0.8,5.3-1.6c2.7-1.3,4.7-3.3,6.2-6.2c1.4-2.8,2.1-6.3,2.1-10.3c0-3.4-0.5-6.4-1.5-8.9
c-1-2.5-2.5-4.5-4.5-6.1c-1.6-1.3-3.5-2.2-5.8-2.7s-5.6-0.8-10-0.8h-8.7v37H215z M262.2,479.7h27.5v1.8h-25.3v16.7h23.1v1.8h-23.1
v18.4h26v1.8h-28.1V479.7z M312.6,479.7h2.1v38.6h23.9v1.8h-26V479.7z M359.9,479.7v25.4c0,4.7,1.2,8.2,3.6,10.6
c2.4,2.4,5.9,3.6,10.5,3.6c4.6,0,8.1-1.2,10.5-3.7c2.4-2.4,3.6-6,3.6-10.6v-25.4h2.1V506c0,4.7-1.4,8.4-4.3,11
c-2.9,2.7-6.9,4-11.9,4c-5.1,0-9.1-1.3-11.9-4s-4.3-6.3-4.3-11.1v-26.3H359.9z M425.2,499.4l-14.6-19.7h2.4l13.4,18.2l13.3-18.2h2.3
l-14.4,19.7l15.3,20.8h-2.4l-14.3-19.1l-14.1,19.1h-2.3L425.2,499.4z M463,479.7h27.5v1.8h-25.3v16.7h23.1v1.8h-23.1v18.4h26v1.8
H463V479.7z M544.4,479.7h2.1v18H575v-18h2.1v40.5H575v-20.8h-28.5v20.8h-2.1V479.7z M605.7,484.4c3.5-3.8,8.4-5.6,14.6-5.6
s11.1,1.9,14.6,5.6c3.6,3.8,5.3,8.9,5.3,15.5c0,6.6-1.8,11.7-5.3,15.5c-3.5,3.8-8.4,5.6-14.6,5.6c-6.2,0-11.1-1.9-14.6-5.6
s-5.3-8.9-5.3-15.5C600.3,493.4,602.1,488.2,605.7,484.4z M607.3,514.2c3.1,3.4,7.5,5.2,13,5.2c5.5,0,9.9-1.7,13-5.2
S638,506,638,500c0-6.1-1.6-10.8-4.7-14.3c-3.2-3.5-7.5-5.2-13-5.2s-9.9,1.7-13,5.2c-3.1,3.5-4.7,8.2-4.7,14.3
C602.5,506,604.1,510.7,607.3,514.2z M673.4,481.4h-14v-1.8h30.2v1.8h-14v38.7h-2.1V481.4z M710.2,479.7h27.5v1.8h-25.3v16.7h23.1
v1.8h-23.1v18.4h26v1.8h-28.1V479.7z M760.6,479.7h2.1v38.6h23.9v1.8h-26V479.7z M3.8,246.4c12.2-5.2,27.6-7,41.3,9.4
c14.4-10.6,30.7-15.2,48.2-13c25.8,3.3,28,24.9,17.1,42.2c-5.6,8.9-14.2,14.2-23.4,18.7c-1.8,0.9-3.6,1.7-6.8,3.2
c5.4,0.8,9.4,1.4,13.3,2.1c19.9,3.4,37.4,11.1,49.1,28.6c12.6,18.8,10.7,54.5-7.3,71c-12.6,11.5-27.1,17.7-42.9,21.6
c-9.6,2.3-19.6,3.6-29.5,4.3c-10.2,0.8-20.5,0.1-30.7,0.4c-4.6,0.1-4-2.7-4-5.6c0-34.8,0-69.6,0-104.4c0-17.3,0.3-34.7-0.4-52
c-0.6-14.8-7-21.7-21.4-25.5C5.8,247.4,5.2,247,3.8,246.4z M49,370.6C49,370.6,49,370.6,49,370.6c-0.1,17.2,0,34.3-0.1,51.5
c0,3.7,0.9,6.3,5.1,6.3c5.8,0,11.6,0.6,17.2-0.4c21.9-3.7,40.8-12.7,50.5-34.1c11.3-24.9,4.5-53.1-20-69
C89.6,317,76.2,312.6,61.8,311c-9-1-12.9,2.4-12.9,11.2C49.1,338.3,49,354.5,49,370.6z M49.7,286.7c-0.2,0-0.4,0-0.7,0.1
c0,4.3,0.3,8.7-0.1,13c-0.4,4.9,1.8,6.3,6.1,5.6c4.4-0.7,8.9-1.1,13.2-2.3c11.1-2.9,20.2-9,24.5-20c6.9-17.9-0.7-29.5-18.1-32.7
c-9.3-1.7-18.4,3.2-25.8,9.6c-0.8,0.7-1.2,2.4-1.1,3.5C48.2,271.2,49,279,49.7,286.7z M363.5,245.5c-1.9-0.1-3.3-0.3-4.8-0.3
c-16.2,0-32.3,0-48.5,0c-16.2,0-32.2,0.9-48,4.8c-25,6.2-46.2,18.2-60,40.4c-16.5,26.3-18.4,55.2-9.6,84.1
c9.6,31.5,31.6,51.6,63.5,60.3c36,9.8,69.4,4.6,99.6-18.1c4.2-3.2,8.9-5.9,8.3-12.5c-0.4-5.1-0.1-10.2-0.1-15.3
c-0.6-0.1-1.1-0.1-1.7-0.2c-0.5,0.6-1.1,1.1-1.6,1.7c-16.8,24.4-39.2,39.3-69.4,40.7c-26.6,1.2-48.1-9.5-62.1-32
c-17.5-28.2-19.9-58.7-8.4-90.1c1.1-3.1,2.9-3.5,5.6-3.5c33.3,0,66.7,0,100,0c11,0,20.9,3.4,30.2,9c2,1.2,4.2,2.3,6.9,3.7
c0-10.9,0-20.9,0-31.2c-1.1,0.3-1.6,0.4-1.9,0.6c-11.6,8.5-24.8,11.8-38.9,11.8c-30.3,0-60.7,0-91,0c-1.7,0-3.4-0.2-6.3-0.3
c9.7-17.3,21-32,38.6-38.7c35-13.2,68.6-10.9,99.6,14.2C363.5,264.6,363.5,255.2,363.5,245.5z M851.3,397
c-0.6,9.9-3.7,18.8-8.6,27.3c-0.4,0.6,1.4,3.5,2.7,3.9c6.9,2.4,13.8,4.6,20.9,6.4c22.7,5.9,45.5,7.7,68.5,2.1
c23.9-5.9,42.9-22.7,43.4-51.7c0.2-12.4-3-23.7-14-30.8c-6.4-4.1-13.2-7.8-20.3-10.2c-19.2-6.5-38.7-11.9-57.9-18.2
c-7.5-2.4-15.1-5.2-20.6-11.5c-12-13.8-5.5-36.4,4.9-46.3c7.8-7.4,17.3-10.9,27.5-12.9c21.5-4.3,46.6,1.5,56.1,27.7
c0.9,2.5,2.2,4.9,3.4,7.3c0.7-0.1,1.5-0.2,2.2-0.4c0-5.6-0.9-11.3,0.2-16.7c1.2-5.6,4.3-10.8,6.7-16.5c-1.6-0.8-3.1-1.7-4.8-2.4
c-25.1-9.5-50.7-11.5-76.8-4.5c-30.4,8.1-44.2,31.1-42.7,60.1c0.7,12.6,6.3,23,18.5,28c11.2,4.6,22.6,8.6,34.2,12.1
c16.9,5.2,34.5,8.4,50.4,16.7c11.9,6.2,16.6,16.4,17.6,29.2c1,12.1-5.2,20.2-14.7,26.3c-11,7.1-23.5,9-36.2,9.6
c-19.7,0.9-36.7-4.8-48.8-21.4c-3.4-4.6-6.9-9.1-10.3-13.7C852.1,396.8,851.7,396.9,851.3,397z M416.3,247.1c3.1,1.7,6,3.6,9.2,4.9
c14.4,6.1,21.5,16.4,21.3,32.5c-0.4,39.1-0.1,78.3-0.2,117.4c0,10.9,1.1,21.9-4.3,32.5c1.5,0.2,2.5,0.3,3.4,0.4
c13.6,0.4,27.3,0.5,40.9,1.2c19.1,1.1,38.3,0.9,57,5.8c2.9,0.8,3.9-0.4,4.6-2.9c2.6-8.2,5.4-16.4,8-24.7c0.3-1,0.4-2,0.7-3.6
c-1.2,0.5-1.9,0.6-2.4,0.9c-18.9,11.8-40.1,15.7-61.8,17.1c-6.5,0.4-13.2-1.1-19.7-2.2c-3.7-0.6-5.2-3.3-5.2-7.3
c0.2-55.5,0.2-110.9,0.3-166.4c0-2.4,0-4.9,0-7.5c-17.5,0-34.3,0-51,0C416.8,246,416.5,246.5,416.3,247.1z M585.2,247.1
c2.9,1.5,5.7,3.3,8.8,4.5c15,5.8,21.9,16.5,21.7,32.7c-0.4,27,0.4,54-0.2,81c-0.5,23,3.1,46.3-3.3,69.2c1.1,0.1,2,0.2,3,0.3
c19.6,0.7,39.3,0.9,58.9,2.2c13.1,0.9,26,3.3,39,4.9c1.1,0.1,3.1-0.6,3.4-1.5c3.2-9.1,6.1-18.3,9-27.4c0.2-0.5-0.1-1.2-0.3-2.1
c-0.9,0.3-1.5,0.4-2.1,0.7C700,425.5,675,430.3,648.4,428c-10.4-0.9-11.7-2.8-11.7-13.2c0-51,0-102,0-153c0-5.3,0-10.6,0-16.2
c-17.3,0-34,0-50.8,0C585.7,246.1,585.4,246.6,585.2,247.1z M740.1,247.8c2.5,1.3,5,2.7,7.6,3.8c15.6,6.3,22,15.7,22.1,32.5
c0,20,0.5,40-0.1,60c-0.8,30.1,3,60.4-3,90.2c9.1,0,18.6,0,28.8,0c-5.5-11.6-4.2-23.3-4.2-34.9c-0.1-49.6-0.1-99.3,0-148.9
c0-4.2-1.1-5.2-5.4-5.1c-13.3,0.3-26.6,0-40,0c-2.4,0-4.7,0.3-8.2,0.6C739.2,247.1,739.6,247.6,740.1,247.8z M2.4,499.2
c59.3,0,118.7,0,178,0c0-0.4,0-0.8,0-1.2c-59.3,0-118.7,0-178,0C2.4,498.4,2.4,498.8,2.4,499.2z M981.2,498c-59.5,0-119,0-178.6,0
c0,0.4,0,0.8,0,1.1c59.5,0,119,0,178.5,0C981.2,498.7,981.2,498.3,981.2,498z M784.5,221.8c0.1-7.5-5-12.7-12.2-12.6
c-7.2,0.1-12.4,5.1-12.4,12c0,7.2,5.3,12.7,12.4,12.7C779.2,233.9,784.4,228.7,784.5,221.8z M985.3,193.6
c-105.5-2.8-211.1-5.5-317.1-8.3c0-3.2,0-5.7,0-8.2c0-56.8,0-113.7,0-170.5c0-6.6,0-6.6-6.4-6.6C542,0,422.2,0,302.4,0
c-1.8,0-3.6,0-6.1,0c0,62.3,0,124,0,185.9c-50,1.3-99.3,2.5-148.5,3.8c-49.2,1.3-98.5,2.6-147.7,4c2.4,3.6,320.9,4.3,327,2
c-1.2-0.7-2.1-1.4-3-1.8c-7.4-3.7-15-7.2-19.4-15c-1.7-3-2-6.1,0.6-8.2c3.4-2.7,7.3-5.5,11.4-6.7c13.1-3.7,26.4-2.5,39.6-0.7
c2.6,0.3,5.2,0.7,7.7,1l0,0c0,0,0.1,0,0.1,0c0.3,0,0.7,0.1,1,0.1c6.7,1.1,28.8,7.1,32.7,9.3c7.8,4.3,15.7,8.7,23.8,13.2
c12-24.9,33-38.7,61.7-38.1c28.8,0.6,48.9,15.7,59.6,41c6.7-4.3,13.2-8.4,19.7-12.5c10.6-6.3,39.3-11.7,39.3-11.7s0,0,0,0
c10.3-1.3,20.7-2.6,31-3.3c8-0.5,15.9,1.6,22.9,5.8c7.1,4.3,8,11,1.5,16.2c-4.9,3.9-10.7,6.4-16.2,9.6c-1.1,0.6-2.3,1.1-3.5,1.7
c0.1,0.4,0.3,0.9,0.4,1.3c1.8,0,3.5,0,5.3,0c95.2,0,190.3,0,285.5,0c17.2,0,34.3,0.1,51.5,0c1.8,0,3.5-0.6,5.3-0.9
C985.5,195.2,985.4,194.4,985.3,193.6z M416.4,173c-4.3,0.2-8.6-0.2-12.9-0.6c-1.5-0.1-2.9-0.3-4.4-0.6c-0.1,0-22.1-4.6-30.7-9.1
l0,0c-0.2-0.2-0.5-0.3-0.7-0.5c-9.2-5.3-18.9-9.8-27.3-16.2c-5.1-3.9-8.4-10.4-11.6-16.3c-2.2-4-0.2-7.6,4.2-9.7
c7-3.2,14-2.4,21-0.6c19,4.8,35.9,14.1,50.8,26.6c6.6,5.5,13.2,11.4,15.9,20C422.1,170.1,420.6,172.7,416.4,173z M437.8,154.1
c-1.5,1.5-5.7,1.5-8.2,0.6c-14.5-5.1-26.9-13.7-38.7-23.2c-9.4-7.5-17.1-16.7-22.4-27.7c-2.5-5.2-3.5-10.3-1.7-15.9
c2.1-6.5,4.4-8.3,13.6-8.2c9.8,1.2,18.7,8.4,27.5,15.8c8.7,7.3,14.6,16.8,20.1,26.5c4.3,7.6,7.8,15.7,11,23.9
C439.8,148.3,439.4,152.6,437.8,154.1z M464.1,135.9c-1.6,7.7-7.6,10.3-13.6,5.2c-5.8-4.8-11.2-10.4-15.8-16.4
c-8.1-10.7-15.6-21.9-19.3-35.1c-2.4-8.7-4.5-17.4-0.1-26.2c4.2-8.4,8.9-10.2,17.3-6.2c8,3.8,13.5,10.2,17.8,17.6
c8.6,15.1,13.3,31.4,14.9,50.5C464.9,127.7,464.9,131.9,464.1,135.9z M481.8,140c-6.2,0.1-8.4-5.4-9.9-9.9
c-6.5-19.6-13.5-39.2-9.1-60.4c1.7-8.3,5.4-15.7,13-20.5c6.5-4.1,12.1-3.4,17,2.6c7.2,8.7,8.1,19.4,9.2,30c0.1,0.8,0,1.7,0,2.5
c-1.1,15.6-3,31.1-9.4,45.6C490.4,134.8,487.9,139.9,481.8,140z M517,139.5c-0.1,0.1-0.2,0.3-0.4,0.3c-4,1.5-8.2,4.3-12.1,3.9
c-1.7-0.2-3-6.6-4.2-10.2c-0.5-1.5-0.4-3.3-0.6-6.3c2.2-20.1,6.6-40.9,18.7-59c3.3-5,9.1-8.7,14.5-11.7c7-3.9,13.3-0.9,16.6,6.5
c2.9,6.7,3.6,13.8,1.4,20.5C544.3,104.9,533.6,124,517,139.5z M524.5,147c0.2-0.8,0.5-1.6,0.8-2.4c6.6-17.5,16.3-33.1,29.4-46.4
c7.9-8.1,16.9-15.1,28.6-17.3c10.5-2,16.2,3.4,14.6,13.9c-0.4,2.6-1.2,5.2-2.2,7.7c-3.6,9.4-10,16.8-17.1,23.6
c-4.1,4-8.3,7.9-12.5,11.9c-2,1.8-4.4,3.8-6.7,5.4c-2.2,1.2-4.3,2.6-6.6,3.6c-6.8,3-13.4,6.7-20.6,8.5
C525.2,157.2,522.9,153.9,524.5,147z M629.3,140.1c-8.9,10.5-20.2,17.5-32.7,22.6c-0.5,0.2-1,0.4-1.6,0.6c-9.1,4-30.2,9.8-30.2,9.8
v0c-4.8,0.6-9.8,1.3-14.8,1.3c-8.6,0-10.8-4.3-6.3-11.6c2.1-3.4,4.7-6.4,7.4-9.3c2.9-3.1,6.1-5.8,9.2-8.6c0,0,5.3-4.6,10.3-7.7
c0.5-0.3,1.1-0.6,1.6-0.8c0.6-0.3,1.1-0.6,1.7-0.9c0,0,0,0,0.1,0c0.7-0.3,1.2-0.6,1.6-0.9c6-3.4,11.9-6.9,18.1-9.8
c8.1-3.8,16.6-6.9,25.8-6.6c5.9,0.2,12,1.2,14.6,6.7C636.9,130.6,633.1,135.7,629.3,140.1z M477.1,155.2c-27.1,2.1-49,25.2-51,42.2
c37,0,73.9,0,111.2,0C532.8,176.4,508.3,152.8,477.1,155.2z"/>
</svg>But what I want, is to put that refs and mask tags there using jquery. I now have this code:
if($(id + " defs").length) {} else {$(id).prepend("<defs></defs>")}
// create two mask tags
if($(id + " defs mask").length) {} else {
$(id + " defs").append('<mask id="' + id + '-mask1"><rect x="0" y="0" fill="white" width="100%" height="0%" data-percent="100"/></mask>')
$(id + " defs").append('<mask id="' + id + '-mask2"><rect x="0" y="50%" fill="white" width="100%" height="50%" data-percent="100"/></mask>')
}
if($(id + " path").length < 2) {$(id + " path").clone().insertAfter(id + " path")}
$(id + " path:first").attr("mask", "url(" + id + "-mask1)");
$(id + " path:last").attr("mask", "url(" + id + "-mask2)");
$(id + " path:last").attr("fill", color);
But with jquery, it does not work.
I figured that it might need a reload after I add the masks, maybe it would work.
I used AJAX load, but it did not work, or I could not achieve it.
So what could be the solution?
