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