SVG不显示

Question

以下SVG不显示，有什么问题？它应该以40x40px的尺寸显示颜色。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="20 20 40 40" fill="#14cc9e">

<path d="M1096 301.5a5.5 5.5 0 1 0 10.96-.66c-.09-.7.16-1.42.66-1.93l4.58-4.58a2.7 2.7 0 0 1 2.12-.79 5.26 5.26 0 0 0 5.46-6.76l-3.17 3.17c-1.6.35-3.9-1.98-3.56-3.56l3.17-3.17a5.36 5.36 0 0 0-5.23 1.32 5.29 5.29 0 0 0-1.52 4.32c.05.67-.2 1.33-.67 1.81l-4.69 4.7c-.5.51-1.22.76-1.94.67a5.5 5.5 0 0 0-6.17 5.46zm3 .58l.7-2.63 2.63-.7 1.92 1.92-.7 2.63-2.63.7z"></path>

</svg>

Answer 1

您可以使用命令transform = 'translate (-1090 -275)

fill命令在svg文件头中有效，但将其移动到补丁更正确

＆＃13;

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40"  style="border:1px solid red;"> 
<g transform="translate(-1090 -275)">
<path fill="#14cc9e" d="M1096 301.5 a5.5 5.5 0 1 0 10.96-.66c-.09-.7.16-1.42.66-1.93l4.58-4.58a2.7 2.7 0 0 1 2.12-.79 5.26 5.26 0 0 0 5.46-6.76l-3.17 3.17c-1.6.35-3.9-1.98-3.56-3.56l3.17-3.17a5.36 5.36 0 0 0-5.23 1.32 5.29 5.29 0 0 0-1.52 4.32c.05.67-.2 1.33-.67 1.81l-4.69 4.7c-.5.51-1.22.76-1.94.67a5.5 5.5 0 0 0-6.17 5.46zm3 .58l.7-2.63 2.63-.7 1.92 1.92-.7 2.63-2.63.7z">
</path> 
</g>

</svg>

＆＃13;

＆＃13;

＆＃13;     

要查找图像，可以方便地使用在浏览器窗口中显示svg边界的框架。

style="border:1px solid red;"

调试后，可以删除框架。

• 第二个选项

  您还可以使用参数min-x，min-y viewBox="1090 275 40 40"

移动图像

＆＃13;

＆＃13;

<svg  width="40px" height="40px" viewBox="1090 275 40 40"  > 

<path fill="#14cc9e" d="M1096 301.5 a5.5 5.5 0 1 0 10.96-.66c-.09-.7.16-1.42.66-1.93l4.58-4.58a2.7 2.7 0 0 1 2.12-.79 5.26 5.26 0 0 0 5.46-6.76l-3.17 3.17c-1.6.35-3.9-1.98-3.56-3.56l3.17-3.17a5.36 5.36 0 0 0-5.23 1.32 5.29 5.29 0 0 0-1.52 4.32c.05.67-.2 1.33-.67 1.81l-4.69 4.7c-.5.51-1.22.76-1.94.67a5.5 5.5 0 0 0-6.17 5.46zm3 .58l.7-2.63 2.63-.7 1.92 1.92-.7 2.63-2.63.7z">
</path> 
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您正在使用fill设置svg背景颜色。据我所知，这不起作用。请尝试使用属性background-color。