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> 요소 만 사용하십시오.

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