SVGを別のSVGの中に入れるにはどうすればいいですか

Question

私はSVGサークルの中央に再生SVGを配置しようとしています。

垂直方向、水平方向。

https://jsfiddle.net/c0qshm0t/17/

<svg width="64" height="64" style="background-color:black;" viewBox="25 9 50 82"> 
 
    <circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" fill="gray" /> 
 

 

 
    <svg viewBox="0 0 1229 1481" width="24" height="29" style="background-color:green;"> 
 
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red" /> 
 
    </svg> 
 

 
</svg>

Answer 1

あなたはxとy属性を設定することで、内側<svg>を配置することができます。位置は次のようになります。

x = (25 + 50/2) - 24/2 
    = 50 - 12 
    = 38 
y = (9 + 82/2) - 29/2 
    = 50 - 14.5 
    = 35.5 

<svg width="64" height="64" style="background-color:black;" viewBox="25 9 50 82"> 
 
    <circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" fill="gray" /> 
 

 

 
    <svg x="38" y="35.5" 
 
     viewBox="0 0 1229 1481" width="24" height="29" style="background-color:green;"> 
 
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red" /> 
 
    </svg> 
 

 
</svg>