3

Bom, rasterizei uma imagem e preciso colori-la. A questão é que a mesma não é nenhuma forma geométrica(gola de camiseta) e preciso dar a opção do usuario de colorir ela. No entanto ao exportar o svg não aparece o atributo Fill, que usaria para fazer essa coloração.. Como colorir esse svg? Segue o codigo do svg que é renderizado:

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  preserveAspectRatio="xMidYMid" width="54" height="37" viewBox="0 0 54 37">
    <image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAlCAMAAAA+2eraAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB5lBMVEUAAACzzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB4AAAB1WLE/AAAAoHRSTlMAIrLUfTEBAzmD1n8J9uefVxQjaK3wTNz9051iBxE+c6zkv/vXq4tuUDQhBhs7WHSSueVAvi+hsB/3TlSj0c2lYCmKqSZch8O7mXxKkw7m73gYLGaJl7eBclI4GhLsE1oWCgIEMvnBm8Qn2S17z9sFtd4MLvjF42rzj7xI0hk69F9pr5aIuKQP3eo3/lsLdgiuJJWQepxVp6oVooKYQ6iG+RY0bgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAFxEAABcRAcom8z8AAAIsSURBVDjLY2BgYGBkYmZhZWMgArBzcHJxQ5g83LwLgICPX0AQvx4hYRFRkEqwPjHxBTAgISklzSqDTYesnLyCIlwdSJ/SAlSgrKKqpq6hqSWrzcAuqyOkq6dvYGiEpgaoz3gBGQCoz5AMbSYMDKYSpGvjAPrOjGRd5qBgsrCEcKysbWzxqLWzd4CFmiM4eJ0gPGcGBhdXNzN3LFo8PL28NRm0oTwfSKz4+oF5/gFgXmCQRrBXSKhNGMgkT7XwiMio6BiwjDNEV2wcNDbjIXyjBOQo9vXVTkxCcJMZUlIhyqRhQmxpEIF0fGkrEerxDETqzYSESpYrHm0+0PDIRhLLgYjlBuLUFZUHUeKELJgPdYG9Ly5tBRAFhUUoosUlKIGLAUrLwNISxmjiERBtqeVYdaVXQKQr0SXYqqCxUI1Fl5UkRLKGB0Oqlg8iJRmFIVUHceGCekcsRspBo7MUPTgTc6GpqgGrBxqhsmZo4k1Q8WYcwdUCkU7zRBENyYIIt7Lj0MbWBlFgiJzKyqGBWNPOgAtoM0HzljMsVrUjOyBCnYwMuEEiNFEvsIEFIpSf2sWADxRBc2kZxJ2JpRBudw8DftALjfaOdKA7GVWglvUxEAL9E6BKRSYG2UGZnAR1AeuHSehFyWQidAHBlG4UXVOJqo2AYFo9kq7p7ETqYmBgLYPrmqFNtC4GhpnQAF0wi3i7wAEzG1w3zEkiSRcQzAVWa5OJDQ0kEDNvPi4pAHQb17SBoGL0AAAAAElFTkSuQmCC"
      width="54" height="37"/>
</svg>
2
  • Como vc gerou esse svg? Tem alguma coisa estranha ai, parece um base64 dentro do svg... Até onde sei base64 não tem fill e não permiti trocar cores assim...
    – hugocsl
    17/03/2018 às 10:34
  • O @hugocsl tem razão. Você até que está usando uma tag svg, mas o conteúdo não é referente. Portanto, não é possível colorir.
    – user54824
    18/03/2018 às 22:50

1 Resposta 1

3

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
preserveAspectRatio="xMidYMid" width="130" height="60" viewBox="0 0 130 60">
<desc>
Imagem de gola de camiseta, rasterizada, com opção de colorir.
(feColorMatrix hueRotate)
</desc>
<defs>
<filter id="filter">
<feColorMatrix id="matrix" type="hueRotate" values="0"/>
</filter>
</defs>
<image x="25%" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAlCAMAAAA+2eraAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB5lBMVEUAAACzzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB4AAAB1WLE/AAAAoHRSTlMAIrLUfTEBAzmD1n8J9uefVxQjaK3wTNz9051iBxE+c6zkv/vXq4tuUDQhBhs7WHSSueVAvi+hsB/3TlSj0c2lYCmKqSZch8O7mXxKkw7m73gYLGaJl7eBclI4GhLsE1oWCgIEMvnBm8Qn2S17z9sFtd4MLvjF42rzj7xI0hk69F9pr5aIuKQP3eo3/lsLdgiuJJWQepxVp6oVooKYQ6iG+RY0bgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAFxEAABcRAcom8z8AAAIsSURBVDjLY2BgYGBkYmZhZWMgArBzcHJxQ5g83LwLgICPX0AQvx4hYRFRkEqwPjHxBTAgISklzSqDTYesnLyCIlwdSJ/SAlSgrKKqpq6hqSWrzcAuqyOkq6dvYGiEpgaoz3gBGQCoz5AMbSYMDKYSpGvjAPrOjGRd5qBgsrCEcKysbWzxqLWzd4CFmiM4eJ0gPGcGBhdXNzN3LFo8PL28NRm0oTwfSKz4+oF5/gFgXmCQRrBXSKhNGMgkT7XwiMio6BiwjDNEV2wcNDbjIXyjBOQo9vXVTkxCcJMZUlIhyqRhQmxpEIF0fGkrEerxDETqzYSESpYrHm0+0PDIRhLLgYjlBuLUFZUHUeKELJgPdYG9Ly5tBRAFhUUoosUlKIGLAUrLwNISxmjiERBtqeVYdaVXQKQr0SXYqqCxUI1Fl5UkRLKGB0Oqlg8iJRmFIVUHceGCekcsRspBo7MUPTgTc6GpqgGrBxqhsmZo4k1Q8WYcwdUCkU7zRBENyYIIt7Lj0MbWBlFgiJzKyqGBWNPOgAtoM0HzljMsVrUjOyBCnYwMuEEiNFEvsIEFIpSf2sWADxRBc2kZxJ2JpRBudw8DftALjfaOdKA7GVWglvUxEAL9E6BKRSYG2UGZnAR1AeuHSehFyWQidAHBlG4UXVOJqo2AYFo9kq7p7ETqYmBgLYPrmqFNtC4GhpnQAF0wi3i7wAEzG1w3zEkiSRcQzAVWa5OJDQ0kEDNvPi4pAHQb17SBoGL0AAAAAElFTkSuQmCC" 
width="54" height="37" filter="url(#filter)"/>
<foreignObject y="65%" width="130" height="21">
<select xmlns="http://www.w3.org/1999/xhtml" 
onclick="matrix.setAttribute('values', event.target.value)">
<option value="0">yellowgreen</option>
<option value="45">mediumseagreen</option>
<option value="90">lightseagreen</option>
<option value="135">skyblue</option>
<option value="180">lightsteelblue</option>
<option value="225">violet</option>
<option value="270">lightpink</option>
</select>
</foreignObject>
</svg>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .