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 放在一个有 a 的 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 回答
1

你不能把规则添加到你的样式表吗？

<style type="text/css">
 ...
svg { height: auto !important; }
</style>

您想将该规则放在样式标签的最底部，以确保它具有优先权。

此外，在您的代码示例中，您似乎将 设置rect为 25 像素，但不是实际<svg>元素。

于 2013-04-02T03:47:00.850 回答