Warum gibt es Raum um SVG?

Ich versuche zum einbetten von SVG in html-Datei.

Können Sie es sehen können an http://shrineweb.in/other-files/clients/proxymis/html/index.html

Können Sie sehen, dass es padding/margin um das Bild.

Ich es entfernen möchten.

Hier ist der code:--

<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"
     width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="#3ABBD6" d="M43.945,65.639c-8.835,0-15.998-7.162-15.998-15.998c0-8.836,7.163-15.998,15.998-15.998
    c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12
    c0,6.625-5.371,11.998-11.998,11.998C57.168,65.639,47.143,65.639,43.945,65.639z M59.943,61.639c4.418,0,8-3.582,8-7.998
    c0-4.417-3.582-8-8-8c-1.601,0-3.082,0.481-4.334,1.291c-1.23-5.316-5.973-9.29-11.665-9.29c-6.626,0-11.998,5.372-11.998,11.999
    c0,6.626,5.372,11.998,11.998,11.998C47.562,61.639,56.924,61.639,59.943,61.639z"/>
</svg>

Was hast du zum erstellen der SVG? Sie sind am besten öffnen diese in Adobe Illustrator, zum Beispiel, und exportieren Sie die Datei nach dem zuschneiden).
Es ist nicht klar, was Sie Fragen. meinst du etwa das svg-Objekt, oder der Pfad?

InformationsquelleAutor Laksh Khamesra | 2014-03-03

2

Die Polsterung ist Teil Ihres svg-Bild. Verwenden Sie ein Bildbearbeitungsprogramm (zum Beispiel Adobe Illustrator, aber es gibt wohl gute open source-alternativen) entfernen Sie die Leerzeichen. Dies ist nicht etwas, das Sie beheben sollte, in javascript.

Inkscape ist ein gutes open-source-alternative.
Folgen Sie diesen posten auf "ENTFERNEN Sie LEERZEICHEN UM SVGS MIT INKSCAPE": "grobmeier.de/remove-white-space-from-svg-30102015.html

InformationsquelleAutor Simon Groenewolt

habe ich noch nicht so viel Erfahrung mit SVG-code, aber ich habe entfernt den linken Raum von SVG-CODE und dann können Sie style margin in den negativen, entfernen Sie oben Raum, wie dieser code...

check it out ok... 🙂

es ist keine perfekte Lösung, aber es funktioniert gut...

Dank...

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
    <div style="margin-top:-40px;">
        <svg id="Layer_1" xml:space="preserve" enable-background="new 0 0 100 100" viewBox="0 0 100 100" height="100px" width="100px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <path d="M15.945,65.639c-8.835,0-15.998-7.162-15.998-15.998c0-8.836,7.163-15.998,15.998-15.998 c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12 c0,6.625-5.371,11.998-11.998,11.998C57.168,65.639,47.143,65.639,43.945,65.639z M31.943,61.639c4.418,0,8-3.582,8-7.998 c0-4.417-3.582-8-8-8c-1.601,0-3.082,0.481-4.334,1.291c-1.23-5.316-5.973-9.29-11.665-9.29c-6.626,0-11.998,5.372-11.998,11.999 c0,6.626,5.372,11.998,11.998,11.998C47.562,61.639,56.924,61.639,59.943,61.639z" fill="#3ABBD6">
        </svg>
    </div>
</body>
</html>

Interessant, aber warum nicht einfach öffnen Sie die SVG in einem image editor entfernen der Polsterung?

InformationsquelleAutor Tirthrajsinh Parmar

-1

Es ist nicht svg-element Marge, es ist das body-element ist.

So sollten Sie fügen Sie die style-element unter dem Kopf-element und beschreiben "margin:0".
```
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>body{margin:0;}</style>
</head>
```
sorry, es ist nicht ein Körper, Marge, es ist eine svg-Datei code-Marge sitzt im svg-code in <Pfad> - tag

InformationsquelleAutor defghi1977

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.