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，并为SVG元素添加了一些jQuery动画，用于mouseover和mouseout事件，因此我无法使用其他方法进行屏蔽，因为我不想将相同的动画应用于我的图像，只对面具。

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>

SVG 1.1作为CSS的掩码

1 个答案: