自分のSVGのパターンイメージが、そのSVGのパスよりも大きいのはなぜですか？

Question

みんな！ 私はここでの問題を持っていると思う：

がthis tutorialに続いて、私がイメージからのパス（ミラーのフレーム）を作り、また、SVGパスの塗りつぶしパターンとして画像を適用します。私はあなたが写真を見ているように、パターンイメージがなぜ大きくなるのか理解していません。ここでマークアップは以下のとおりです。

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

やページ：

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

私はこの問題を解決する方法上の任意のアイデアをいただければ幸いです。 ありがとう！

Answer 1

パターンはチュートリアルとは異なります。彼らはあなたが提案したようにそれをやろうとしましたか？

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