删除 svg 周围的空间

Question

我想从给定的 svg 中删除填充：

 #fake-cursor { position: absolute; top: 0; left: 0; }

 <svg id="fake-cursor" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="120px" height="114px" viewBox="0 0 120 114" enable-background="new 0 0 120 114" xml:space="preserve" preserveAspectRatio="none"> <g> <path fill="#49578D" d="M42.849,44.922l19.94,15.089c0.758,0.575,0.334,1.785-0.617,1.759l-12.356-0.35l-7.188,9.855 c-0.561,0.77-1.785,0.36-1.769-0.593l0.421-24.997c0.006-0.356,0.205-0.679,0.517-0.846C42.139,44.657,42.548,44.695,42.849,44.922 L42.849,44.922z"/> </g> <path fill="#2C3C74" d="M42.849,44.922l19.94,15.089c0.758,0.575,0.334,1.785-0.617,1.759l-12.356-0.35l-8.019-16.58 C42.139,44.657,42.548,44.695,42.849,44.922L42.849,44.922z"/> </svg>

我使用preserveAspectRatio="none"但没有变化。

我怎样才能解决这个问题？

Answer 1

填充包含在 SVG 图形本身中，因此您需要使用 SVG 编辑器将其删除。 您可以使用 Illustrator，或者像https://boxy-svg.com/app/new这样的免费在线工具。

我使用 Boxy SVG 来清理您的 SVG，并且您可以看到填充下方的代码片段已被删除，但您可能想玩这个，因为原始图形有点不稳定。

 #fake-cursor { position: absolute; top: 0; left: 0; }

 <svg id="fake-cursor" viewBox="0.195 0.212 22.32 26.954" width="22.32" height="26.954"> <path fill="#49578D" d="M 2.185 0.41 L 22.125 15.499 C 22.883 16.074 22.459 17.284 21.508 17.258 L 9.152 16.908 L 1.964 26.763 C 1.403 27.533 0.179 27.123 0.195 26.17 L 0.616 1.173 C 0.622 0.817 0.821 0.494 1.133 0.327 C 1.475 0.145 1.884 0.183 2.185 0.41 L 2.185 0.41 Z"></path> <path fill="#2C3C74" d="M 2.185 0.41 L 22.125 15.499 C 22.883 16.074 22.459 17.284 21.508 17.258 L 9.152 16.908 L 1.133 0.328 C 1.475 0.145 1.884 0.183 2.185 0.41 L 2.185 0.41 Z"></path> </svg>