4

SVG clipPath を使用してクリップされた画像があります。ただし、画像がclipPath内で水平方向と垂直方向に中央揃えになるようにしたいと思います。

これを行う方法はありますか？

<!-- SVG Reference -->
<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath2">
      <path fill="#00B6B5" d="M262.229,81.068l-29.486-66.662
                              c-1.598-3.248-4.91-5.309-8.537-5.309H17.394c-6.408,0-10.596,6.703-7.773,12.441l26.736,61.072
                              c1.697,3.449,1.676,7.494-0.059,10.926L9.827,152.482c-2.902,5.742,1.283,12.521,7.732,12.521h206.715
                              c3.592,0,6.879-2.018,8.494-5.217l29.387-64.717C264.378,90.671,264.405,85.49,262.229,81.068z"/>
    </clipPath>
  </defs>
</svg>
<!-- SVG Reference -->

<div class="arrow-cards">
  <img src="http://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg" style="clip-path: url(#svgPath2); -webkit-clip-path: url(#svgPath2);">
</div>

http://codepen.io/aguerrero/pen/LGqMVq

4

1 に答える 1

4

クリップ パスは絶対座標を使用するため、基本的にページ上で固定されます。矢印の形のサイズ (約 258x156) に合わせて img のサイズを設定できます。しかし、それはイメージを形から引き延ばします。

または、画像の幅だけを 258 に設定して、画像の縦横比を正しく保つこともできます。次に、相対位置を使用して中央に配置し、少し上に移動します。

body, svg {
  margin: 0;
  padding: 0;
}

img {
  clip-path: url(#svgPath2);
  -webkit-clip-path: url(#svgPath2);
  position: relative;
  top: -20px;
}
<!-- SVG Reference -->
<svg height="0px" width="0px">
  <defs>
    <clipPath id="svgPath2">
      <path fill="#00B6B5" d="M262.229,81.068l-29.486-66.662
                              c-1.598-3.248-4.91-5.309-8.537-5.309H17.394c-6.408,0-10.596,6.703-7.773,12.441l26.736,61.072
                              c1.697,3.449,1.676,7.494-0.059,10.926L9.827,152.482c-2.902,5.742,1.283,12.521,7.732,12.521h206.715
                              c3.592,0,6.879-2.018,8.494-5.217l29.387-64.717C264.378,90.671,264.405,85.49,262.229,81.068z"/>
    </clipPath>
  </defs>
</svg>
<!-- SVG Reference -->

<div class="arrow-cards">
  <img src="http://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg" width="258">
</div>

または、包含divを矢印形状のサイズに設定し、それにクリップを適用するのがより簡単な方法です。を使用すると、画像が中央に配置されbackground-szie: coverます。

body, svg {
  margin: 0;
  padding: 0;
}

.arrow-cards {
  width: 265px;
  height: 165px;
  background-image: url(http://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg);
  background-size: cover;
  clip-path: url(#svgPath2);
  -webkit-clip-path: url(#svgPath2);
}
<div class="arrow-cards"></div>

<!-- SVG Reference -->
<svg height="0px" width="0px">
  <defs>
    <clipPath id="svgPath2">
      <path fill="#00B6B5" d="M262.229,81.068l-29.486-66.662
                              c-1.598-3.248-4.91-5.309-8.537-5.309H17.394c-6.408,0-10.596,6.703-7.773,12.441l26.736,61.072
                              c1.697,3.449,1.676,7.494-0.059,10.926L9.827,152.482c-2.902,5.742,1.283,12.521,7.732,12.521h206.715
                              c3.592,0,6.879-2.018,8.494-5.217l29.387-64.717C264.378,90.671,264.405,85.49,262.229,81.068z"/>
    </clipPath>
  </defs>
</svg>
<!-- SVG Reference -->

ページのさまざまな位置に矢印の形状を配置する場合は、おそらく でクリップ パスを定義する方法を検討することをお勧めしますclipPathUnits="objectBoundingBox"。そうすれば、ページ上の任意の要素に適用でき、要素の形状に合わせて調整されます。

于 2016-02-14T15:17:41.007 に答える