SVG wird nach der Generierung mit Icomoon nicht korrekt gerendert

Ich bin ein wenig ratlos, warum mein nettes Symbol von Icomoon ein wenig zerkaut wird.

Geben Sie hier die Bildbeschreibung ein

<svg xmlns="http://www.w3.org/2000/svg" width="624" height="600" viewBox="-161.358 -67.667 624 600">
<path fill="green" d="M277.452 42.987c0 15.59-12.756 28.347-28.347 28.347H51.132c-15.59 0-28.347-12.756-28.347-28.347v-14.64C22.785 12.757 35.542 0 51.132 0h197.973c15.59 0 28.347 12.756 28.347 28.347v14.64zM150.452 212h86.334s67.333 32 64 107.333H151.452l-1-107.333z"/>
<path fill="green" d="M150.453 212H64.12s-67.333 32-64 107.333h149.334l1-107.333zm-27 107.333l26 144.667 25-144.667"/>
<path fill="green" d="M64.12 67.495v251.838h170.666V67.495H64.12zm59.332 117.838L106.12 212V75.333h17.332v110z"/>
</svg>

Ich bin kein Experte für Icon-Fonts und SVGs, aber das sieht alles richtig aus und Icomoon beschwert sich nicht. Es scheint nur den Schnittpunkt zwischen zwei Pfaden in diesem SVG auszuschneiden, wenn die Schriftart generiert wird. Ein Kollege hat berichtet, dass er das Symbol ohne dieses Problem gesehen hat, was dieses Problem düsterer macht.

Könnte jemand etwas Weisheit verleihen?

Antworten (1)

Der Problembereich entspricht, wie Sie sagten, der Überschneidung zweier Ihrer Pfade:

Geben Sie hier die Bildbeschreibung ein

Sie sollten Ihr SVG mit so wenig Pfaden und Punkten wie möglich zu einer einzigen Form glätten. Überlappende Pfade, insbesondere in Schriftarten, werden Ihnen viele Probleme bereiten, wenn Sie nicht auf die Pfadrichtung usw. achten. Tun Sie es einfach nicht; Es ist eine schlechte Praxis und wird Ihnen nur Kopfschmerzen bereiten.

Dies ist Ihr SVG, das als einzelner Pfad festgelegt ist (über den Pathfinder von Illustrator):

<svg xmlns="http://www.w3.org/2000/svg" width="624" height="600" viewBox="-161.358 -67.667 624 600">
    <path fill="green" d="M236.786,212h-2V71.334h14.318c15.591,0,28.348-12.757,28.348-28.347v-14.64C277.452,12.756,264.695,0,249.105,0H51.132c-15.59,0-28.347,12.757-28.347,28.347v14.64c0,15.591,12.757,28.347,28.347,28.347H64.12V212c0,0-67.333,32-64,107.333h123.333l26,144.667l25-144.667h126.333C304.119,244,236.786,212,236.786,212z M106.12,75.333h17.332v110L106.12,212V75.333z"/>
</svg>

Geben Sie hier die Bildbeschreibung ein

SVG wird nach der Generierung mit Icomoon nicht korrekt gerendert
AntwortenHierDatenschutz-Bestimmungen1y, 0v