塗りつぶし画像付きSVG

Question

私はこのSVGファイルを持っています - 異なるパスに異なる背景画像を持たせたいのですが。 1. Fill SVG path element with a background image without tiling or scaling 2. Fill SVG path element with a background-image

しかし、私は私が望む通りに動作するように見えることはできません：私は他の人の間でこれらの答えを試してみました。画像が表示されていないか、小さいか大きい画像になっています。高さと幅を試してみるのもそれほど役に立ちません。

<g id="KK"><path class="cls-1" d="M303.83,1171.58c-3,1.39-5.62,1.93-8.54,1.2-2.44-.62-4.93-.87-7.34-1.85-4.58-1.87-8.13-5-11.42-8.48q-6-6.34-11.61-13.06a7.39,7.39,0,0,0-5.71-2.94c-3-.15-5.95-.57-8.93-.69a33.73,33.73,0,0,1-9.15-2c-4.12-1.34-8.29-2.5-12.39-3.89a25.65,25.65,0,0,0-7.91-1.35c-6.12-.1-12.25-.39-18.37-.25-3.38.08-5.22-1.83-6.91-4.14a6.89,6.89,0,0,1-.57-2.57c-.44-2.19-.81-4.39-1.33-6.56a19.24,19.24,0,0,0-3.38-6.75c-3.68-5.08-7.19-10.29-11.9-14.53a11.94,11.94,0,0,1-2.9-4.46c-3.22-7.71-6.36-15.46-8.17-23.66a14.34,14.34,0,0,0-2.64-5.62c-1.25-1.67-2.31-3.51-3.69-5.07-3.58-4.07-4.16-9-3.34-13.89a90.56,90.56,0,0,0,1.59-17.8,6.69,6.69,0,0,1,1.3-4.64,7.47,7.47,0,0,0,1.34-5.08c0-2.24-.09-4.49.08-6.72a10.91,10.91,0,0,0-2.2-7.51c-3.82-5.35-7.46-10.83-11.21-16.21a19.19,19.19,0,0,1-3.18-6.84c-.88-3.93-2-7.79-3.1-11.68a14.93,14.93,0,0,0-1.09-3.4c-1.54-2.72-1.72-5.65-1.73-8.66,0-4.18-.18-8.37-.26-12.55a12.83,12.83,0,0,0-1.91-6.8c-1.35-2.15-2.6-4.37-3.78-6.61-1.63-3.1-2-6.21.3-9.21a6.22,6.22,0,0,0,1.14-3.79c0-1.64.13-3.29.2-4.92a2.84,2.84,0,0,1,2-2.7c1.11-.39,2.26-.67,3.42-1a25.86,25.86,0,0,1,5.3,4.91,8.17,8.17,0,0,0,5.93,2.62,17.89,17.89,0,0,0,9.53-1.79c4.94-2.47,10-4.71,15-7,1.21-.56,2.44-1.08,3.92-1.73,1.5,1.16,3,2.3,4.53,3.52a8.11,8.11,0,0,0,4.82,2.07,13.57,13.57,0,0,1,4.73,1.18,15.19,15.19,0,0,0,7.39,1.36c.45,0,.9,0,1.35,0,6.8-.07,5.27.47,10-3.58a10.18,10.18,0,0,1,1.35-.8c.75.6,1.58,1.2,2.32,1.88,1.65,1.52,3.3,3,4.87,4.64a5.38,5.38,0,0,0,5.2,1.8c2.93-.52,5.92-.73,8.89-1.06,2.24-.25,4.41-.37,6.54.8a9,9,0,0,0,3.85.85c6.85.25,6.85.21,13.06-3.38,2.06-1.19,4.15-2.35,5.84-3.3,3.58.86,6.74,1.66,9.92,2.35a7.48,7.48,0,0,1,4.77,3c1.57,2.18,3.35,4.2,5,6.35a3,3,0,0,0,3.52,1.24c1.58-.47,3.17-.87,4.71-1.41a56.55,56.55,0,0,1,12.69-2.6,6.78,6.78,0,0,1,3.89.67c.4.2.8.39,1.2.62,7,4,14.65,6.68,22.23,9.42a22.79,22.79,0,0,0,8.3,1.44c11.5-.2,23-.27,34.51-.39,1.34,0,2.69-.07,4,0,2.07.16,2.81,1.49,1.92,3.45a30.26,30.26,0,0,1-2,3.52,16.3,16.3,0,0,0-2.53,8c-.38,6.1-1,12.2-1.58,18.29-.27,3-.6,5.94-.82,8.92-.85,11.49.13,23-.14,34.49a10.62,10.62,0,0,0,1.5,5.08c5.22,10.42,10.47,20.81,16.86,30.58.9,1.37,1.72,2.79,2.58,4.2,3.31,5.43,3.3,5.43,2.23,11.71-.25,1.47-.56,2.94-.68,4.42a6.64,6.64,0,0,1-3.1,5.15c-3.54,2.5-6.88,5.29-10.83,7.15-2.1,1-3.47,2.67-4.92,4.42-3.47,4.17-4.84,9.18-6.29,14.21-.58,2,0,3.83.62,5.68a51.37,51.37,0,0,1,2.26,11.85,7.63,7.63,0,0,1-2.07,6.09c-1.71,1.88-3.28,3.88-4.88,5.85a3.79,3.79,0,0,1-3.51,1.51,22.89,22.89,0,0,1-7.37-1.68c-3-1.3-6.12-2.36-9.19-3.52a5.77,5.77,0,0,0-5.51.69c-3.19,2-6.1,4.26-8.08,7.57a44.6,44.6,0,0,1-3.11,4.39,6.76,6.76,0,0,1-7.06,2.84c-4.45-.95-8.93-.5-13.41-.54a6.34,6.34,0,0,0-4.53,1.59c-2.32,2.1-4.62,4.23-7,6.28-1.59,1.39-1.73,2.89-1,4.82C300.12,1160.74,301.87,1166,303.83,1171.58Z" transform="translate(-4.18 -15.07)"></path></g> 

このようなイメージでは：（例） http://calciodanese.altervista.org/alterpages/hbkgepage.jpg

Answer 1

outomaticallyあなたにそれを適用どんな形状の全体を埋め<pattern>を持っているために、私はこのパスを埋めるにはどうすればよい

あなたはそれにイメージのfimensionsに一致するviewBoxを与える必要があります。また、preserveAspectRatio属性を"xMidYMid slice"に設定します。あなたは2通りのパターンを使用し

<svg width="400" height="400"> 
 

 
    <defs> 
 
     <pattern id="imgpattern" x="0" y="0" width="1" height="1" 
 
       viewBox="0 0 1024 576" preserveAspectRatio="xMidYMid slice"> 
 
     <image width="1024" height="576" xlink:href="http://calciodanese.altervista.org/alterpages/hbkgepage.jpg"/> 
 
     </pattern> 
 
    </defs> 
 

 

 
    <path fill="url(#imgpattern)" stroke="black" stroke-width="4" 
 
     d="M 100,50 L 120,110 150,90 170,220 70,300 50,250 50,200 70,100 50,70 Z" /> 
 

 
    <rect x="200" y="20" width="100" height="100" 
 
     fill="url(#imgpattern)" stroke="black"/> 
 

 
    <rect x="310" y="20" width="100" height="50" 
 
     fill="url(#imgpattern)" stroke="black"/> 
 
    <rect x="310" y="80" width="50" height="200" 
 
     fill="url(#imgpattern)" stroke="black"/> 
 

 
    <circle cx="220" cy="300" r="50" 
 
     fill="url(#imgpattern)" stroke="black"/> 
 

 
</svg>