Hello All,
I have been trying to change the color of svg files in header. PLEASE could someone help me what I did wrong…?
Thank you all for your help!
const menuItems = {
color: {
black: '#262626',
white: '#FFFFFF',
pink: '#FF00DE'
},
setItemsColor: (color) => {
return {
logo: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="0 0 170.74 24.509" viewBox="0 0 170.74 24.509" height="24.508" width="170.74" xmlns="http://www.w3.org/2000/svg" data-type="color" role="presentation" aria-hidden="true"><defs><style>#comp-lgu7g90u_r_comp-lhil9sry svg [data-color="1"] {fill: ${color};}</style></defs>
<g>
<defs>
<clipPath id="svgcid-td4hbr-vphbs1">
<path fill="${color}" d="M170.74 0v24.508H0V0h170.74z"></path>
</clipPath>
</defs>
<g>
<path fill="${color}" d="m15.708.539-5.586 8.382L4.536.539H0v23.467h4.488V7.171L9.5 14.746h1.194l5.013-7.507v16.767H20.2V.539Z" data-color="1"></path>
<g>
<g clip-path="url(#svgcid-td4hbr-vphbs1)">
<path fill="${color}" d="M46.836 5.522v13.466s-.239 5.521-9.5 5.521c-9.214 0-9.5-5.521-9.5-5.521V5.522S28.12 0 37.335 0c9.263 0 9.5 5.522 9.5 5.522m-4.154.808s0-3.434-5.347-3.434c-5.3 0-5.3 3.434-5.3 3.434v11.883s0 3.232 5.3 3.232c5.347 0 5.347-3.232 5.347-3.232Z" data-color="1"></path>
<path fill="${color}" d="M73.478 5.522v13.466s-.239 5.016-9.5 5.016h-9.5V.539h9.5c9.263 0 9.5 4.983 9.5 4.983m-4.154.808s0-2.828-5.347-2.828h-5.013V20.84h5.014c5.347 0 5.347-2.626 5.347-2.626Z" data-color="1"></path>
<path fill="${color}" d="M99.678.539v23.467h-4.487l-9.5-15.992v15.992h-4.487V.539h4.487l9.5 15.958V.539Z" data-color="1"></path>
<path fill="${color}" d="M125.511 24.006h-4.157l-1.957-6.127h-6.923l-1.764 6.127h-4.2L112.954.539h6.159Zm-6.684-9.258L116.01 3.671l-2.769 11.075Z" data-color="1"></path>
<path fill="${color}" d="M145.216 7.642V6.329s0-3.434-5.347-3.434c-5.3 0-5.3 3.434-5.3 3.434v11.884s0 3.232 5.3 3.232c5.347 0 5.347-3.232 5.347-3.232v-3.467h-6.159v-3.165h10.316v7.407s-.239 5.521-9.5 5.521c-9.214 0-9.5-5.521-9.5-5.521V5.522S130.654 0 139.873 0c9.263 0 9.5 5.522 9.5 5.522v2.12Z" data-color="1"></path>
<path fill="${color}" d="M160.28 3.67v7.911h8.785v3.164h-8.785v6.094h10.46v3.167h-14.943V.538h14.943V3.67Z" data-color="1"></path>
</g>
</g>
</g>
</g>
</svg>`,
menuAbout: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="0.141 -3 47.891 20" viewBox="0 0 54 18" height="18" width="54" xmlns="http://www.w3.org/2000/svg" data-type="ugc" role="presentation" aria-hidden="true">
<g>
<text letter-spacing=".04em" font-weight="500" font-family="AktivGrotesk-Medium, Aktiv Grotesk" font-size="18" fill="${color}" transform="translate(54 13)"><tspan y="0" x="-53.856">About</tspan></text>
</g>
</svg>`,
menuCompany: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="0.313 -2 74.344 20" viewBox="0 0 85 19" height="19" width="85" xmlns="http://www.w3.org/2000/svg" data-type="ugc" role="presentation" aria-hidden="true">
<g>
<text letter-spacing=".04em" font-weight="500" font-family="AktivGrotesk-Medium, Aktiv Grotesk" font-size="18" fill="${color}" transform="translate(85 14)"><tspan y="0" x="-84.672">Company</tspan></text>
</g>
</svg>`,
menuProduct: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="0.813 -3 68.063 20" viewBox="0 0 82 18" height="18" width="82" xmlns="http://www.w3.org/2000/svg" data-type="ugc" role="presentation" aria-hidden="true">
<g>
<text letter-spacing=".04em" font-weight="500" font-family="AktivGrotesk-Medium, Aktiv Grotesk" font-size="18" fill="${color}" transform="translate(82 13)"><tspan y="0" x="-81.18">Products</tspan></text>
</g>
</svg>`,
menuContact: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="0.328 -2 60.344 20" viewBox="0 0 72 19" height="19" width="72" xmlns="http://www.w3.org/2000/svg" data-type="ugc" role="presentation" aria-hidden="true">
<g>
<text letter-spacing=".04em" font-weight="500" font-family="AktivGrotesk-Medium, Aktiv Grotesk" font-size="18" fill="${color}" transform="translate(72 14)"><tspan y="0" x="-71.658">Contact</tspan></text>
</g>
</svg>`
}
}
}
$w.onReady(function () {
});
/**
* Adds an event handler that runs when an element is no longer
displayed in the viewable part of the current window.
[Read more](https://www.wix.com/corvid/reference/$w.ViewportMixin.html#onViewportLeave)
* @param {$w.Event} event
*/
export function section1_viewportLeave(event) {
$w('#logo').src = menuItems.setItemsColor(menuItems.color.black);
}