Wie kann ich ein Musterbild dynamisch zu einem Svg hinzufügen?

Question

Ich bin neu mit SVG-Bildern arbeiten. Ich benutze sie, um eine Jacke mehrere Male in verschiedenen Farben zu malen, ohne dass für jede Farbe ein Bild benötigt wird. Dies wird mit jQuery gemacht.

Das war der "einfache" Teil. Ich löste es, indem ich fill: #color; CSS Regel auf <path> innerhalb <svg> anwendete.

Der schwierige Teil ist, wenn Sie versuchen, den Svg-Pfad mit einem Bild zu füllen. Es ist wirklich komisch. Mein Code ist sehr gut in der html innerhalb der <svg> gedruckt, aber überhaupt nicht funktioniert. Und wenn ich in den Dev-Tools von Chrome das Element <defs> ausschneide und es wieder genau an der Stelle wieder einfüge, wo es war, funktioniert es plötzlich! Es macht mich verrückt :(

Mein Code:..

var items = [ 
 
      { 
 
       title: 'Africa', 
 
       // color: '#776254' 
 
      }, 
 
      { 
 
       title: 'Aguamarina', 
 
       // color: '#9cd3be' 
 
      }, 
 
      { 
 
       title: 'Aluminio', 
 
       // color: '#9b9b9b' 
 
      }, 
 
      { 
 
       title: 'Amarillo Jamaica', 
 
       // color: '#ffcd01' 
 
      }, 
 
      { 
 
       title: 'Amatista', 
 
       // color: '#4d4169' 
 
      }, 
 
      { 
 
       title: 'Ambar Brillante', 
 
       // color: '#eb6608' 
 
      }, 
 
      { 
 
       title: 'Arándano', 
 
       // color: '#604483' 
 
      } 
 
     ]; 
 

 
     $(function() { 
 
      var PrendaShow = { 
 
       $mac_wrapper: $('#prendas-mac-slider-wrapper .mac-slider'), 
 
       $fullprints_wrapper: $('#fullprints-gallery'), 
 
       img: { 
 
        src: 'image.svg', 
 
        width: 350, 
 
        height: 188 
 
       }, 
 
       init: function() { 
 
        this.makeItems(); 
 
        this.bindEvents(); 
 
       }, 
 
       bindEvents: function() { 
 
        // events 
 
       }, 
 
       makeItems: function() { 
 
        var self = this, 
 
         $model = $('<div/>', { class: 'mac-item' }); 
 
        $model.append($('<div/>', { class: 'item-img' })); 
 
        $.each(items, function() { 
 
         var $item = $model.clone(); 
 
         self.$mac_wrapper.append($item); 
 
        }); 
 
        this.svgDraw(); 
 
       }, 
 
       svgDraw: function() { 
 
        var self = this; 
 
        $.get(this.img.src, function(data) { 
 
         var $svg = self.normalizeSvg(data); 
 
         self.appendImgs($svg); 
 
        }); 
 
       }, 
 
       normalizeSvg: function (data) { 
 
        var $svg = $(data).find('svg'); 
 
        $svg = $svg.removeAttr('xmlns:a'); 
 
        $svg.width(this.img.width).height(this.img.height); 
 
        return $svg; 
 
       }, 
 
       appendImgs: function ($svg) { 
 
        var items = this.$mac_wrapper.find('.mac-item'); 
 
        $.each(items, function() { 
 
         var $clone = $svg.clone(), 
 
          color = $(this).data('color'); 
 
         $clone.find('path').css('fill', 'url(#img1)'); 
 
         var img = document.createElementNS('http://www.w3.org/2000/svg', 'image'); 
 
         img.setAttributeNS(null,'height','536'); 
 
         img.setAttributeNS(null,'width','536'); 
 
         img.setAttributeNS('http://www.w3.org/1999/xlink','href','http://www.boogdesign.com/examples/svg/daisy-grass-repeating-background.jpg'); 
 
         img.setAttributeNS(null,'x','10'); 
 
         img.setAttributeNS(null,'y','10'); 
 
         img.setAttributeNS(null, 'visibility', 'visible') 
 
         $clone.prepend($('<defs/>').html('<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100"></pattern>')); 
 
         $clone.find('pattern').append(img) 
 
         $(this).find('.item-img').append($clone); 
 
        }); 
 
       } 
 
      }; 
 
      PrendaShow.init(); 
 
     });

#prendas-mac-slider-wrapper { 
 
    margin-top: 80px; 
 
} 
 
.mac-slider { 
 
    display: flex; 
 
    font-size: 0; 
 
    padding: 0 100px; 
 
} 
 
.mac-item { 
 
    width: 100%; 
 
    height: 160px; 
 
    min-width: 0; 
 
    position: relative; 
 
    display: inline-block; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.item-img { 
 
    background: url('https://ae01.alicdn.com/kf/HTB1Cqi6KXXXXXbpXVXXq6xXFXXXy/Classic-font-b-White-b-font-font-b-Jacket-b-font-font-b-Men-b-font.jpg') center center no-repeat; 
 
    background-size: contain; 
 
    pointer-events: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: -9999px; 
 
    right: -9999px; 
 
    margin: auto; 
 
} 
 
svg { 
 
    mix-blend-mode: multiply; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hero"> 
 
     <div class="container-fluid"> 
 
      <div id="prendas-mac-slider-wrapper" class="row"> 
 
       <div class="mac-slider"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Ich bin nicht wegen der Bilder hochladen in der Lage, meine genaue Beispiel zu geben, ich hoffe, dass Sie wirklich verstehen, was ich hier versuche und was schief läuft.

---

EDIT: Nicht sicher, ob dies in einer Antwort verdient, aber ich zog es vor, es hier zu schreiben, da ich nicht denke, es ist der richtige Weg, dies zu tun.

Da ich wusste, dass aus Chrom Entwickler-Tools, wenn ich das <defs> Element gelöscht und es klebte wieder, es funktionierte, habe ich versucht, diese und arbeitete:

var svg_html = $svg.html(); 
$svg.html(''); 
$svg.html(svg_html); 

Answer 1

Ihr Problem ist hier:

$clone.prepend($('<defs/>').html('<pattern ... 

Sie können jQuery nicht zum Erstellen von SVG-Elementen wie diesem verwenden. Sie machen es richtig (mit createElementNS()), wenn Sie das Element <image> erstellen. Aber Sie müssen auch die gleiche Methode verwenden, wenn Sie die Elemente pattern> erstellen.