web-dev-qa-db-ja.com

svg要素のCSSパディングプロパティ

CSS paddingプロパティがsvg要素に対してどのように解釈されるかわかりません。次のスニペット（ 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>

... FirefoxとChromeでは表示が大きく異なります。さらに悪いことに、どちらのディスプレイも実際には意味がありません：表示されるsvg要素（「ベージュ」の長方形）のサイズは、予想よりも大幅に大きいように見えます。

したがって、私の質問は2つあります。1）padding要素のsvgプロパティsupposedはどのように影響しますかその中で物事が描かれる場所は？ 2）ChromeとFirefoxの両方が同じ方法でパディングを処理することを保証するポリフィルがありますか？

cssgoogle-chromefirefoxsvgd3.js
14
kjo

私の知る限り、SVG標準はパディングのようなものを何も指定していないため、一貫性のない処理が行われています。 SVGを（パディングを使用して）必要なサイズに設定し、rectを追加して、表示したいように表示することができます。

23
Lars Kotthoff

私の経験から（私はまだSVGを学んでいるので、まだ非常に少ないです）、どこでもできるようにパディングを使用することから離れています。 SVGを初めて学習したときに、可能であればパディングの代わりにマージンを使用することが提案されました。

これは、display: block;およびmargin: 0 auto;は、SVGの左右を画面の中央に直接合わせるようにします。

5
th3n3wguy

パディングやマージンはありませんが、xおよびy属性を設定して、内側または外側の要素にパディングとマージンを持たせることができます。たとえば、要素が（0,0）で始まる場合、（10、10）で始まると自動的に10のマージンが与えられます。

1
newbie