Warum ist das Musterbild meines SVG größer als der Pfad, den ich daraus gemacht habe?

Question

alle! Ich glaube, ich habe hier ein Problem habe:

this tutorial Folgen, machte ich einen Weg von einem Bild (der Rahmen des Spiegels) und angewandter auch das Bild als Füllmuster für den SVG-Pfad. Ich verstehe nicht, warum das Musterbild größer wird, wie du es auf dem Bild siehst. Hier sind die Aufschläge:

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="100%" height="100%" 
    viewBox="0 0 1949 2220" 
    preserveAspectRatio="xMidYMid slice"> 
    <defs> 
     <pattern id="mirror" height="100%" width="100%" 
       patternContentUnits="userSpaceOnUse" 
       viewBox="0 0 1 1" 
       preserveAspectRatio="xMidYMid slice"> 
      <image xlink:href="mirror.jpg" 
        preserveAspectRatio="xMidYMid slice" 
        x="0" y="0" 
        width="1" height="1" /> 
     </pattern> 
    </defs> 

    <path ................. 

und die Seite:

<div class="w3-container"> 
      <div class="w3-row"> 
       <div id="left_pallette" class="w3-quarter w3-border"> 
       </div>     
       <div id="mirror" class="w3-half">      
        <object id="mirror_object" type="image/svg+xml" data="mirror_frame.svg"> 
         <img src="mirror_frame.svg" onerror="this.src='mirror.jpg'"/>. 
        </object> 
       </div> 
       <div id="right_pallette" class="w3-quarter w3-border"> 
       </div>     
      </div> 
     </div> 

Ich würde irgendwelche Ideen auf, schätzen, wie dieses Problem zu beheben. Danke!

Answer 1

Ihr Muster ist anders als das Tutorial definiert. Hast du versucht, es so zu machen, wie sie es vorschlagen?

<pattern id="mirror" patternUnits="userSpaceOnUse" width="1949" height="2220"> 
    <image xlink:href="mirror.jpg" x="0" y="0" width="1949" height="2220" /> 
</pattern>