web-dev-qa-db-fra.com

Propriété de remplissage CSS pour les éléments svg

Je n'arrive pas à comprendre comment la propriété CSS padding est interprétée pour les éléments svg. L'extrait suivant ( 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>

... s'affiche de manière très différente dans Firefox et Chrome. Pire encore, aucun de ces affichages n’a vraiment de sens: la taille de l’élément svg affiché (le rectangle "beige") semble être bien plus grande que ce à quoi j’attendais.

Ma question est donc double: 1) Comment la propriété padding d'un élément svgsupposé affecte-t-elle les endroits où elle est dessinée? 2) Existe-t-il un polyfill qui garantira que Chrome et Firefox gèrent le remplissage de la même manière?

cssgoogle-chromefirefoxsvgd3.js
12
kjo

Autant que je sache, le standard SVG ne spécifie rien comme le rembourrage, raison pour laquelle il est manipulé de manière incohérente. Réglez simplement le fichier SVG à la taille souhaitée (avec un rembourrage) et ajoutez éventuellement une variable rect pour que ce dernier apparaisse comme vous le souhaitez.

20
Lars Kotthoff

De par mon expérience (certes, encore que très peu d’apprentissage du SVG), j’ai abandonné l’utilisation de rembourrage partout où je pouvais le faire. Lorsque j'ai commencé à apprendre le SVG, il m'a été suggéré d'utiliser, si possible, margin au lieu de padding.

Cela est également dû au fait que vous pouvez utiliser display: block; et margin: 0 auto; pour que les côtés gauche et droit d'un fichier SVG s'adaptent directement au milieu de l'écran.

4
th3n3wguy

Il n'y a pas de marge ni de marge, mais vous pouvez définir les attributs x et y de manière à ce que les éléments à l'intérieur ou à l'extérieur obtiennent une marge et un bord. Par exemple, si un élément commence à (0,0), commencer à (10, 10) donnera automatiquement une marge de 10.

1
newbie