Ich kann nicht herausfinden, wie die CSS padding -Eigenschaft für svg -Elemente interpretiert wird. Das folgende Snippet ( jsFiddle ):
... wird in Firefox und Chrome deutlich anders dargestellt. Was noch schlimmer ist, macht für mich kein Display wirklich Sinn: Die Größe des angezeigten Elements svg (das "beige" Rechteck) scheint wesentlich größer zu sein als ich erwartet habe.
Also meine Frage ist zweifach: 1) Wie wirkt sich die padding Eigenschaft eines svg Elements auf aus, um zu beeinflussen, wo die Dinge darin gezeichnet werden? 2) Gibt es einen Polyfill, der sicherstellt, dass sowohl Chrome als auch Firefox beide Padding auf die gleiche Weise behandeln?
AFAIK, der SVG-Standard spezifiziert nichts wie Padding, weshalb es inkonsistent gehandhabt wird. Setzen Sie einfach das SVG auf die gewünschte Größe (mit Padding) und fügen Sie eventuell rect hinzu, damit es so aussieht, als ob es angezeigt werden soll.
Aus meiner Erfahrung (gewährt, immer noch sehr wenig, da ich immer noch SVG lerne), habe ich mich davon entfernt, Padding zu benutzen, wo immer ich das tun könnte. Es wurde mir vorgeschlagen, wenn ich SVG zum ersten Mal lernte, dass ich Rand anstelle von Padding verwende, wenn möglich.
Dies liegt auch daran, dass Sie display: block; und margin: 0 auto; verwenden können, um die linke und rechte Seite eines SVG so zu gestalten, dass sie direkt in die Mitte des Bildschirms passen.
Tags und Links css svg google-chrome firefox d3.js