SVG円

Question

の底に画像を追加すると、これが私のHTMLです：

<svg viewbox="0 0 33.83098862 33.83098862" width="400" height="400" 
    xmlns="http://www.w3.org/2000/svg"> 
    <circle stroke="#efefef" stroke-width="2" 
      cx="16.91549431" cy="16.91549431" r="15.91549431" fill="url(#image1)"/> 
    <g > 
     <text x="16.91549431" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="3">zzzzzzzzzzzzzzz</text> 
     <text x="16.91549431" y="17.5" alignment-baseline="central" text-anchor="middle" font-size="2">aaaaaaaaaaaaaaaa</text> 
     <text x="16.91549431" y="20.5" alignment-baseline="central" text-anchor="middle" font-size="1.5">qqqqqqqqqqqqqqq</text> 
    </g> 
    <defs> 
     <pattern width="10" height="10" patternUnits="userSpaceOnUse" y="0" x="0" id="image1"> 
      <image xlink:href="http://images.clipartpanda.com/clipart-star-RTA9RqzTL.png" height="10" width="10" y="0" x="0"></image> 
     </pattern> 
    </defs> 
</svg> 

そして、私はこの

私はqqqqqqqqqqのテキストの下に一つだけの星を必要とする持っている

Answer 1

<pattern>要素は繰り返し塗りつぶしパターンを定義するための要素です。 1つの画像だけを配置したい場合は、<image>要素を使用してください。

<svg viewbox="0 0 33.83098862 33.83098862" width="400" height="400" 
 
    xmlns="http://www.w3.org/2000/svg"> 
 
    <circle stroke="#efefef" stroke-width="2" 
 
      cx="16.91549431" cy="16.91549431" r="15.91549431" fill="white"/> 
 
    <g > 
 
     <text x="16.91549431" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="3">zzzzzzzzzzzzzzz</text> 
 
     <text x="16.91549431" y="17.5" alignment-baseline="central" text-anchor="middle" font-size="2">aaaaaaaaaaaaaaaa</text> 
 
     <text x="16.91549431" y="20.5" alignment-baseline="central" text-anchor="middle" font-size="1.5">qqqqqqqqqqqqqqq</text> 
 
    </g> 
 
    <image xlink:href="http://images.clipartpanda.com/clipart-star-RTA9RqzTL.png" height="10" width="10" y="21.5" x="11.9"></image> 
 
</svg>