Question

使用use标签时，我的SVG无法正常呈现。尝试使用相同的SVG标签而不使用use标签，这次我运气好，而且运行正常。

不幸的是我需要USE标签来正确渲染我的SVG。我不知道自己做错了什么。请参阅下面的代码

＆＃13;

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

＆＃13;

P.S我使用工具渲染了这个SVG代码，而不是手写代码

Answer 1

这看起来像是使用Illustrator创建的SVG。

出于某种原因，AI喜欢创建具有奇怪的额外蒙版和/或clipPath的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>

使用USE标记时SVG无法正确呈现

1 个答案: