私の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/

しかし、私はレフリーを使用しようと、私はrectsを見えるようにすることはできません。このよう

：

<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

そう等に比べ、まあOK UPDATE＃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>