USGタグ使用時にSVGが正しく表示されない

Question

使用タグ使用時にSVGが正しく表示されません。 use tagを使わずに同じSVGタグで試してみましたが、今回は運が良かったし、正しく動作します。

残念ながら、SVGを適切に表示するにはUSEタグが必要です。私は何が間違っているのか分からない。私はツールを使って、このSVGコードをレンダリングしている

<!-- SVG which i'm tring to reuse using use tag---> 
 

 
<svg xmlns="http://www.w3.org/2000/svg" height="17" width="17" style="display:none"> 
 
     <symbol id="check"> 
 
     <defs> 
 
      <rect id="addColumn_a" width="16" height="16" y=".996" rx="1"/> 
 
      <mask id="addColumn_b" width="16" height="16" x="0" y="0" fill="white"> 
 
      <use xlink:href="#addColumn_a"/> 
 
      </mask> 
 
     </defs> 
 
     <g fill="none" fill-rule="evenodd" transform="translate(0 -.996)"> 
 
      <rect width="16" height="1" y="6" fill="#404040"/> 
 
      <rect width="16" height="1" y="11" fill="#404040"/> 
 
      <rect width="15" height="1" x="3.028" y="8.565" fill="#404040" transform="rotate(-90 10.528 9.065)"/> 
 
      <rect width="15.348" height="1" x="-2.141" y="8.554" fill="#5C5C5C" transform="rotate(-90 5.533 9.054)"/> 
 
      <use stroke="#404040" stroke-width="2" mask="url(#addColumn_b)" xlink:href="#addColumn_a"/> 
 
      <rect width="16" height="6" x="-5" y="5.996" fill="#19AF5C" opacity=".651" transform="rotate(-90 3 8.996)" rx="1"/> 
 
     </g> 
 
     </symbol> 
 
</svg> 
 

 
<!-- USE Link refernce which is not rendering SVG properly---> 
 

 
<svg height="17" width="17"> 
 
     <use xlink:href="#check"></use> 
 
</svg> 
 

 

 
<!-- Same SVG tag just a small change removed symbol tag---> 
 

 

 
<svg height="17" width="17"> 
 
     <defs> 
 
     <rect id="a" width="16" height="16" y=".996" rx="1"/> 
 
     <mask id="b" width="16" height="16" x="0" y="0" fill="white"> 
 
      <use xlink:href="#a"/> 
 
     </mask> 
 
     </defs> 
 
     <g fill="none" fill-rule="evenodd" transform="translate(0 -.996)"> 
 
     <rect width="16" height="1" y="6" fill="#404040"/> 
 
     <rect width="16" height="1" y="11" fill="#404040"/> 
 
     <rect width="15" height="1" x="3.028" y="8.565" fill="#404040" transform="rotate(-90 10.528 9.065)"/> 
 
     <rect width="15.348" height="1" x="-2.141" y="8.554" fill="#5C5C5C" transform="rotate(-90 5.533 9.054)"/> 
 
     <use stroke="#404040" stroke-width="2" mask="url(#b)" xlink:href="#a"/> 
 
     <rect width="16" height="6" x="-5" y="5.996" fill="#19AF5C" opacity=".651" transform="rotate(-90 3 8.996)" rx="1"/> 
 
     </g> 
 
</svg>

P.S、イラストレーターで作成したSVGのように見えない手書かれたコード

Answer 1

以下の私のコードを参照してください。

何らかの理由で、AIは奇妙な余分なマスクやクリップパスを持つSVGを作成するのが好きです。それは常に人々にとって問題を引き起こしているようです。アイコンを作成するために別のプログラムを使用することをお勧めします。例えば。インクスケープまたはスケッチ

あなたの問題は、マスクとシンボルの間に奇妙な相互作用があるためです。私はそれを理解しようとしなかった。マスクを取り除き、単純化するためにアイコンを書き換えるほうが速かったからだ。

修正するアイコンが複数ある場合、この解決法は私の推測にはあまり役立ちません。しかし、ここであなたがとにかく行く： "正しくレンダリングではない" と

<svg xmlns="http://www.w3.org/2000/svg" height="17" width="17" style="display:none"> 
 
    <symbol id="check2"> 
 
    <g fill="none" fill-rule="evenodd"> 
 
     <rect width="16" height="1" y="5" fill="#404040"/> 
 
     <rect width="16" height="1" y="10" fill="#404040"/> 
 
     <rect width="1" height="16" x="10" fill="#404040"/> 
 
     <rect width="1" height="16" x="5" fill="#5C5C5C"/> 
 
     <rect width="15" height="15" x="0.5" y="0.5" rx="0.5" stroke="#404040" stroke-width="1"/> 
 
     <rect width="6" height="16" fill="#19AF5C" opacity=".651" rx="1"/> 
 
    </g> 
 
    </symbol> 
 
</svg> 
 

 

 
<svg height="17" width="17"> 
 
     <use xlink:href="#check2"></use> 
 
</svg>