使用现有的 SVG 路径屏蔽图像答案

【问题标题】：Masking an image with an existing SVG path使用现有的 SVG 路径屏蔽图像
【发布时间】：2022-01-26 01:04:55
【问题描述】：

我有一组组成徽标的 SVG 路径。

然后，我想要几张逐渐滑过的图像（显示为 SVG）。我的问题是我不能让它们作为背景，换句话说，我希望 SVG 遮盖图像。

我有一个这样的 SVG：

<svg class="polygon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="225.533px" height="261.262px" viewBox="0 0 225.533 261.262" style="enable-background:new 0 0 225.533 261.262;" xml:space="preserve">
  <g id="svg-draw">
    <path data-name="nav-projects" data-href="<?php print JUri::base() ?>projects" data-ajax="true" class=" st4 hover-logo" d="M26.05,147.366c-4.384,10.375-21.823,47.717-24.713,71.831c-2.804,23.373,2.034,40.255,27.625,37.926c6.952-0.97,15.662-4.346,24.417-9.214"></path>
  </g>
  <image clip-path="url(#svg-draw)" height="100%" width="100%"  xlink:href="<?php print THEME_URL."/img/rev1.jpg"; ?>" />
</svg>

如果你注意到了，我已经将image 标签放在了 SVG 中。但什么也没有发生。上面例子中svg的大部分Paths我也去掉了，因为太长了，这里就不复制了。

我使用了图片的clip-path属性，但是没有用。

【问题讨论】：

如果您希望 SVG 成为背景图像，它必须在单个文件中完成。您需要将任何图像元素转换为使用数据 URL。
@RobertLongson 你能详细说明一下吗？我希望 SVG 屏蔽图像，因此图像以某种方式充当 SVG 的背景。
我无法详细说明，因为您的问题不清楚，我猜测发生了什么以及您想要什么，这就是我写评论而不是答案的原因。
比这更清楚？我有一个由多个路径组成的 SVG 徽标。我想要一张图片作为 SVG 标志的背景。
如果你想要一张图片作为背景，它应该是文件中的第一项。您如何显示 SVG 徽标？

标签： javascript html css svg mask

【解决方案1】：

您不能只使用任何元素进行剪辑。您必须定义一个 <clipPath> 并使用它进行剪辑。

<svg class="polygon" version="1.1" id="Layer_1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="225.533px" height="261.262px"
     viewBox="0 0 225.533 261.262">

  <defs>
    <clipPath id="svg-draw">
      <path d="M26.05,147.366c-4.384,10.375-21.823,47.717-24.713,71.831
               c-2.804,23.373,2.034,40.255,27.625,37.926
               c6.952-0.97,15.662-4.346,24.417-9.214"></path>
    </clipPath>
  </defs>

  <image clip-path="url(#svg-draw)" height="100%" width="100%"
         xlink:href="http://placekitten.com/200/300" />

</svg>

【讨论】：

【解决方案2】：

根据您希望达到的效果，这篇 CSS 技巧文章应该为您提供正确的指导 https://css-tricks.com/clipping-masking-css/

【讨论】：