Css 是否可以使用SVG矩形作为高度可变的HTML元素的边框

我试图使用SVG在HTML块周围创建一个虚线边框，该边框的宽度固定，但高度灵活。我离得很近，但却无法触底

这是一个（fiddle包含了SVG图像，因此它可以内联到URL编码的元素中，特别是

is

%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>

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

我想我想要的是从底部偏移矩形，但它需要是一个像素值（

5px

）。看起来，如果SVG2采用范围更广（）的话，我想要的将是微不足道的，因为这样笔划就可以定位在形状内部

---

我知道我可以添加另一个图像并使用CSS

：after

，但我很好奇

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

HTML

---

fiddle:

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

div.block{
框大小：边框框；
填充：10px；
宽度：300px；
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
分区2{
框大小：边框框；
填充：4px；
保证金：3倍；
宽度：294px；
背景色：rgba（255255,0,0.5）；
边框：2009年2月3日3件带点；
}
/*使用CSS3边界图像的替代方法：*/
分区3{
框大小：边框框；
填充：4px；
保证金：3倍；
宽度：294px；
背景色：rgba（255255,0,0.5）；
边框：8px实心透明；
-webkit边框图片：url（数据：image/png；base64，ivborw0kgoaaaansuhueugaaaacaaagcayaaabzenr0aababkleqvr4ngl4w8zbmjaymbmcij9c8qosimkijyz5hw2vqnnme3mygqdyfdxfmobm8opgaqmebqdecadfnhxwb4ywa6plwgg5modzcmfoojydo+xaggfdaxfaadkwg6mlggaaad//）圆形；
-o-border-image:url（数据：image/png；base64，ivborw0kgoaaaansuhueugaaaacaaagcayaaabzenr0aabkleqvr4ngl4w8zbmjaymbmcij9c8qosimkijyz5hw2vqnnme3mygqdyfdxfmobm8opgaqmebqdecadfnhxwb4ywa6plwggggg5modzcmfoojydo+xaggfdaxfaadkwg6mlggaad///wmairkl6nqgliaaaaavorasuk5cyii=）轮；
边框图片：url（数据：image/png；base64，ivborw0kgoaaaansuheugaaacaagcayaabzenr0aabkleqvr4ngl4w8zbmjaymbmcmij9c8qosimkijyz5hw2vqnnme3mygqdyfdxfmobm8opgaqmebqmebqoecadfnhxwb4ywa6plwgg5modzcmadmfoojydo+xaggfdaxfadkwg6mgmdgaad//wmairkl6gliavork5cyii=）圆形；
边界图像切片：25%；
}

Lorem ipsum dolor sit amet，奉献精英。这是一个非常正式的职位。合理的智慧、合理的行为、合理的行为、合理的生活、合理的时间、合理的面部护理。（SVG）

Lorem ipsum dolor sit amet，奉献精英。这是一个非常正式的职位。合理的智慧、合理的行为、合理的行为、合理的生活、合理的时间、合理的面部护理。（CSS）

Lorem ipsum dolor sit amet，奉献精英。这是一个非常正式的职位。合理的智慧、合理的行为、合理的行为、合理的生活、合理的时间、合理的面部护理。（CSS3）

您可以使用

preserveAspectRatio

属性，但虚线看起来会根据内容高度拉伸或挤压：像这样？我仍然无法显示底线。@bloke_zero:我已将其简化并添加了fiddle Url谢谢-这确实回答了问题，但我认为需要额外加分是个问题。@bloke_zero好的，然后，您应该使用CSS创建边框，并可以选择使用背景SVG，而不使用CSSborder@bloke_zero您可以在运行时将绝对div添加到所有div.block元素。我希望使用点而不是破折号。当它们稍微大一点（圆一点）时，这就更有意义了。@bloke_zero在这种情况下，也许你可以使用CSS3边框图像。我将编辑我的答案以添加一个例子。@squamish ossifrage仔细考虑后，这似乎是目前的正确答案，遗憾的是，在Safari中，这些角落被阻塞了，但也许他们会解决这个问题。

<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>

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;
}