将图片添加到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>元素用于定义重复填充模式。如果您只想放置一张图片，只需使用<image>元素。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;