Question

我正在尝试使用SVG在HTML块周围创建一个带有固定宽度但灵活高度的虚线边框。我非常接近，但无法显示底部。

这是fiddle（小提琴包含SVG图片，因此可以内嵌URL编码元素，特别是#是%23）

SVG代码如下所示：

<svg width="300px" height="100%" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="290" height="100%" 
    style="fill: yellow; fill-opacity: 0.5; stroke: #009fe3; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 7"/>
</svg>

这样的CSS：

div.block {
  box-sizing: border-box;
  padding: 10px;
  width: 300px;
  background-image: url("dotted-border.svg");
}

我想我想要的是从底部偏移矩形，但它需要是一个像素值（5px）。通过更广泛的SVG 2采用（http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Stroke_position）看起来我想要的东西是微不足道的，因为笔划可以定位在形状内。

我知道我可以添加另一张图片并使用CSS :after，但我很好奇！

Answer 1

无法在svg中计算正确的高度。而不是使用背景图像，用绝对定位的div包装svg：

HTML 的

<div class="block">
    <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quasi officia vero aut. Velit ratione sapiente fugiat rerum eos ipsa praesentium autem similique vitae reprehenderit et tempora optio eveniet facilis.</article>
    <div class="back-svg">
        <svg width="100%" height="100%" xmlns='http://www.w3.org/2000/svg'><rect width="100%" height="100%" style='fill: yellow; fill-opacity: 0.5; stroke: #009fe3; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 7'/></svg>
    </div>
</div>

CSS

html,body {
  height:100%;
}
div.block {
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  width: 300px;
  border: 1px solid green;
}
div.back-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

小提琴：http://jsfiddle.net/k3v4by34/

Answer 2

为什么不使用简单的CSS边框？

＆＃13;

div.block {
    box-sizing: border-box;
    padding: 10px;
    width: 300px;
    background-image: url("data:image/svg+xml;utf8,<svg width='300px' height='100%' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='5' width='290' height='100%' style='fill: yellow; fill-opacity: 0.5; stroke: %23009fe3; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 7'/></svg>");
}

div.block2 {
    box-sizing: border-box;
    padding: 4px;
    margin:3px;
    width: 294px;
    background-color:rgba(255,255,0,0.5);
    border:3px dotted #009fe3;
}

/* Alternative method using CSS3 border-image: */
div.block3 {
    box-sizing: border-box;
    padding: 4px;
    margin:3px;
    width: 294px;
    background-color:rgba(255,255,0,0.5);
    border:8px solid transparent;
    -webkit-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAbklEQVR4nGL4W8zBMJAYmbMCiJ9C8Qosimkijyz5Hw2vQNNME3mYgqdYFDxFMoBm8oPGAQMeBQOeCAdFNhxwB4yWA6PlwGg5MODZcMAdMFoOjJYDo+XAgGfDAXfAaDkwWg6MlgMDggEAAAD//wMAIRKl6nQ6gLIAAAAASUVORK5CYII=) round;
    -o-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAbklEQVR4nGL4W8zBMJAYmbMCiJ9C8Qosimkijyz5Hw2vQNNME3mYgqdYFDxFMoBm8oPGAQMeBQOeCAdFNhxwB4yWA6PlwGg5MODZcMAdMFoOjJYDo+XAgGfDAXfAaDkwWg6MlgMDggEAAAD//wMAIRKl6nQ6gLIAAAAASUVORK5CYII=) round;
    border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAbklEQVR4nGL4W8zBMJAYmbMCiJ9C8Qosimkijyz5Hw2vQNNME3mYgqdYFDxFMoBm8oPGAQMeBQOeCAdFNhxwB4yWA6PlwGg5MODZcMAdMFoOjJYDo+XAgGfDAXfAaDkwWg6MlgMDggEAAAD//wMAIRKl6nQ6gLIAAAAASUVORK5CYII=) round;
    border-image-slice: 25%;
}

＆＃13;

<div class="block">
    <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quasi officia vero aut. Velit ratione sapiente fugiat rerum eos ipsa praesentium autem similique vitae reprehenderit et tempora optio eveniet facilis. (SVG)</article>
</div>
<p></p>
<div class="block2">
    <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quasi officia vero aut. Velit ratione sapiente fugiat rerum eos ipsa praesentium autem similique vitae reprehenderit et tempora optio eveniet facilis. (CSS)</article>
</div>
<p></p>
<div class="block3">
    <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quasi officia vero aut. Velit ratione sapiente fugiat rerum eos ipsa praesentium autem similique vitae reprehenderit et tempora optio eveniet facilis. (CSS3)</article>
</div>

＆＃13;

是否可以使用SVG rect作为具有可变高度的HTML元素的边框

2 个答案: