Warum wird dieses SVG im CSS/HTML abgeschnitten?
Hallo,
ich habe ein SVG in mein HTML-Gerüst eingesetzt und mit CSS gestaltet. Weiß jemand, warum das SVG abgeschnitten wird?
Im SVG-Code habe ich eine stroke-width="2.5" angegeben. Je dünner desto weniger fällt das Abschneiden auf. Das SVG selbt ist mit width und height bei 100%. Selbst ein übergeordnetes DIV mit einem padding bewirkt nichts.
Das SVG scheint sich selbst nur ohne Linienstärke des Kreises zuzulassen. Das Bild unten ist nur zum Verständnis. Kein Screenshot aus dem Html-Ergebnis.
<div class="imgBox">
<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="100%" height="100%" viewBox="0 0 96.125 96.125" enable-background="new 0 0 96.125 96.125" xml:space="preserve">
<pattern x="-2" y="98" width="69" height="69" patternUnits="userSpaceOnUse" id="Polka_Dot_Pattern" viewBox="2.125 -70.896 69 69" overflow="visible"></pattern>
<circle id="Kreis" fill="#ffffff" fill-opacity=.1 stroke="#ffffff" stroke-width="2.5" cx="48.063" cy="48.063" r="47.813"/>
</svg>
</div>
1 Antwort
Das DIV ist viereckig.
Der Vector darin ist rund, was an sich kein Problem darstellen sollte. ALLERDINGS geht dein Stroke (also der "Strich" des Kreises) von der Mitte aus. Das heißt, die Dicke wird immer gleichzeitig oben und unten addiert. Das kannst du gut sehen, da das DIV den Kreis abschneidet. Das DIV selbst richtet sich nach dem Kreis ohne Dicke und schneidet alles andere darüber hinaus aus.
Du könntest das Problem beheben indem du entweder den Stroke nach innen verlegst (also nicht wie aktuell mittig) oder indem du deinem DIV ein Padding gibst, was allerdings weniger flexibel wäre.
Wow, super. Vielen Dank. Ich probiere es einmal aus. Weißt du evtl mit welchem Befehl dies in dem Code umzusetzen ist?
Ansonsten müsste ich das SVG in Illustrator anpassen und die Linie dort nach innen setzen. LG