SVG Grenze abgeschnitten in bestimmten Breiten

Ich habe zwei SVG-Grafiken, die eine relative Breite verwenden, um die Größe zu bestimmen (20% ihres Containers). Wenn ich die Größe verändere, indem ich das Fenster größer oder kleiner mache, wird der linke Rand des SVG bei bestimmten Breiten abgeschnitten.SVG Grenze abgeschnitten in bestimmten Breiten

EDIT: Nach Robert Longson Vorschlag habe ich das Markup auf nur die Grenze getrimmt. Hier

ist ein funktionierendes Beispiel: http://codepen.io/anon/pen/xVjjaG

Code:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="-321 591 148 44" style="enable-background:new -321 591 148 44;width:20%;" xml:space="preserve" class="apple_svg"> 
    <style type="text/css"> 
    .st0{fill-rule:evenodd;clip-rule:evenodd; } 
    </style> 
    <g id="Layer_1"> 
    <g> 
     <path d="M-177.7,634.5h-138.5c-2.6,0-4.7-2.1-4.7-4.7v-33.6c0-2.6,2.1-4.7,4.7-4.7h138.5c2.6,0,4.7,2.1,4.7,4.7l0,33.6 
       C-173,632.4-175.1,634.5-177.7,634.5z M-316.3,592.5c-2.1,0-3.7,1.7-3.7,3.7v33.6c0,2,1.7,3.7,3.7,3.7h138.5 
       c2.1,0,3.7-1.7,3.7-3.7l0-33.6c0-2.1-1.7-3.7-3.7-3.7H-316.3z"/> 
    </g> 
    </g> 
</svg>

Dies ist, wie es aussieht, wenn es abgeschnitten:

Und das ist, wie es soll aussehen (und in bestimmten Breiten):

Ich habe versucht, alle Arten von Werten zu verändern und kann es anscheinend nicht reparieren (abgesehen davon, dass es eine feste Breite hat, was ich lieber nicht machen würde, weil der ganze Sinn der Verwendung eines SVG so ist, dass es skaliert). Irgendwelche Ideen, warum das passiert?

Quelle

2016-04-17 SFBA26

Vielleicht könnten Sie das Markup auf die Grenze reduzieren, so dass wir nicht herausfinden müssen, welcher Pfad es ist? –

Versuchen Sie, die Grenze 2px Breite in Ihrer Zeichensoftware zu machen. Exportieren Sie dann in Svg erneut und versuchen Sie es erneut. – wawawoom

Messepunkt @RobertLongson, ich habe es bis zur Grenze getrimmt. – SFBA26

Wenn Sie den Code in Chrome Inspektion bemerkte ich den Zusatz dieses Stils (nicht von mir):

svg:not(:root) { 
    overflow: hidden; 
}

Ich versuchte overflow: hidden; zu overflow: visible; verändert und die SVG wurde nicht mehr abgeschnitten.

Hinzufügen

svg:not(:root) { 
    overflow: visible; 
}

meinen Stylesheet das Problem behebt, aber ich verstehe immer noch nicht, warum die SVG in erster Linie ist überfüllt.

Da dies wirklich eher eine Problemumgehung als eine Lösung ist, werde ich diese Antwort in der Hoffnung, dass jemand in der Lage sein wird, die wahre Ursache zu erklären, nicht akzeptiert.

Quelle

2016-04-17 23:41:45 SFBA26

Ihr Weg außerhalb des viewBox gehen, deshalb ist die einfachste Lösung ist es, die viewBox etwas größer zu machen, dh

viewBox="-322 591 150 44"

Hier habe ich es leicht nach links verlängert und auch auf der rechten Seite (durch Erhöhung seine Breite um mehr als die Menge I verringerte ich um x), als ich fand, dass die rechte Kante zuweilen geschnitten wurde.

Quelle

2016-04-18 06:06:00

SVG Grenze abgeschnitten in bestimmten Breiten

Antwort

Verwandte Themen