SVG 不像漂亮的图标那样填充,比如有填充或空白

问题描述 投票:0回答:1

谁能告诉我为什么右边的这个自定义 SVG 不会像右边的图标那样填充高度?在 Illustrator 中打开时,SVG 的顶部和右侧没有任何空间。

当前 SVG 标记

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg 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"
         viewBox="0 0 720 720" enable-background="new 0 0 720 720" xml:space="preserve">
    <g>
        <path d="M372.7,463.4c7.7-12.1,13-24.8,16-38.3c3.1-14.9,2.9-29.2-0.4-42.7c-3.4-13.5-9.3-25.2-17.8-34.9
            c8-7.5,14.7-16.1,20.2-25.6s9.5-19.9,12-30.9c2.8-13.3,2.9-25.8,0.3-37.4s-7.3-21.7-14.1-30.4c-6.8-8.7-15.5-15.5-25.9-20.4
            c-10.5-5-22.3-7.4-35.3-7.4H187.1c-3.1,0-5.7,0.9-7.8,2.8c-2.1,1.9-3.5,4.3-4.2,7.4l-65.7,309.7c-0.7,3.3-0.4,5.7,1.1,7.2
            c1.5,1.6,3.7,2.3,6.7,2.3h153.7c13,0,26-2.7,38.8-8c12.9-5.3,24.7-12.5,35.4-21.6S365,475.4,372.7,463.4z M301.3,421.8
            c-1,4.7-2.9,9.3-5.5,13.8c-2.7,4.4-5.9,8.4-9.7,11.9c-3.8,3.5-8,6.2-12.5,8.3c-4.6,2.1-9.3,3.1-14.2,3.1h-51.9l15.8-74.1h51.9
            c4.9,0,9.2,1.1,12.9,3.3c3.7,2.2,6.7,5.1,9,8.5c2.3,3.5,3.8,7.4,4.5,11.9C302.2,412.9,302.2,417.3,301.3,421.8z M317,292.9
            c-1,4.7-2.8,9.1-5.3,13s-5.6,7.3-9.2,10.2c-3.6,2.9-7.7,5.1-12.2,6.7s-9.3,2.3-14.3,2.3h-40.2l13.5-64.3h40.8c4.9,0,9.2,0.9,13,2.6
            s6.8,4,9.2,7c2.4,3,4,6.4,4.8,10.2C317.9,284.3,317.9,288.5,317,292.9z"/>
        <path d="M607.4,366.1H402c1.4,3.9,2.7,7.8,3.7,11.9c4.1,16.2,4.3,33.2,0.6,50.8v0.2c-3.4,15.4-9.6,30.3-18.4,44.1
            c-8.6,13.5-19.1,25.6-31.2,35.8c-7.1,6-14.7,11.3-22.6,15.9h240.3c6.6,0,13.3-6,14.8-13.4l27.4-131.9
            C618.2,372.1,614,366.1,607.4,366.1z M479.6,425.4l-2.5,11.9c-0.3,1.3-0.9,2.4-1.9,3.3s-2.2,1.4-3.5,1.4H461l-11,51.3
            c-0.6,2.6-2.2,3.9-5,3.9h-18c-2.7,0-3.8-1.3-3.2-3.9l11-51.3H424c-3,0-4.2-1.5-3.5-4.6l2.5-11.9c0.6-2.9,2.4-4.4,5.4-4.4h10.7
            l4.1-19.3c0.3-1,0.8-1.9,1.6-2.7c0.8-0.8,1.9-1.3,3.3-1.6l19.5-3c1,0,1.8,0.3,2.2,1c0.5,0.7,0.6,1.6,0.3,2.7l-4.9,22.8h10.7
            c1.3,0,2.2,0.4,2.9,1.1C479.7,422.8,479.9,423.9,479.6,425.4z M572.8,425.3c-0.1,0.2-0.1,0.4-0.2,0.6c-0.1,0.2-0.1,0.4-0.2,0.6
            l-40.1,64.7c-0.4,0.6-0.7,1.3-1.2,1.9c-0.4,0.7-0.9,1.3-1.4,1.9s-1.1,1.1-1.8,1.5s-1.4,0.6-2.2,0.6h-18.3c-1,0-1.7-0.1-2.1-0.4
            c-0.5-0.3-0.8-0.7-1.1-1.2c-0.3-0.7-0.5-1.4-0.7-2.1s-0.4-1.5-0.5-2.2c-1.9-10.7-4-21.4-6.1-32.1s-4.2-21.4-6.1-32.1
            c-0.1,0-0.1-0.3-0.1-0.7c0-0.4,0-0.8,0.2-1.2c0.4-1.8,1.7-2.7,3.9-2.7h21.8c1.2,0,2.1,0.3,2.7,0.9c0.6,0.6,1,1.4,1.1,2.5
            c0.2,3,0.5,6.4,0.8,10s0.6,7.2,1,10.8c0.3,3.6,0.6,6.9,0.8,10c0.3,3.1,0.4,5.7,0.5,7.6l19.5-38.6c0.7-1.2,1.5-2,2.3-2.5
            s1.8-0.8,3-0.8h21.4c1.4,0,2.3,0.3,2.7,0.8C572.9,423.7,573,424.4,572.8,425.3z"/>
    </g>
    </svg>

添加 viewBox="109 195 510 330" 并启用背景让我现在得到了这个。它位置不对,但尺寸看起来合适。

svg vector adobe-illustrator react-native-svg
1个回答
0
投票

我能够通过从 font Awesome 下载类似大小的 viewbox SVG 来使其工作。在 illustrator 中打开它,删除当前的 FA 图标并将其粘贴进去,并确保它符合 FA 标准并且有效!

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M332.2 386.7c9.7-15.2 16.4-31.3 20.2-48.3c3.9-18.8 3.7-36.8-.5-53.8c-4.3-17-11.7-31.8-22.4-44c10.1-9.5 18.5-20.3 25.5-32.3c6.9-12 12-25.1 15.1-38.9c3.5-16.8 3.7-32.5 .4-47.1s-9.2-27.3-17.8-38.3s-19.5-19.5-32.6-25.7C306.8 52 291.9 49 275.5 49H98.4c-3.9 0-7.2 1.1-9.8 3.5s-4.4 5.4-5.3 9.3L.5 452.1c-.9 4.2-.5 7.2 1.4 9.1c1.9 2 4.7 2.9 8.4 2.9H204c16.4 0 32.8-3.4 48.9-10.1c16.3-6.7 31.1-15.8 44.6-27.2c13.4-11.5 25-25 34.7-40.1zm-89.9-52.4c-1.3 5.9-3.7 11.7-6.9 17.4c-3.4 5.5-7.4 10.6-12.2 15s-10.1 7.8-15.8 10.5c-5.8 2.6-11.7 3.9-17.9 3.9h-65.4l19.9-93.4h65.4c6.2 0 11.6 1.4 16.3 4.2s8.4 6.4 11.3 10.7c2.9 4.4 4.8 9.3 5.7 15c.7 5.5 .7 11-.4 16.7zM262 171.9c-1.3 5.9-3.5 11.5-6.7 16.4s-7.1 9.2-11.6 12.9s-9.7 6.4-15.4 8.4s-11.7 2.9-18 2.9h-50.7l17-81H228c6.2 0 11.6 1.1 16.4 3.3c4.8 2.1 8.6 5 11.6 8.8s5 8.1 6 12.9c1.2 4.5 1.2 9.8 0 15.4zm366 92.2H369.2c1.8 4.9 3.4 9.8 4.7 15c5.2 20.4 5.4 41.8 .8 64v.3c-4.3 19.4-12.1 38.2-23.2 55.6c-10.8 17-24.1 32.3-39.3 45.1c-8.9 7.6-18.5 14.2-28.5 20h302.8c8.3 0 16.8-7.6 18.6-16.9L639.6 281c2-9.3-3.3-16.9-11.6-16.9zM466.9 338.8l-3.2 15c-.4 1.6-1.1 3-2.4 4.2c-1.3 1.1-2.8 1.8-4.4 1.8h-13.5l-13.9 64.6c-.8 3.3-2.8 4.9-6.3 4.9h-22.7c-3.4 0-4.8-1.6-4-4.9l13.9-64.6h-13.6c-3.8 0-5.3-1.9-4.4-5.8l3.2-15c.8-3.7 3-5.5 6.8-5.5h13.5l5.2-24.3c.4-1.3 1-2.4 2-3.4s2.4-1.6 4.2-2l24.6-3.8c1.3 0 2.3 .4 2.8 1.3c.6 .9 .8 2 .4 3.4l-6.2 28.7h13.5c1.6 0 2.8 .5 3.7 1.4c1 .7 1.2 2.1 .8 4zm117.5-.1c-.1 .3-.1 .5-.3 .8c-.1 .3-.1 .5-.3 .8l-50.5 81.5c-.5 .8-.9 1.6-1.5 2.4c-.5 .9-1.1 1.6-1.8 2.4c-.6 .8-1.4 1.4-2.3 1.9s-1.8 .8-2.8 .8H502c-1.3 0-2.1-.1-2.6-.5c-.6-.4-1-.9-1.4-1.5c-.4-.9-.6-1.8-.9-2.6s-.5-1.9-.6-2.8c-2.4-13.5-5-27-7.7-40.4c-2.6-13.5-5.3-27-7.7-40.4c-.1 0-.1-.4-.1-.9s0-1 .3-1.5c.5-2.3 2.1-3.4 4.9-3.4h27.5c1.5 0 2.6 .4 3.4 1.1c.8 .8 1.3 1.8 1.4 3.2c.3 3.8 .6 8.1 1 12.6s.8 9.1 1.3 13.6c.4 4.5 .8 8.7 1 12.6c.4 3.9 .5 7.2 .6 9.6l24.6-48.6c.9-1.5 1.9-2.5 2.9-3.2c1-.6 2.3-1 3.8-1h27c1.8 0 2.9 .4 3.4 1c.4 .5 .5 1.4 .3 2.5z"/></svg>

© www.soinside.com 2019 - 2024. All rights reserved.