css – Load SVG with link and also use shift on it

i have svg which has a form and also i wish to place various photos on this form when i click web links and also i wish to use shift when the photos altered.

I made use of fill quality and also place in the fill the link of the picture utilizing javascript and also the photos showed up yet i can not use the shift on fill quality.

HTML Code:

<< svg id=" logo design" viewbox=" 0 0 322 419.6">>.
<< course course=" st0" d=" M289.9,234.5c31.4-37.8,41.3 -91.4,22.8 -140.8 c-27.9 -74.6 -111 -112.4 -185.5 -84.5 c-48.8,18.3 -79.9,60.7 -90.9,108 C36.1,117.6,5.7,268,0.7,318.4c-1.1,10.9 -0.6,28.5,5,43.4 c17.4,46.6,69.5,69.4,116.1,52c16.1-6,29.4 -16.6,39.3 -29.2 c0,0,0.1-0.2,0.1 -0.2 S258.3,272.5,289.9,234.5 z"/>>.
<< defs>>.
<< pattern id=" imageFill1" x=" 0" y=" 0" size=" 1" elevation=" 1" >>.
<< picture id="patternImage "xlink: href=" images-testing/production. jpg" elevation=" 100%"/>
<> .
<< pattern id=" imageFill2" x=" 0" y=" 0" size=" 1" elevation=" 1">
<> < picture id="patternImage "xlink: href=" images-testing/branding. jpg" elevation=" 100%"/>
<> .
<< pattern id=" imageFill3" x=" 0" y=" 0" size=" 1" elevation=" 1">
<> < picture id="patternImage "xlink: href=" images-testing/media. jpg" elevation=" 100%"/>
<> .
<.

<.

<< h1 design=" shade: white"><> < a course=" image-link" data-fill=" #imageFill 1">> Manufacturing<  < h1 design=" shade: white"><> < a course=" image-link" data-fill=" #imageFill 2">> Branding<  < h1 design=" shade: white"><> < a course=" image-link" data-fill=" #imageFill 3">> Media< 

JS:

 << manuscript>>.
const rect = document.getElementById(' logo design');
const toggleLinks = document.querySelectorAll('. image-link');

toggleLinks.forEach( web link => > {
link.addEventListener(' click', feature() {
const fillAttribute = this.getAttribute(' data-fill');

rect.style.setProperty(' fill', 'link($ {fillAttribute} )');
} );
} );

<.

CSS:

 #logo {
shift: load 0.5 s convenience;
}