svgで使用タグが機能していない

Question

私はSVGを新しくしました。私はSVGを使って作成されたアイコンのセットを持っています。私は<use>タグを使ってSVGの特定の部分をレンダリングしようとしています。しかし、すべてが無駄になります。私がしている間違いが何であるか把握することはできません。ここで私が試したコードはfiddleを参照してください。 SVGの全体がレンダリングされているのがわかりますが、SVGの特定の部分をレンダリングしようとすると失敗しました。助けを歓迎します

<svg width="303px" height="30px" viewBox="0 0 303 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g id="Pivot" transform="translate(253.232000, 6.247500)"> 
     <path d="M0.833,15.4105 L0.833,11.662 L3.7485,11.662 L3.7485,11.2455 L0.833,11.2455 L0.833,7.9135 L3.7485,7.9135 L3.7485,7.497 L0.833,7.497 L0.833,4.5815 L0,4.5815 L0,16.2435 L0.833,16.2435 L0.833,15.827 L3.7485,15.827 L3.7485,15.4105 L0.833,15.4105 Z M18.8036328,16.2435 L4.5815,16.2435 L4.5815,15.6124537 L8.7465,15.6124537 L8.7465,12.7095463 L4.5815,12.7095463 L4.5815,12.0785 L8.7465,12.0785 L8.7465,8.12804634 L4.5815,8.12804634 L4.5815,7.497 L8.7465,7.497 L8.7465,4.5815 L3.7485,4.5815 L3.7485,4.4408921e-16 L19.5755,4.4408921e-16 L19.5755,4.5815 L17.3516962,4.5815 L14.5775,4.5815 L14.5775,7.497 L18.7425,7.497 L18.7425,4.5815 L19.5755,4.5815 L19.5755,16.2435 L18.8036328,16.2435 Z M18.7425,15.6124537 L14.5775,15.6124537 L14.5775,12.7095463 L18.7425,12.7095463 L18.7425,15.6124537 Z M18.7425,12.0785 L14.5775,12.0785 L14.5775,8.12804634 L18.7425,8.12804634 L18.7425,12.0785 Z M13.7445,4.5815 L9.5795,4.5815 L9.5795,7.497 L13.7445,7.497 L13.7445,4.5815 Z M13.7445,8.12804634 L9.5795,8.12804634 L9.5795,12.0785 L13.7445,12.0785 L13.7445,8.12804634 Z M13.7445,12.7095463 L9.5795,12.7095463 L9.5795,15.6124537 L13.7445,15.6124537 L13.7445,12.7095463 Z M3.7485,4.5815 L4.5815,4.5815 L4.5815,16.2435 L3.7485,16.2435 L3.7485,4.5815 Z M0,3.7485 L3.7485,3.7485 L3.7485,4.165 L0,4.165 L0,3.7485 Z" id="Combined-Shape" fill="#AAAAAA"></path> 
     <rect id="Rectangle-324" fill="#FAC10C" x="0" y="3.7485" width="4.5815" height="12.495"></rect> 
     <rect id="Rectangle-324-Copy" fill="#FAC10C" transform="translate(11.733102, 2.290750) rotate(90.000000) translate(-11.733102, -2.290750) " x="9.44235203" y="-5.73533321" width="4.5815" height="16.0521664"></rect> 
    </g> 
    <g id="Filter" transform="translate(232.407000, 6.247500)"> 
     <rect id="Rectangle-108" fill="#3BA3F8" x="4.73505679e-14" y="0" width="12.9115" height="1.2495"></rect> 
     <rect id="Rectangle-109" fill="#3BA3F8" x="4.73505679e-14" y="2.499" width="12.9115" height="1.2495"></rect> 
     <path d="M6.33160096,10.829 L6.45575,10.9678333 L6.57989904,10.829 L6.33160096,10.829 Z M4.8418125,9.163 L4.73505679e-14,3.7485 L12.9115,3.7485 L8.0696875,9.163 L4.8418125,9.163 Z" id="Combined-Shape" fill="#8EC9FB"></path> 
     <path d="M4.5815,9.163 L7.9135,9.163 L7.9135,18.326 L4.74601819,14.5516554 L4.5815,9.163 Z" id="Rectangle-111" fill="#8EC9FB"></path> 
    </g> 
    <g id="Sort" transform="translate(206.167500, 1.666000)"> 
     <rect id="Rectangle-120" fill="#E2A364" x="10.829" y="4.165" width="2.0825" height="17.9095"></rect> 
     <path d="M15.5828281,14.5775 L17.1391718,15.7502891 L12.3853437,22.0588321 L10.829,20.886043 L15.5828281,14.5775 Z" id="Rectangle-121" fill="#E2A364"></path> 
     <text id="A" font-family="SFUIDisplay-Semibold, SF UI Display" font-size="11.902719" font-weight="500" letter-spacing="-0.107586779" fill="#19AF5C"> 
     <tspan x="0.4165" y="11">A</tspan> 
     </text> 
     <text id="Z" font-family="SFUIDisplay-Semibold, SF UI Display" font-size="11.902719" font-weight="500" letter-spacing="-0.107586779" fill="#19AF5C"> 
     <tspan x="0.4165" y="22.662">Z</tspan> 
     </text> 
    </g> 
</svg> 
<svg> 
    <use xlink:href="Pivot"></use> 
</svg> 

Answer 1

"ピボット"要素が2番目のSVGに表示されない理由を知りたいのですか？そうですか？

理由が正しく参照していないためです。

<svg> 
    <use xlink:href="#Pivot"></use> 
</svg> 

不足しているハッシュ（「＃」）記号に注意してください。