SVG не отображается правильно при использовании тега USE

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

Это выглядит как SVG, созданный с Illustrator.

По какой-то причине ИИ любит создавать SVG, у которых есть сверхъестественные дополнительные маски и/или клиппаты. Кажется, что это создает проблемы для людей. Может быть неплохо использовать другую программу для создания значков. Например. Inkscape или Sketch.

Ваша проблема связана с каким-то странным взаимодействием между маской и символом. Я сдался, пытаясь понять это, потому что быстрее было переписать значок, чтобы избавиться от маски и упростить ее.

Если у вас есть несколько значков для исправления, то это решение действительно не поможет вам, я думаю. Но здесь вы идете в любом случае:

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