Ein Bild mit einem vorhandenen SVG-Pfad maskieren

Question

Ich habe eine Reihe von SVG-Pfaden, die ein Logo bilden.

Dann möchte ich mehrere Bilder (als SVG erscheinen), die schrittweise durchlaufen. Mein Problem ist, dass ich sie nicht als Hintergrund arbeiten lassen kann, mit anderen Worten, ich möchte, dass das SVG das Bild (die Bilder) maskiert.

Ich habe ein SVG wie folgt aus:

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

Und wenn Sie feststellen, habe ich das image Tag direkt im SVG setzen. Aber nichts passiert. Ich habe auch die meisten Pfade des Svg im obigen Beispiel entfernt, weil sie zu lang sind, um hier kopiert zu werden.

Ich verwendete die clip-path Eigenschaft des Bildes, aber ohne Erfolg.

Answer 1

Sie können nicht einfach mit irgendeinem Element abschneiden. Sie müssen eine <clipPath> definieren und damit abschneiden.

<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

Je nach Effekt, den Sie erreichen wollen, diese CSS Tricks Artikel sollten Sie mit der richtigen Anleitung liefern https://css-tricks.com/clipping-masking-css/