1. Zuhause
  2. Frage und Antwort
  3. SVG mit füllen Bild

SVG mit füllen Bild

2017-07-10 3 views
0

Ich habe diese SVG-Datei - Wo ich will verschiedene Wege zu verschiedenen Hintergrundbildern haben. Ich habe diese Antworten unter anderem versucht: 1. Fill SVG path element with a background image without tiling or scaling 2. Fill SVG path element with a background-imageSVG mit füllen Bild

Aber ich kann nicht scheinen, um es zu arbeiten, wie ich will. Die Bilder werden nicht angezeigt, oder sie sind zu klein oder zu groß. Der Versuch, Höhe und Breite zu wählen, ist auch nicht so hilfreich.

Wie kann ich diesen Weg füllen:

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

Mit einem Bild wie folgt aus: (zB) http://calciodanese.altervista.org/alterpages/hbkgepage.jpg

Quelle

2017-07-10 Cassens

+0

Sie verwenden ein Muster per 2. schließen Bitte geben Sie die genaue Markup Ihrer Versuch Methode unter Verwendung von 2 und erklären, warum es nicht, wie Sie sich anzeigen lassen möchten. –

Antwort

0

Um eine <pattern> zu haben, die outomatically füllt die gesamte, was auch immer Form, die Sie anwenden, um , müssen Sie ihm eine ViewBox geben, die mit den Abmessungen des Bildes übereinstimmt. Und setzen Sie das Attribut preserveAspectRatio auf "xMidYMid slice".

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

Quelle

2017-07-10 14:37:09

Verwandte Themen

 Verwandte Themen