0

SVG を使用していますが、何らかの理由で、ユーザー エージェント スタイルシートによって高さが 289 ピクセルに設定されています。

多くのSVG（少なくとも256など）を使用するため、高さを定義したくありません!important..

では、ユーザー スタイルシートを (Chrome を使用して) 調整したり、SVG の高さフィールドをリセットしたりして、定義されないようにするにはどうすればよいでしょうか?

SVG HTML の例: (SVG の高さは 25 ピクセルですが、svg バウンディング ボックスは 289 にレンダリングされます)

<div id="measure<%= measure.cid %>" class="measure">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="10" y="10" width="250" height="25" style="stroke:black; stroke-width:2; fill:lightgray;" />
    <div id="<%= beatHolder %>">
    </div>
  </svg> 
</div>

CSS css2

の答えを試すとAlex W、次のようになります。 ここに画像の説明を入力

4

2 に答える 2

1

さて、あなたの例で遊んだ後、私はあなたに答えを出しました. それを使用する場合svgはcomputed style height、親要素から設定されるため、 をsvg持つ div 内に配置する必要があるwidthと言われているheightので、これがどのように使用されるかの簡単な例を作成したので、配置したいとしましょうsvgロゴとして、そしてバナーなどのロゴとして、このようにすることでこれを達成しますsvg。

CSS

.logo {
    width: 250px;
    height: 27px;
}
.navigation {
    width: 960px;
    height: 54px;
}

HTML

<div class="logo">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="250" height="25" stroke="black" stroke-width="2" fill="lightgray" />
  </svg> 
</div>
<div class="navigation">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="960" height="50" stroke="black" stroke-width="2" fill="lightgray" />
  </svg> 
</div>
于 2013-04-02T05:22:23.270 に答える