使用USE標籤時SVG未正確呈現

Question

使用使用標籤時，我的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

這看起來像使用Illustrator創建的SVG。

由於某種原因，AI喜歡創建具有奇怪的額外遮罩和/或clipPath的SVG。這似乎總是給人們帶來問題。使用不同的程序來創建圖標可能是個好主意。例如。 Inkscape或素描。

您的問題是由於面具和符號之間的一些奇怪的相互作用。我放棄了試圖弄清楚，因爲只是重寫圖標以擺脫掩碼並簡化它更快。

如果你有多個圖標可以解決，那麼這個解決方案對我來說並不是真的有幫助。但是，在這裏你去反正：

<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>