我有一个 SVG 在使用 use
标签时没有正确呈现。尝试在不使用 use
标签的情况下使用相同的 SVG 标签,这次我很幸运,它工作正常。
不幸的是,我需要使用
标签来正确呈现我的SVG。我不知道我做错了什么。引用下面我的代码
<!-- SVG which I'm trying 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 reference 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 代码,而不是手写代码
最佳答案
这看起来像是用 Illustrator 创建的 SVG。
出于某种原因,AI 喜欢创建具有奇怪的额外 mask 和/或剪辑路径的 SVG。它似乎总是给人们带来麻烦。使用不同的程序来创建图标可能是个好主意。例如。 Inkscape 或 Sketch。
你的问题是由于面具和符号之间的一些奇怪的相互作用。我放弃了尝试弄清楚它,因为重写图标以摆脱 mask 并简化它会更快。
如果您有多个图标需要修复,那么我猜这个解决方案并不能真正帮助您。但不管怎样,你去吧:
<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>
关于css - 使用 USE 标签时 SVG 无法正确呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40543158/