Question

我有一组构成徽标的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.926
        c6.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>和剪辑。

＆＃13;

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

＆＃13;

Answer 2

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

使用现有SVG路径屏蔽图像

2 个答案: