Question

当尝试将SVG置于div的底部时，我遇到了一个奇怪的问题：

svg来源如下：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="grad" x1="0" y1="0" x2="100%" y2="0">
        <stop offset="0" stop-color="#FFF" />
        <stop offset="0.1" stop-color="#FFF" />
        <stop offset="0.5" stop-color="#B1B1B1" />
        <stop offset="0.9" stop-color="#FFF" />
        <stop offset="1" stop-color="#FFF" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="100%" height="1px" style="fill:url(#grad)" />
</svg>

如何让svg显示在文本下方（如边框底部）？

我对早期的浏览器并不感兴趣，如果它需要CSS 3属性我很高兴！

编辑：如果没有比绝对定位更好的方法，我会在下面添加另一个div来提供效果。

编辑2：我不确定我需要对SVG采取哪些不同的做法，但使用PNG定位底部的工作正常：http://jsfiddle.net/YXRQX/1/

我需要在SVG代码中指定哪些内容才能正常工作？

编辑3：最终工作jsFiddle在这里：http://jsfiddle.net/GsPhA/4/感谢Ryan的指针！

Answer 1

完成它！感谢Ryan的指针，我添加了background-size css属性来将大小修复为1px高：

.ucp-controls {
    text-align: center;
    margin-top: 10px;
    padding-bottom: 2px;
    margin-bottom: 5px;
    color: #242424;
    cursor: default;

    background: url('http://priddle.serveblog.net/sums2/images/header/line.png') bottom no-repeat;

    background-size: 100% 1px; // The key line; preserves the width but locks the height.
    font-family: Arial;
}

最后，SVG根据作为背景的容器大小调整自身大小。

Answer 2

只要两者都在同一个容器中，文本就应该高于SVG对象，如下所示：

<center>
<p>Sample Text Here</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="grad" x1="0" y1="0" x2="100%" y2="0">
        <stop offset="0" stop-color="#FFF" />
        <stop offset="0.1" stop-color="#FFF" />
        <stop offset="0.5" stop-color="#B1B1B1" />
        <stop offset="0.9" stop-color="#FFF" />
        <stop offset="1" stop-color="#FFF" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="100%" height="1px" style="fill:url(#grad)" />
</svg>
</center>

CSS背景图片没有定位底部

2 个答案: