SVGを改善して、複数のビューボックスを使わずに、円の内側にピンを配置します。

Question

Svgの円の内側にピンを表示する必要があります。

私の現在のコードは次のようである：やや動作しますが、洗練ようで、おそらくもバグだらけ

<svg viewBox="0 0 20 20" preserveAspectRatio="xMinYMin meet"> 
    <circle cx="50%" cy="1.5" r="1.5" style="fill: green;"></circle> 
    <svg x="47.5%" y="5%" viewBox="0 0 10000 10000" fill="#fff" preserveAspectRatio="none"> 
     <g> 
      <path d="M250,124.3c-35,0-63.4,28.8-63.4,64.1c0,35.3,28.5,64,63.4,64s63.4-28.8,63.4-64.1C313.4,153,285,124.3,250,124.3z 
M250,222c-18.3,0-33.2-15.1-33.2-33.7s14.9-33.7,33.2-33.7s33.2,15.1,33.2,33.7S268.3,222,250,222z"> 
      </path> 
      <path d="M250,50.9c-74.9,0-135.8,61.6-135.8,137.4c0,31.3,22.5,84.4,66.9,157.7c32.9,54.4,66.2,100.3,66.6,100.7l2.4,3.3l2.4-3.3 
c0.3-0.5,33.7-46.3,66.6-100.7c44.4-73.3,66.9-126.4,66.9-157.7C385.8,112.5,324.9,50.9,250,50.9z M250,397.6 
c-16.5-24.3-45.5-68.4-69.9-114c-23.5-44-35.9-77-35.9-95.4c0-59,47.4-107,105.8-107s105.8,48,105.8,107 
c0,18.4-12.4,51.4-35.9,95.4C295.4,329.3,266.5,373.4,250,397.6z">  
      </path> 
     </g> 
    </svg> 
</svg> 

。私が望むのは、JavaScriptを使わずにグループを '内側'の中心にするより良い方法です。

私が本当に大きなviewBoxを使って余分なSVG要素を取り除くことができたらうれしいですピンを配置するために使用します。だからあなたは私にちょうどgでそれをする方法を示すことができ、良いスケーリング機能を作ることができれば。

Answer 1

パーセント値を含む座標を使用する場合は、xおよびyの属性を持つ要素が必要です。 <use>はそのような要素であり、<g>ではありません。

座標系の原点を中心にピンを描くと、ライブが簡単になります：translate(-250 -230)。その後

、あなたは簡単にあなたが必要とするサイズに拡張することができます：scale(0.0025)（覚えている：複数のコマンドを変換を右から左に処理される）

最後に、あなたは同じxでピンテンプレートを使用し、 yはサークルとしての座標です。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 20 20" preserveAspectRatio="xMinYMin meet"> 
    <defs> 
    <!--center the pin around the origin and scale it to final size--> 
    <g id="pin" transform="scale(0.0025) translate(-250 -230)"> 
     <path d="M250,124.3c-35,0-63.4,28.8-63.4,64.1c0,35.3,28.5,64,63.4,64s63.4-28.8,63.4-64.1C313.4,153,285,124.3,250,124.3z 
M250,222c-18.3,0-33.2-15.1-33.2-33.7s14.9-33.7,33.2-33.7s33.2,15.1,33.2,33.7S268.3,222,250,222z" /> 
     <path d="M250,50.9c-74.9,0-135.8,61.6-135.8,137.4c0,31.3,22.5,84.4,66.9,157.7c32.9,54.4,66.2,100.3,66.6,100.7l2.4,3.3l2.4-3.3 
c0.3-0.5,33.7-46.3,66.6-100.7c44.4-73.3,66.9-126.4,66.9-157.7C385.8,112.5,324.9,50.9,250,50.9z M250,397.6 
c-16.5-24.3-45.5-68.4-69.9-114c-23.5-44-35.9-77-35.9-95.4c0-59,47.4-107,105.8-107s105.8,48,105.8,107 
c0,18.4-12.4,51.4-35.9,95.4C295.4,329.3,266.5,373.4,250,397.6z" /> 
    </g> 
    </defs> 
    <!--use the same coordinates for the center of the circle and the pin--> 
    <circle cx="50%" cy="1.5" r="1.5" fill="green" /> 
    <use xlink:href="#pin" x="50%" y="1.5" fill="white" /> 
</svg>