SVGのパスと画像

Question

私はSVGパスに画像を追加しようとしていますが、タイトルが言っています。私はそうのように、パス内の画像を入れたいのですが
JSFiddle

私は、次のフィドルを作った

、
（グリーンドットが表す画像） so image

どうだろう、これを終わり？パスに画像を追加しようとしましたが、明らかに表示されませんでした。

コード：

<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

がここにヒントがあります、あなたのフィドルにこれを追加します。

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

Answer 2

絵に続いて、5円を追加する必要があります。

各円は同じ角度だけ相互に相対的に回転させる - 360/5 = 72

• 第一円作成：円を複製するコマンド<use>を使用

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

• をそれをtransform =" rotate (deg x y) "を第1の円に対して所望の角度に回転させる。 [パターン]（https://www.w3.org/TR/SVG11/pservers.html#Patterns）上に読む

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