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

Posted 2023-03-05

【中文标题】自定义 SVG 形状剪辑路径图像

【英文标题】：Custom SVG shape clip path image

【发布时间】：2021-09-20 12:19:20

【问题描述】：

一直在努力解决这个问题，但浪费了这么多时间，我认为最好还是问问。

目标是拥有自定义（响应式）形状 - 包含图像（以下示例）：

我已经关注了一些在线资源并设法让这个（有点）工作：

SVG 自定义路径和剪辑路径

<header>
<h1><span class="text-shadow">Hiking</span><br>
    <span class="text-shadow">The Pinicles</span><br>
    <span class="text-shadow">NZ</span></h1>

<svg width='0' height='0'>
  <defs>
    <clipPath id='clipper'>
      <path d="M0 830.5V0.500008H514C514 0.500008 575.5 0.500008 632.5 146.5C689.5 292.5 239.5 646.667 0 830.5Z" fill="#C4C4C4"/>
    </clipPath>
  </defs>
</svg>
<img class="headerIMG" src="/ASSETS/IMG/blog-images/mountain.JPG" >   

并将剪辑路径应用于图像：

    img.headerIMG 
    clip-path: url(#clipper);

结果：

我想做但失败的是：

移动 IMG 以定位它，以便显示照片的不同部分（不是左上角）

调整 SVG 剪辑路径的大小，使其可以为 100vh 或 50vh，具体取决于所使用的媒体查询。

---

这里的任何帮助都会很棒，请随时提出您可能需要更好地理解我想要做什么的任何问题。

【问题讨论】：

相关：***.com/a/60492086/8620333

请看这个：***.com/questions/65457332/…

【参考方案1】：

有几种不同的方法可以独立于剪辑路径移动图像。但它们归结为将剪辑应用于父元素，因此您可以在其中移动图像。

例如

<div class="headerIMG-container">
  <img class="headerIMG" src="/ASSETS/IMG/blog-images/mountain.JPG" >
</div>

.headerIMG-container 
  clip-path: url(#clipper);


.headerIMG 
  transform: tarnslate(0, -100px);

或类似的东西

<div class="headerIMG></div>

.headerIMG 
  clip-path: url(#clipper);
  background: url(/ASSETS/IMG/blog-images/mountain.JPG) no-repeat;
  background-position: 0px 100px;

或全部在 SVG 中完成

<svg  >
  <defs>...clip...</defs>

  <g clip-path="url(#clipper)">
    <image class="headerIMG" xlink:href="/ASSETS/IMG/blog-images/mountain.JPG"   transform="translate(0, -100)"/>
  </g>
</svg>