SVG填充背景圖片

Question

因此，我已經閱讀了很多問題，但到目前為止，沒有一個問題對我有用。

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

所以我的svg是紅色。 但是，我想將填充更改為圖像。

問題是，我希望能夠覆蓋此圖像。 例如，onClick更改SVG的背景圖像。

我一直在努力。

謝謝！

Answer 1

試試這個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');
});

第一個示例是hover更改，第二個示例是click 。