既存のSVGパスで画像をマスキングする

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> 

をそして、あなたが気づけば、私は右のSVG内imageタグを入れています。しかし、何も起こりません。上記の例では、コピーが長すぎてここにコピーできないので、私はまた、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>

Answer 2

あなたはSVGはそれが完了していなければならない背景画像になりたい場合は、あなたが達成したい効果に応じて、このCSSのトリックの記事は、右の指導https://css-tricks.com/clipping-masking-css/