SVG fill with background image

Question

So I've read through a lot of questions, but none have worked for me so far.

      <svg height="100%" width="100%" class="myclass">
        <polygon points="0,0 513,0 0,513" style="fill:red;" />
      </svg>

So my svg is the color red. However, I want to change the fill to an image.

The twist is, I want to be able to override this image. For example, onClick change the background image of the SVG.

I've been struggling.

Thanks!

take a look http://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image — Katya Pavlenko, Nov 11 '15 at 13:04
didn't see that twist coming, like an M. Night Shyamalan movie — Jaromanda X, Nov 11 '15 at 13:08
@KaterinaTort took a look into that question thank you. He uses svg path instead of polygon. Is there no way with Polygon that it can be achieved? — pourmesomecode, Nov 11 '15 at 14:20

score 0 · Answer 1 · answered Nov 11 '15 at 13:16

Try this https://jsfiddle.net/2Lzo9vfc/62/

HTML

<svg height="100%" width="100%" class="hover">
   <polygon class="shape" points="0,0 513,0 0,513" style="fill :red;" />
</svg>

<svg height="100%" width="100%" class="click">
   <polygon class="shape" points="0,0 513,0 0,513" style="fill :red;" />
</svg>

JS

$('.hover').hover(function(){
  $(this).find('polygon').css('fill', 'black');
},function(){
    $(this).find('polygon').css('fill', 'red');
});

$('.click').click(function() {
    $(this).find('polygon').css('fill', 'black');
});

First example is change on hover second one is on click.

SVG fill with background image

1 Answers1