如何在 SVG 剪辑路径中居中对齐图像?

Posted

技术标签:

【中文标题】如何在 SVG 剪辑路径中居中对齐图像?【英文标题】:How to center-align an image in an SVG clip-path? 【发布时间】:2016-05-25 02:30:17 【问题描述】:

我有一个使用 SVG clipPath 剪辑的图像。但是,我希望图像在 clipPath 中水平和垂直居中对齐。

有没有办法做到这一点?

<!-- SVG Reference -->
<svg  >
  <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

【问题讨论】:

【参考方案1】:

你的剪辑路径使用的是绝对坐标,所以基本上是固定在页面上的。 您可以设置 img 尺寸以匹配箭头形状的大小(大约 258x156)。但这会使图像变形。

或者您可以通过将图像的宽度设置为 258 来保持图像的正确纵横比。然后使用相对定位将其居中以将其向上移动一点..

body, svg 
  margin: 0;
  padding: 0;


img 
  clip-path: url(#svgPath2);
  -webkit-clip-path: url(#svgPath2);
  position: relative;
  top: -20px;
<!-- SVG Reference -->
<svg  >
  <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" >
</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  >
  <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" 定义您的剪辑路径。这样,它就可以应用于页面上任何位置的元素,并且可以调整以适应元素的形状。

【讨论】:

以上是关于如何在 SVG 剪辑路径中居中对齐图像?的主要内容,如果未能解决你的问题,请参考以下文章

在 svg 中居中文本无法正常工作

如何调整 SVG 剪辑路径的大小?

如何使用 CSS 在两个图像之间创建剪辑路径 [关闭]

自定义 SVG 形状剪辑路径图像

如何在弹性项目(单元格)中居中图像

如何使用 svg 剪辑路径?