svg - 两个 SVG 组合在一起

Question

我有两个 SVG。一个只是画一个灰色的圆圈，第二个是狗爪印。我真的不擅长 SVG，也不知道将两者结合起来，以便爪印在圆圈内。我尝试了各种方法，圆圈仍然存在，但是爪印要么隐藏，要么没有显示。

<svg class="" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="#908473" d="M11.948,0C5.36,0,0,5.36,0,11.948c0,6.588,5.36,11.948,11.948,11.948s11.948-5.36,11.948-11.948C23.897,5.36,18.537,0,11.948,0z M11.948,22.447c-5.789,0-10.499-4.71-10.499-10.499S6.159,1.45,11.948,1.45s10.499,4.71,10.499,10.498S17.737,22.447,11.948,22.447z"></path>
</svg>

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="25" height="25" viewBox="0 0 551.062 551.062" style="enable-background:new 0 0 551.062 551.062;"
	 xml:space="preserve">
	<path d="M465.19,453.459c14.749,67.688-58.752,82.375-91.127,73.562s-98.41-10.281-98.41-10.281s-66.218,1.469-98.593,10.281
		c-32.375,8.874-105.937-5.875-91.249-73.562s79.438-64.75,97.186-155.999c17.687-91.249,92.718-85.374,92.718-85.374
		s74.847-5.875,92.535,85.374C385.875,388.709,450.502,385.771,465.19,453.459z M343.586,206.15
		c39.841,11.505,83.844-19.951,98.349-70.258c14.504-50.245-5.998-100.307-45.839-111.812
		c-39.842-11.506-83.844,19.951-98.349,70.258C283.243,144.583,303.745,194.645,343.586,206.15z M508.703,187.852
		c-38.372-15.668-85.496,10.894-105.264,59.363c-19.768,48.471-4.712,100.43,33.66,116.035
		c38.372,15.606,85.496-10.894,105.264-59.364C562.131,255.416,547.076,203.519,508.703,187.852z M207.416,206.15
		c39.841-11.506,60.343-61.567,45.839-111.812s-58.568-81.702-98.349-70.196c-39.78,11.505-60.343,61.566-45.839,111.812
		C123.572,186.199,167.575,217.655,207.416,206.15z M113.963,363.25c38.373-15.667,53.428-67.626,33.66-116.035
		s-66.892-75.031-105.264-59.363C3.987,203.519-11.068,255.478,8.7,303.886C28.467,352.356,75.591,378.917,113.963,363.25z"/>
</svg>

Answer 1

解决您的问题的方法是将爪子用作 symbol .对于符号，您需要使用相同的 viewBox作为原始 svg 元素:viewBox="0 0 551.062 551.062"在这种情况下。现在您可以使用 symbol你可以给 use element 你想要的位置 (x,y) 和大小 (width, height)。

<svg id="circle" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
  <defs>
 <symbol id="paw" viewBox="0 0 551.062 551.062" >
    <path d="M465.19,453.459c14.749,67.688-58.752,82.375-91.127,73.562s-98.41-10.281-98.41-10.281s-66.218,1.469-98.593,10.281
        c-32.375,8.874-105.937-5.875-91.249-73.562s79.438-64.75,97.186-155.999c17.687-91.249,92.718-85.374,92.718-85.374
        s74.847-5.875,92.535,85.374C385.875,388.709,450.502,385.771,465.19,453.459z M343.586,206.15
        c39.841,11.505,83.844-19.951,98.349-70.258c14.504-50.245-5.998-100.307-45.839-111.812
        c-39.842-11.506-83.844,19.951-98.349,70.258C283.243,144.583,303.745,194.645,343.586,206.15z M508.703,187.852
        c-38.372-15.668-85.496,10.894-105.264,59.363c-19.768,48.471-4.712,100.43,33.66,116.035
        c38.372,15.606,85.496-10.894,105.264-59.364C562.131,255.416,547.076,203.519,508.703,187.852z M207.416,206.15
        c39.841-11.506,60.343-61.567,45.839-111.812s-58.568-81.702-98.349-70.196c-39.78,11.505-60.343,61.566-45.839,111.812
        C123.572,186.199,167.575,217.655,207.416,206.15z M113.963,363.25c38.373-15.667,53.428-67.626,33.66-116.035
        s-66.892-75.031-105.264-59.363C3.987,203.519-11.068,255.478,8.7,303.886C28.467,352.356,75.591,378.917,113.963,363.25z"/>
</symbol> 
  </defs>
  <path fill="#908473" d="M11.948,0C5.36,0,0,5.36,0,11.948c0,6.588,5.36,11.948,11.948,11.948s11.948-5.36,11.948-11.948C23.897,5.36,18.537,0,11.948,0z M11.948,22.447c-5.789,0-10.499-4.71-10.499-10.499S6.159,1.45,11.948,1.45s10.499,4.71,10.499,10.498S17.737,22.447,11.948,22.447z"></path>
  
  <use xlink:href="#paw" x="2" y="2" width="20" height="20" />
</svg>