SVG Pfade und Bilder

Question

Ich versuche, Bilder zu SVG-Pfaden hinzuzufügen, wie der Titel sagt.

ich die folgende Geige gemacht haben,
JSFiddle

Ich mag würde Bilder in die Wege bringen, wie so,
(grüne Punkte, die Bilder darstellen) so image

Wie würde das getan werden? Ich habe versucht, dem Pfad Bilder hinzuzufügen, aber sie sind einfach nicht aufgetaucht.

Code:

<svg width="175" height="175"> 
    <g transform="translate(87.5,87.5)"> 
    <path fill="#1f77b4" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
    <path fill="#aec7e8" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
    <path fill="#ff7f0e" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
    <path fill="#ffbb78" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
    <path fill="#2ca02c" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
    <path fill="#98df8a" d="M5.357829746269671e-15,-87.5A87.5,87.5,0,0,1,83.21744517582593,-27.038987007807897L61.3431453010374,-19.93159613718411A64.5,64.5,0,0,0,3.949485927250214e-15,-64.5Z"></path> 
    <path fill="#d62728" d="M83.21744517582593,-27.038987007807897A87.5,87.5,0,0,1,51.4312095755914,70.7889870078079L37.91214877286452,52.18159613718411A64.5,64.5,0,0,0,61.3431453010374,-19.93159613718411Z"></path> 
    <path fill="#ff9896" d="M51.4312095755914,70.7889870078079A87.5,87.5,0,0,1,-51.43120957559139,70.7889870078079L-37.91214877286451,52.18159613718411A64.5,64.5,0,0,0,37.91214877286452,52.18159613718411Z"></path> 
    <path fill="#9467bd" d="M-51.43120957559139,70.7889870078079A87.5,87.5,0,0,1,-83.21744517582594,-27.038987007807886L-61.34314530103741,-19.9315961371841A64.5,64.5,0,0,0,-37.91214877286451,52.18159613718411Z"></path> 
    <path fill="#c5b0d5" d="M-83.21744517582594,-27.038987007807886A87.5,87.5,0,0,1,-1.607348923880901e-14,-87.5L-1.1848457781750641e-14,-64.5A64.5,64.5,0,0,0,-61.34314530103741,-19.9315961371841Z"></path> 
    </g> 
</svg> 

Answer 1

Hier ein Tipp, fügen Sie diese zu Ihrer Geige:

<circle cx="0" cy="0" r="10" fill="#12345"></circle> 

Answer 2

das Bild folgend, müssen Sie 5 Kreisen hinzuzufügen.

Jeder Kreis gedreht wird, um relativ zu dem anderen um den gleichen Winkel - 360/5 = 72

• Erstellen Sie den ersten Kreis:

<defs> <circle id="greenCircle" cx="13" cy="98" r="10" fill="#B6FF00" /> </defs>

• Verwenden Sie den Befehl <use> den Kreis zu klonen und drehen Sie es transform =" rotate (deg x y) " auf den gewünschten Winkel relativ zum ersten Kreis.

 
<svg width="175" height="175" > 
 
<defs> 
 
<circle id="greenCircle" cx="13" cy="98" r="10" fill="#B6FF00" /> 
 
</defs> 
 
    <g transform="translate(87.5,87.5)"> 
 
    <path fill="#1f77b4" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
 
    <path fill="#aec7e8" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
 
    <path fill="#ff7f0e" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
 
    <path fill="#ffbb78" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
 
    <path fill="#2ca02c" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> 
 
    <path fill="#98df8a" d="M5.357829746269671e-15,-87.5A87.5,87.5,0,0,1,83.21744517582593,-27.038987007807897L61.3431453010374,-19.93159613718411A64.5,64.5,0,0,0,3.949485927250214e-15,-64.5Z"></path> 
 
    <path fill="#d62728" d="M83.21744517582593,-27.038987007807897A87.5,87.5,0,0,1,51.4312095755914,70.7889870078079L37.91214877286452,52.18159613718411A64.5,64.5,0,0,0,61.3431453010374,-19.93159613718411Z"></path> 
 
    <path fill="#ff9896" d="M51.4312095755914,70.7889870078079A87.5,87.5,0,0,1,-51.43120957559139,70.7889870078079L-37.91214877286451,52.18159613718411A64.5,64.5,0,0,0,37.91214877286452,52.18159613718411Z"></path> 
 
    <path fill="#9467bd" d="M-51.43120957559139,70.7889870078079A87.5,87.5,0,0,1,-83.21744517582594,-27.038987007807886L-61.34314530103741,-19.9315961371841A64.5,64.5,0,0,0,-37.91214877286451,52.18159613718411Z"></path> 
 
    <path fill="#c5b0d5" d="M-83.21744517582594,-27.038987007807886A87.5,87.5,0,0,1,-1.607348923880901e-14,-87.5L-1.1848457781750641e-14,-64.5A64.5,64.5,0,0,0,-61.34314530103741,-19.9315961371841Z"></path> 
 
    </g> 
 
    
 
<use xlink:href="#greenCircle" transform="rotate(-10 87.5 87.5)" /> 
 
<use xlink:href="#greenCircle" transform="rotate(62 87.5 87.5)" /> 
 
<use xlink:href="#greenCircle" transform="rotate(134 87.5 87.5)" /> 
 
<use xlink:href="#greenCircle" transform="rotate(206 87.5 87.5)" /> 
 
<use xlink:href="#greenCircle" transform="rotate(278 87.5 87.5)" /> 
 

 
</svg>