내 SVG 호출이 작동하지 않는 이유는 무엇입니까?

Question

SVG 파일을 연구 중이지만 <defs> 태그를 설정하면 내 SVG를 표시 할 수 없습니다!

내 말은 .. 내가 SVG를 직접 호출하면 제대로 작동합니다. 이처럼

:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514" 
    xml:space="preserve"> 
<g> 
    <rect class="bosta1" y="55.406" fill="#E8CF1E" stroke="#000000" stroke-miterlimit="10" width="163.514" height="137.838"/> 
    <rect class="bosta2" x="62.162" fill="#E42326" stroke="#000000" stroke-miterlimit="10" width="44.811" height="263.514"/> 
</g> 
</svg> 

바이올린 : https://jsfiddle.net/sz0bkbdm/

하지만 심판을 사용하려고하면 나는의 구형을 볼 수 없습니다. 이처럼

:

<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514" 
    xml:space="preserve"> 

<defs> 
<g> 

    <rect class="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/> 
    <rect class="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/> 

</g> 
</defs> 
</svg> 

MY CONTENT 

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

바이올린 : https://jsfiddle.net/g1hdLy82/

Answer 1

당신이 시도 할 수 있습니다이 코드를 따르십시오 여기에 있습니다 :

<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514" 
    xml:space="preserve"> 
<defs> 
    <rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/> 
    <rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/> 
</defs> 
</svg> 

MY CONTENT 

<svg> 
    <use xlink:href="#ret1"></use> 
    <use xlink:href="#ret2"></use> 
</svg> 

을하고, CSS는 다음과 같습니다

#mySvg { width:100px; height:auto; } 
#ret1 { fill:green; stroke:red; } 
#ret2 { fill:blue; stroke:white; } 

Answer 2

내가 전에 <refs> 태그의 들어 본 적이없는 때문에 당신이 <defs>와 <refs>를 교환하는 것 같아요.

UPDATE

작동보다, 잘못된 refs/defs를 제거!

fiddle

, 업데이트 # 2

잘 확인과 같이 이상 :

<svg> 
    <defs> 
     <g id="toshow"> 
      <rect class="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/> 
      <rect class="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/> 

     </g> 
    </defs> 
</svg> 

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

FIDDLE

UDDATE # 3

아마도 helpful입니다.

Answer 3

당신의 문제는

<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg"> 

<defs> 
<g> 

    <rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/> 
    <rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/> 

</g> 
</defs> 
</svg> 

MY CONTENT 

<svg > 
    <use xlink:href="#ret1"></use> 
    <use xlink:href="#ret2"></use> 
</svg> 

또는

이

<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg"> 

<defs> 
<g id="rec1"> 

    <rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/> 
    <rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/> 

</g> 
</defs> 
</svg> 

MY CONTENT 

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