it-swarm.com.de

CSS-Padding-Eigenschaft für SVG-Elemente

Ich kann nicht herausfinden, wie die CSS-Eigenschaft padding für svg-Elemente interpretiert wird. Das folgende Snippet ( jsFiddle ):

<!DOCTYPE html>
<meta charset="utf-8">
<title>noob d3</title>

<style>
svg{background-color:beige;
    padding:0px 0px 50px 50px;}
rect{fill:red;
     stroke:none;
     shape-rendering:crispEdges;}
</style>

<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
d3.select("body")
.append("svg")
  .attr("width", 155)
  .attr("height", 105)
.append("g")
.append("rect")
  .attr("class", "frame")
  .attr("x", 50)
  .attr("y", 50)
  .attr("width", 50)
  .attr("height", 50);
  </script>
</body>

... wird in Firefox und Chrome deutlich anders dargestellt. Was noch schlimmer ist, keine der beiden Anzeigen macht für mich wirklich Sinn: Die Größe des angezeigten svg-Elements (das "beige" -Rechteck) scheint deutlich größer zu sein, als ich erwartet hatte.

Meine Frage ist also zweifach: 1) Wie wirkt sich die padding-Eigenschaft eines svg-Elements angenommen darauf aus, wo sich Dinge befinden? 2) Gibt es eine Polyfill, die dafür sorgt, dass sowohl Chrome als auch Firefox die Polsterung auf dieselbe Weise behandeln?

12
kjo

AFAIK, der SVG-Standard, spezifiziert nichts wie Padding, weshalb es uneinheitlich gehandhabt wird. Stellen Sie einfach das SVG auf die gewünschte Größe (mit Auffüllen) ein und fügen Sie möglicherweise eine rect hinzu, damit es so aussieht, als würde es erscheinen.

20
Lars Kotthoff

Nach meiner Erfahrung (zugegebenermaßen sehr wenig, da ich immer noch SVG lerne), habe ich mich vom Padding entfernt, wo immer ich das könnte. Als ich zum ersten Mal SVG lernte, wurde mir vorgeschlagen, dass ich, wenn möglich, einen Rand anstelle der Polsterung benutze.

Das liegt auch daran, dass Sie display: block; und margin: 0 auto; verwenden können, um die linke und rechte Seite einer SVG direkt in die Mitte des Bildschirms zu bringen.

4
th3n3wguy

Es gibt keine Auffüllung oder Ränder, Sie können jedoch die X- und Y-Attribute so einstellen, dass die Elemente innen oder außen eine Auffüllung und einen Rand erhalten. Wenn ein Element beispielsweise bei (0,0) beginnt, beginnt bei (10, 10) automatisch ein Rand von 10.

1
newbie