用背景图像填充 SVG

【问题标题】：SVG fill with background image用背景图像填充 SVG
【发布时间】：2016-02-12 13:41:53
【问题描述】：

所以我已经阅读了很多问题，但到目前为止没有一个对我有用。

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

所以我的 svg 是红色。但是，我想将填充更改为图像。

转折是，我希望能够覆盖此图像。例如，onClick 改变 SVG 的背景图片。

我一直在挣扎。

谢谢！

【问题讨论】：

看看stackoverflow.com/questions/3796025/…
没有看到像 M. Night Shyamalan 电影那样的转折
@KaterinaTort 调查了这个问题，谢谢。他使用 svg 路径而不是多边形。用Polygon有没有办法可以实现？

标签： javascript css svg svg-filters svg-animate

【解决方案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>

$('.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。

【讨论】：