javascript - 使用现有 SVG 路径遮盖图像

Question

我有一组构成 Logo 的 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 路径，因为它们太长了，无法复制到这里。

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

Answer 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>