17

要素の CSSpaddingプロパティがどのように解釈されるのかわかりません。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要素内で描画される場所にどのように影響するはずですか? 2) Chrome と Firefox の両方が同じ方法でパディングを処理することを保証するポリフィルはありますか?

4

4 に答える 4

33

私の知る限り、SVG標準はパディングのようなものを指定していません。そのため、一貫性のない処理が行われています。SVG を必要なサイズ (パディングあり) に設定し、a を追加しrectて、表示したいように表示するだけです。

于 2013-10-31T13:08:57.857 に答える
6

私の経験から (確かに、私はまだ SVG を学んでいるので、まだほとんどありません)、可能な限りパディングを使用することから遠ざかりました。SVG を初めて学習したときに、可能であればパディングの代わりにマージンを使用するように勧められました。

これは、 and を使用display: block;しmargin: 0 auto;て、SVG の左右を画面の中央に直接収めることができるためでもあります。

于 2013-10-30T22:49:57.677 に答える
1

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

于 2017-10-10T15:01:06.373 に答える
0

firefox と chromium で試した結果によると、svg の指定された幅と高さにはパディングが含まれています。つまり、両側に 10 ピクセルのパディングがある 20*20 ピクセルの画像が必要な場合は、幅を 20+10*2 = 40 ピクセル (高さと同じ) に設定し、パディングを 10 ピクセルに設定する必要があります。

注：20 + 10 * 2：20は必要な幅、10はパディングで、両側に必要なので2倍にします。

于 2022-02-14T11:51:21.327 に答える