javascript - 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');
});

第一个例子是悬停时的变化，第二个是点击时的变化。