css - 将图像添加到 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>

我有这个

I need only one star beneath the qqqqqqqqqq text

Answer 1

<pattern>元素用于定义重复填充图案。如果您只想放置单个图像，只需使用 <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>