css - SVG 1.1 作为带有 CSS 的掩码

Question

我无法将图像屏蔽到 Illustrator SVG，我做错了什么？

.contato .tinypic .svgmask-img{
    -webkit-mask: url(#svgmask);
}

<img class="svgmask-img img-responsive" src="http://il7.picdn.net/shutterstock/videos/5241152/thumb/1.jpg">

 <svg version="1.1" id="svgmask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
 <path d="M112,235.6l-92.9-67.5c-7.7-5.6-11-15.6-8-24.7L46.6,34.2c3-9.1,11.4-15.2,21-15.2h114.9c9.6,0,18,6.2,21,15.2l35.5,109.3
    c3,9.1-0.3,19.1-8,24.7L138,235.6C130.2,241.3,119.8,241.3,112,235.6z"/>
 </svg>

我创建了那个 SVG 并为 mouseover 和 mouseout 事件向 SVG 元素添加了一些 jQuery 动画，所以我不能使用其他方法来屏蔽，因为我不想将相同的动画应用到我的图像，只应用到面具。

Answer 1

根据您更新 SVG 的方式，您可以尝试使用 clip-path 而不是 -webkit-mask。它确实涉及对 SVG 代码进行一些调整，但它适用于 most browsers .

.contato .tinypic .svgmask-img {
  -webkit-clip-path: url(#svgmask);
          clip-path: url(#svgmask);
}

<div id="contato" class="contato">
  <div class="container">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mydetails-small">
      <div class="col-xs-4 hidden-sm hidden-md hidden-lg tinypic">
        <img class="svgmask-img img-responsive" src="http://il7.picdn.net/shutterstock/videos/5241152/thumb/1.jpg">
      </div>
    </div>
  </div>
</div>

<svg width="0" height="0">
  <defs>
    <clipPath id="svgmask"> // Path and id moved to defs
      <path d="M112,235.6l-92.9-67.5c-7.7-5.6-11-15.6-8-24.7L46.6,34.2c3-9.1,11.4-15.2,21-15.2h114.9c9.6,0,18,6.2,21,15.2l35.5,109.3
        c3,9.1-0.3,19.1-8,24.7L138,235.6C130.2,241.3,119.8,241.3,112,235.6z" />
    </clipPath>
  </defs>
</svg>