В настоящее время я пытаюсь отобразить несколько изображений в элементе SVG. Я сделал изображение, используя шаблон. Но это не работает должным образом, как решить или как этого достичь?
Пример ссылки: https://jsfiddle.net/8qsdmzny/
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1080 250" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #000000;
stroke-miterlimit: 10;
stroke-opacity: 0.15;
}
.st1 {
stroke: #F9B233;
stroke-width: 3px
}
.st2 {
fill: #121212;
}
.st3 {
fill: #FFFFFF;
}
.st4 {
fill: #FBB31A;
}
.st5 {
clip-path: url(#SVGID_2_);
fill: #FBB31A;
}
.st6 {
clip-path: url(#SVGID_4_);
fill: #FBB31A;
}
.st7 {
clip-path: url(#SVGID_6_);
fill: #FBB31A;
}
.st8 {
clip-path: url(#SVGID_8_);
fill: #FBB31A;
}
.st9 {
clip-path: url(#SVGID_10_);
fill: #FBB31A;
}
.st10 {
clip-path: url(#SVGID_12_);
fill: #FBB31A;
}
.st11 {
clip-path: url(#SVGID_14_);
fill: #FBB31A;
}
.st12 {
clip-path: url(#SVGID_16_);
fill: #FBB31A;
}
</style>
<line class="st0" x1="830.58" y1="187.56" x2="575.84" y2="128.18"></line>
<line class="st0" x1="1017.34" y1="141.51" x2="579.95" y2="128.18"></line>
<line class="st0" x1="933.97" y1="65.95" x2="578.77" y2="126.42"></line>
<line class="st0" x1="699.72" y1="58.31" x2="578.77" y2="126.42"></line>
<line class="st0" x1="524.17" y1="127.01" x2="413.21" y2="193.35"></line>
<line class="st0" x1="520.65" y1="127.59" x2="204.2" y2="177.32"></line>
<line class="st0" x1="522.41" y1="125.24" x2="72.69" y2="122.31"></line>
<line class="st0" x1="521.82" y1="124.07" x2="257.63" y2="54.79"></line>
<g>
<path class="st2" d="M566.66,163.67c-13.84,1.92-28.02,1.9-42.56-0.18c-9.98-1.43-17.72-9.36-19.07-19.32 c-1.81-13.42-1.72-27.15,0.12-41.21c1.37-10.47,9.78-18.67,20.31-19.64c13.18-1.22,26.72-1.16,40.55,0.15 c10.58,1,18.98,9.22,20.28,19.74c1.76,14.18,1.52,27.75-0.23,40.98C584.72,154.29,576.78,162.26,566.66,163.67z"></path>
<path class="st3" d="M559.06,134.92l0.34-12.9l-4.27-0.12l-0.34,13.13c-3.95,1.03-6.86,4.6-6.86,8.87c0,5.07,4.12,9.18,9.2,9.18 s9.2-4.11,9.2-9.18C566.32,139.48,563.21,135.81,559.06,134.92z M557.12,148.68c-2.66,0-4.8-2.15-4.8-4.79 c0-2.64,2.16-4.79,4.8-4.79c2.65,0,4.8,2.15,4.8,4.79C561.93,146.53,559.77,148.68,557.12,148.68z"></path>
<path class="st3" d="M549.46,116.81l-0.9-4.16l-14.59,3.13c-1.51-3.02-4.62-5.11-8.23-5.11c-5.08,0-9.2,4.11-9.2,9.18 c0,5.07,4.12,9.18,9.2,9.18c5.05,0,9.15-4.07,9.19-9.09L549.46,116.81z M525.73,124.63c-2.66,0-4.8-2.15-4.8-4.79 c0-2.64,2.16-4.79,4.8-4.79s4.8,2.15,4.8,4.79C530.54,122.48,528.38,124.63,525.73,124.63z"></path>
<path class="st4" d="M558.41,100.75c-6.49,0-11.75,5.25-11.75,11.72c0,6.47,5.26,11.72,11.75,11.72c6.49,0,11.75-5.25,11.75-11.72 C570.16,106,564.9,100.75,558.41,100.75z M558.41,120.25c-4.3,0-7.78-3.47-7.78-7.76s3.48-7.76,7.78-7.76 c4.3,0,7.78,3.47,7.78,7.76S562.7,120.25,558.41,120.25z M558.41,116.01c-1.95,0-3.53-1.58-3.53-3.52s1.58-3.52,3.53-3.52 c1.95,0,3.53,1.58,3.53,3.52S560.35,116.01,558.41,116.01z"></path>
</g>
<g>
<defs>
<pattern patternUnits="userSpaceOnUse" id="first-image" width="80" height="80">
<image xlink:href="https://i.imgur.com/9QeT6su.jpg" x="0" y="0" width="80" height="80"></image>
</pattern>
</defs>
<circle class="st1" cx="393.75" cy="198.58" r="33.14" fill="url(#first-image)"></circle>
</g>
<g>
<defs>
<pattern patternUnits="userSpaceOnUse" id="second-image" width="80" height="80">
<image xlink:href="https://i.imgur.com/9QeT6su.jpg" x="0" y="0" width="80" height="80"></image>
</pattern>
</defs>
<circle cx="185.58" cy="180" r="33.14" fill="url(#second-image)"></circle>
</g>
<g>
<defs>
<pattern patternUnits="userSpaceOnUse" id="third-image" width="80" height="80">
<image xlink:href="https://i.imgur.com/9QeT6su.jpg" x="0" y="0" width="80" height="80"></image>
</pattern>
</defs>
<circle cx="50.78" cy="121.89" r="33.14" fill="url(#third-image)"></circle>
</g>
<g>
<defs>
<pattern patternUnits="userSpaceOnUse" id="fourth-image" width="80" height="80">
<image xlink:href="https://i.imgur.com/9QeT6su.jpg" x="0" y="0" width="80" height="80"></image>
</pattern>
</defs>
<circle cx="238.46" cy="56.63" r="33.14" fill="url(#fourth-image)"></circle>
</g>
<g>
<defs>
<pattern patternUnits="userSpaceOnUse" id="fifth-image" width="80" height="80">
<image xlink:href="https://i.imgur.com/9QeT6su.jpg" x="0" y="0" width="80" height="80"></image>
</pattern>
</defs>
<circle cx="718.37" cy="52.64" r="33.14" fill="url(#fifth-image)"></circle>
</g>
<g>
<defs>
<pattern patternUnits="userSpaceOnUse" id="img6" width="80" height="80">
<image xlink:href="https://i.imgur.com/9QeT6su.jpg" x="0" y="27" width="80" height="80"></image>
</pattern>
</defs>
<circle cx="948.73" cy="60.72" r="33.14" fill="url(#img6)"></circle>
</g>
<g>
<defs>
<pattern patternUnits="userSpaceOnUse" id="img7" width="80" height="80">
<image xlink:href="https://i.imgur.com/9QeT6su.jpg" x="0" y="0" width="80" height="80"></image>
</pattern>
</defs>
<circle cx="1031.58" cy="140.54" r="33.14" fill="url(#img7)"></circle>
</g>
<g>
<defs>
<pattern patternUnits="userSpaceOnUse" id="img8" width="80" height="80">
<image xlink:href="https://i.imgur.com/9QeT6su.jpg" x="0" y="0" width="80" height="80"></image>
</pattern>
</defs>
<circle cx="843.66" cy="191.06" r="33.14" fill="url(#img8)"></circle>
</g>
</svg>