How can I make this possible? It's not working. I would like that the color of the rect changes after reload to one of the colors in the array.
This method isn't working. Can anybody help?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
<defs>
<style>
.cls-1 {
fill: #ff0000;
}
.cls-2 {
fill: #fff;
}
</style>
</defs>
<title>Logo MC</title>
<g id="Ebene_2" data-name="Ebene 2">
<g id="Ebene_1-2" data-name="Ebene 1">
<rect class="cls-1" width="72" height="72" />
<path class="cls-2" d="M12,20.41h4.62l7.61,13.17h.28l7.61-13.17h4.66V45.29H32.15V33l.28-4.17h-.28L25.83,40H23L16.65,28.85h-.28L16.65,33V45.29H12Z" />
<path class="cls-2" d="M63.22,41.29a12.21,12.21,0,0,1-4.34,3.39,13.84,13.84,0,0,1-10.76.16,13.18,13.18,0,0,1-6.86-17.12,12.54,12.54,0,0,1,6.86-6.86,13.15,13.15,0,0,1,5.16-1,11.75,11.75,0,0,1,9.32,4.07l-3.31,3.19a8.93,8.93,0,0,0-2.55-2.05,7.19,7.19,0,0,0-3.42-.76,8.68,8.68,0,0,0-3.27.61,7.82,7.82,0,0,0-2.66,1.72,8.17,8.17,0,0,0-1.79,2.69,9.77,9.77,0,0,0,0,7.06,8.17,8.17,0,0,0,1.79,2.69,8,8,0,0,0,2.66,1.72,8.88,8.88,0,0,0,3.27.61,7.92,7.92,0,0,0,3.7-.85,9.09,9.09,0,0,0,2.86-2.42Z" />
<path class="cls-2" d="M14,53.11h0a1.33,1.33,0,0,1-.14.19,1,1,0,0,1-.2.16,1.23,1.23,0,0,1-.26.12,1.65,1.65,0,0,1-.32,0,1,1,0,0,1-.45-.1,1,1,0,0,1-.36-.27,1.13,1.13,0,0,1-.25-.41,1.32,1.32,0,0,1-.1-.53,1.27,1.27,0,0,1,.1-.52,1.13,1.13,0,0,1,.25-.41,1,1,0,0,1,.36-.27A1,1,0,0,1,13,51a1.06,1.06,0,0,1,.58.15,1,1,0,0,1,.34.35h0l0-.34V50h.32v3.58H14Zm-.89.22a.8.8,0,0,0,.34-.07.69.69,0,0,0,.28-.2.87.87,0,0,0,.2-.32,1.14,1.14,0,0,0,.07-.43,1.18,1.18,0,0,0-.07-.43,1,1,0,0,0-.2-.32.77.77,0,0,0-.28-.19.8.8,0,0,0-.34-.07.83.83,0,0,0-.34.07.9.9,0,0,0-.28.2,1.16,1.16,0,0,0-.2.32,1.33,1.33,0,0,0,0,.85,1,1,0,0,0,.2.32.9.9,0,0,0,.28.2A.83.83,0,0,0,13.08,53.33Z" />
<path class="cls-2" d="M18.49,53a1.38,1.38,0,0,1-.17.25.93.93,0,0,1-.23.21,1.4,1.4,0,0,1-.3.15,1.52,1.52,0,0,1-.38,0,1.16,1.16,0,0,1-.49-.1.94.94,0,0,1-.38-.27,1.25,1.25,0,0,1-.26-.41,1.51,1.51,0,0,1-.09-.53,1.69,1.69,0,0,1,.08-.5,1.38,1.38,0,0,1,.24-.41,1.2,1.2,0,0,1,.38-.29,1.1,1.1,0,0,1,.49-.1,1.21,1.21,0,0,1,.48.09,1,1,0,0,1,.36.26,1.13,1.13,0,0,1,.23.4,1.46,1.46,0,0,1,.09.52v0a0,0,0,0,0,0,0v0h-2a1,1,0,0,0,.3.73.79.79,0,0,0,.29.17.89.89,0,0,0,.31.06.79.79,0,0,0,.49-.14,1.22,1.22,0,0,0,.3-.37Zm-.29-.86a.85.85,0,0,0-.05-.26.73.73,0,0,0-.14-.26.71.71,0,0,0-.25-.2.9.9,0,0,0-.39-.08,1,1,0,0,0-.29.05,1,1,0,0,0-.25.15.79.79,0,0,0-.19.25,1,1,0,0,0-.1.35Z" />
<path class="cls-2" d="M21.36,53.62a1.15,1.15,0,0,1-.37-.06,1.32,1.32,0,0,1-.29-.15,1.2,1.2,0,0,1-.22-.23.87.87,0,0,1-.14-.27l.28-.12a.92.92,0,0,0,.3.41.8.8,0,0,0,.44.13.75.75,0,0,0,.47-.13.38.38,0,0,0,.17-.3.37.37,0,0,0,0-.15.24.24,0,0,0-.09-.12.55.55,0,0,0-.17-.1l-.28-.09-.34-.08-.24-.08a.78.78,0,0,1-.22-.12,1,1,0,0,1-.17-.19.53.53,0,0,1-.06-.26.61.61,0,0,1,.08-.3.73.73,0,0,1,.21-.22,1,1,0,0,1,.3-.13,1.41,1.41,0,0,1,.35-.05,1,1,0,0,1,.3,0,1.08,1.08,0,0,1,.27.1,1.24,1.24,0,0,1,.22.18,1,1,0,0,1,.15.25l-.28.11a.63.63,0,0,0-.28-.3.81.81,0,0,0-.39-.1.78.78,0,0,0-.22,0l-.19.08a.44.44,0,0,0-.14.13.26.26,0,0,0-.05.17.25.25,0,0,0,.13.24,1.18,1.18,0,0,0,.37.15l.36.09a1.09,1.09,0,0,1,.55.27.58.58,0,0,1,.18.42.59.59,0,0,1-.07.29.72.72,0,0,1-.19.24,1,1,0,0,1-.31.16A1.14,1.14,0,0,1,21.36,53.62Z" />
<path class="cls-2" d="M24.41,50.45a.21.21,0,0,1-.17-.07.23.23,0,0,1-.08-.17.25.25,0,0,1,.08-.18.21.21,0,0,1,.17-.07.24.24,0,0,1,.18.07.29.29,0,0,1,.07.18.26.26,0,0,1-.07.17A.24.24,0,0,1,24.41,50.45Zm-.16,3.09V51.09h.32v2.45Z" />
<path class="cls-2" d="M27.71,54.7a1.09,1.09,0,0,1-.42-.07,1,1,0,0,1-.31-.16,1,1,0,0,1-.22-.23,1.49,1.49,0,0,1-.13-.25l.3-.12a.72.72,0,0,0,.29.39.84.84,0,0,0,.49.15.84.84,0,0,0,.67-.26,1,1,0,0,0,.22-.71v-.32h0a1.06,1.06,0,0,1-.35.35,1,1,0,0,1-.55.15,1,1,0,0,1-.45-.1,1,1,0,0,1-.36-.27,1.48,1.48,0,0,1-.35-.94,1.3,1.3,0,0,1,.1-.52,1.22,1.22,0,0,1,.25-.41,1,1,0,0,1,.36-.27,1,1,0,0,1,.45-.1,1,1,0,0,1,.55.15,1,1,0,0,1,.35.34h0v-.41h.31v2.37a1.45,1.45,0,0,1-.09.54,1,1,0,0,1-.26.39,1,1,0,0,1-.38.23A1.4,1.4,0,0,1,27.71,54.7Zm0-1.37a.8.8,0,0,0,.34-.07.76.76,0,0,0,.28-.2,1,1,0,0,0,.2-.31,1.2,1.2,0,0,0,.07-.44,1.18,1.18,0,0,0-.07-.43,1.16,1.16,0,0,0-.2-.32.87.87,0,0,0-.28-.19.8.8,0,0,0-.34-.07.78.78,0,0,0-.33.07,1,1,0,0,0-.47.52,1.08,1.08,0,0,0-.08.42,1.18,1.18,0,0,0,.08.43,1,1,0,0,0,.47.52A.78.78,0,0,0,27.72,53.33Z" />
<path class="cls-2" d="M31.31,51.55h0l.14-.21.2-.17a1,1,0,0,1,.25-.12.88.88,0,0,1,.29,0,.94.94,0,0,1,.39.07.78.78,0,0,1,.29.21.83.83,0,0,1,.16.31,1.29,1.29,0,0,1,.06.4v1.54h-.32V52.06a.81.81,0,0,0-.18-.58.64.64,0,0,0-.49-.18.72.72,0,0,0-.32.08.82.82,0,0,0-.25.21,1.08,1.08,0,0,0-.16.3,1,1,0,0,0-.06.35v1.3H31V51.09h.3Z" />
<path class="cls-2" d="M37.86,51.09h.3v.46h0a1.2,1.2,0,0,1,.13-.21,1.54,1.54,0,0,1,.19-.17,1.34,1.34,0,0,1,.24-.12A.78.78,0,0,1,39,51a.73.73,0,0,1,.5.16.84.84,0,0,1,.27.4,1.09,1.09,0,0,1,.34-.4.89.89,0,0,1,.54-.16.86.86,0,0,1,.38.07.75.75,0,0,1,.26.2.81.81,0,0,1,.15.31,1.6,1.6,0,0,1,.05.39v1.56h-.32V52a.93.93,0,0,0-.14-.55.54.54,0,0,0-.46-.19.61.61,0,0,0-.3.08.74.74,0,0,0-.23.2.85.85,0,0,0-.15.3,1,1,0,0,0-.06.34v1.32h-.32V52.05a.87.87,0,0,0-.14-.56.52.52,0,0,0-.45-.19.61.61,0,0,0-.3.08.69.69,0,0,0-.24.21.89.89,0,0,0-.15.31,1.49,1.49,0,0,0,0,.36v1.28h-.32Z" />
<path class="cls-2" d="M45.2,53.1h0a1,1,0,0,1-.35.37.88.88,0,0,1-.51.15,1.06,1.06,0,0,1-.37-.06,1,1,0,0,1-.3-.17.79.79,0,0,1-.19-.26.72.72,0,0,1-.07-.33.67.67,0,0,1,.08-.35.78.78,0,0,1,.22-.26A1.26,1.26,0,0,1,44,52a1.75,1.75,0,0,1,.4-.05,1.53,1.53,0,0,1,.45.06,1.33,1.33,0,0,1,.33.13V52a.73.73,0,0,0-.06-.3.63.63,0,0,0-.16-.23.7.7,0,0,0-.24-.15.87.87,0,0,0-.28-.05.85.85,0,0,0-.4.1.78.78,0,0,0-.29.28l-.28-.17a1,1,0,0,1,.39-.36,1.2,1.2,0,0,1,.57-.13,1.23,1.23,0,0,1,.44.07.93.93,0,0,1,.33.21.84.84,0,0,1,.22.31,1.07,1.07,0,0,1,.07.41v1.53H45.2Zm0-.65a1.66,1.66,0,0,0-.33-.15,1.2,1.2,0,0,0-.4-.06,1.36,1.36,0,0,0-.3,0,.9.9,0,0,0-.24.12.52.52,0,0,0-.16.17.5.5,0,0,0-.06.24.54.54,0,0,0,0,.22.57.57,0,0,0,.15.16.64.64,0,0,0,.2.11.85.85,0,0,0,.23,0,.71.71,0,0,0,.32-.07.77.77,0,0,0,.28-.19.92.92,0,0,0,.19-.28A.8.8,0,0,0,45.2,52.45Z" />
<path class="cls-2" d="M48.11,52.85a.43.43,0,0,0,.11.32.28.28,0,0,0,.24.11h.12l.12,0,.1.27a.49.49,0,0,1-.17.06l-.21,0a.64.64,0,0,1-.44-.17.6.6,0,0,1-.14-.2.85.85,0,0,1-.05-.3V51.38h-.44v-.29h.44v-.75h.32v.75h1.12v-.75h.32v.75h.61v.29h-.61v1.47a.43.43,0,0,0,.11.32.28.28,0,0,0,.24.11H50l.12,0,.1.27a.49.49,0,0,1-.17.06l-.21,0a.64.64,0,0,1-.44-.17.6.6,0,0,1-.14-.2.85.85,0,0,1-.05-.3V51.38H48.11Z" />
<path class="cls-2" d="M54.27,53a1.38,1.38,0,0,1-.17.25.93.93,0,0,1-.23.21,1.4,1.4,0,0,1-.3.15,1.52,1.52,0,0,1-.38,0,1.16,1.16,0,0,1-.49-.1,1.05,1.05,0,0,1-.39-.27,1.41,1.41,0,0,1-.25-.41,1.51,1.51,0,0,1-.09-.53,1.69,1.69,0,0,1,.08-.5,1.38,1.38,0,0,1,.24-.41,1.2,1.2,0,0,1,.38-.29,1.1,1.1,0,0,1,.49-.1,1.21,1.21,0,0,1,.48.09,1,1,0,0,1,.36.26,1.13,1.13,0,0,1,.23.4,1.46,1.46,0,0,1,.09.52v0a0,0,0,0,0,0,0v0h-2a1,1,0,0,0,.3.73.79.79,0,0,0,.29.17.89.89,0,0,0,.31.06.79.79,0,0,0,.49-.14,1.22,1.22,0,0,0,.3-.37ZM54,52.1a.85.85,0,0,0,0-.26.73.73,0,0,0-.14-.26.71.71,0,0,0-.25-.2.9.9,0,0,0-.39-.08,1,1,0,0,0-.29.05,1,1,0,0,0-.25.15.79.79,0,0,0-.19.25,1,1,0,0,0-.1.35Z" />
<path class="cls-2" d="M56.26,53.54V51.09h.3v.43h0a.78.78,0,0,1,.11-.2.9.9,0,0,1,.18-.16.7.7,0,0,1,.21-.11.51.51,0,0,1,.2,0l.19,0,.15,0-.1.29a.7.7,0,0,0-.28,0,.59.59,0,0,0-.25.07.68.68,0,0,0-.21.17.72.72,0,0,0-.14.26,1,1,0,0,0-.06.34v1.38Z" />
<path class="cls-2" d="M60.19,53.62a1,1,0,0,1-.36-.06,1,1,0,0,1-.52-.38.87.87,0,0,1-.14-.27l.28-.12a.92.92,0,0,0,.3.41.8.8,0,0,0,.44.13.75.75,0,0,0,.47-.13.38.38,0,0,0,.17-.3.37.37,0,0,0,0-.15.24.24,0,0,0-.09-.12.55.55,0,0,0-.17-.1l-.28-.09-.34-.08-.24-.08a.78.78,0,0,1-.22-.12,1,1,0,0,1-.17-.19.53.53,0,0,1-.06-.26.61.61,0,0,1,.08-.3.73.73,0,0,1,.21-.22,1,1,0,0,1,.3-.13,1.41,1.41,0,0,1,.35-.05,1,1,0,0,1,.3,0,1.08,1.08,0,0,1,.27.1,1.24,1.24,0,0,1,.22.18,1,1,0,0,1,.15.25l-.28.11a.67.67,0,0,0-.27-.3.88.88,0,0,0-.4-.1.78.78,0,0,0-.22,0l-.19.08a.58.58,0,0,0-.14.13.34.34,0,0,0,0,.17.25.25,0,0,0,.13.24,1.18,1.18,0,0,0,.37.15l.36.09a1.17,1.17,0,0,1,.56.27.61.61,0,0,1,.17.42.59.59,0,0,1-.07.29.61.61,0,0,1-.19.24.91.91,0,0,1-.31.16A1.14,1.14,0,0,1,60.19,53.62Z" />
</g>
</g>
<script type="text/javascript">
var colors = ['#ff0000', '#00ff00', '#0000ff'];
var random_color = colors[Math.floor(Math.random() * colors.length)];
document.getElementsByClassName('cls-1').fill = random_color;
</script>
Aucun commentaire:
Enregistrer un commentaire