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上的第二个更改。

SVG填充背景图片

1 个答案: