css - SVG 图像底部边框

Question

我想在网站上的一组图片底部添加一条波浪线。

我找到了一些 SVG 图像的代码，可以正确呈现为图像，但是当我将图像的 border-image 属性设置为该 SVG 时，没有显示任何内容。

这是 html:

    <img src="data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' style='fill:blue'
         viewBox='0 0 1440 126' >
<path transform='scale(1, -1) translate(0, -100)'  d='M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z'/>
</svg>">

<img src="data:image/svg+xml;utf8,<svg viewBox='0 0 10 10'  width='48' height='48' xmlns='http://www.w3.org/2000/svg'><circle r='50%' cx='50%' cy='50%' fill='none' stroke='purple' stroke-width='5' stroke-dasharray='1 3'/>
<circle r='50%' cx='50%' cy='50%' fill='none' stroke='orangered' stroke-width='5' stroke-dasharray='.8 2.5'/><circle r='50%' cx='50%' cy='50%' fill='none' stroke='gold' stroke-width='5' stroke-dasharray='.6 2'/><circle r='50%' cx='50%' cy='50%' fill='none' stroke='yellowgreen' stroke-width='5' stroke-dasharray='.4 1.5'/><circle r='50%' cx='50%' cy='50%' fill='none' stroke='teal' stroke-width='5' stroke-dasharray='.25 1'/>
            </svg>">

    <div >
        <p>with border that doesn't work</p>
        <img class="box box--4" src="https://www.nasa.gov/sites/default/files/thumbnails/image/img1_0.png">
        <p>  after</p>

         <p>with border that does work</p>
        <img class="box box--3" src="https://www.nasa.gov/sites/default/files/thumbnails/image/img1_0.png">
        <p>  </p>
    </div>

这是 CSS:

div {
  width: 40vw;
  height: 40vh;
  margin: 4em auto;
}

.box--4
{
      width: 300px;
    border: 3rem solid transparent;
    border-top:0;
border-left:0;
border-right:0;
    border-image-width: 20px;
    border-image:  
        url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'  style='fill:blue'
         viewBox='0 0 10 10'   width='48' height='48'   >
<path transform='scale(1, -1) translate(0, -100)'  d='M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z'/>
</svg>") 100%;
}

.box--3
{
      width: 30px;
    border: 3rem solid transparent;
    border-top:0;
border-left:0;
border-right:0;
    border-image:  
        url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 10'  width='48' height='48' xmlns='http://www.w3.org/2000/svg'><circle r='50%' cx='50%' cy='50%' fill='none' stroke='purple' stroke-width='5' stroke-dasharray='1 3'/>
<circle r='50%' cx='50%' cy='50%' fill='none' stroke='orangered' stroke-width='5' stroke-dasharray='.8 2.5'/><circle r='50%' cx='50%' cy='50%' fill='none' stroke='gold' stroke-width='5' stroke-dasharray='.6 2'/><circle r='50%' cx='50%' cy='50%' fill='none' stroke='yellowgreen' stroke-width='5' stroke-dasharray='.4 1.5'/><circle r='50%' cx='50%' cy='50%' fill='none' stroke='teal' stroke-width='5' stroke-dasharray='.25 1'/>
            </svg>") 25%;
}


.box {
    position: relative;
    margin: 1rem;
  width: 100%;
    //height: 13rem;
  //  box-sizing: border-box;
    vertical-align: top;
    text-align: center;
}

/* Page styles */

HTML,
BODY {
    height: 100%;
}

BODY {
    display: block;
    align-items: center;
    min-width: 51rem;
    justify-content: center;
    background: linear-gradient( #DDD 1px, transparent 1px), linear-gradient( 90deg, #DDD 1px, transparent 1px);
    background-color: #fff;
    background-size: 1rem 1rem;
    text-align: center;
    font: 14px/1.4 Tahoma, sans-serif;
}

我这里有一支密码笔:

https://codepen.io/roadpost/pen/zYOByqB

第一个图像是“波浪”线 svg，可以正确呈现。

第二张图片是另一个示例 svg，它也可以正确呈现。

感谢您提供关于为什么 box-4 边框图像什么都不显示的任何见解。

Answer 1

您没有正确使用 svg。将 svg 与 css 结合使用很棘手，因为您需要对大多数字符进行 url 编码。

<替换为 %3C

>替换为 %3E

#替换为 %23

有关字符的完整列表，请查看此 LINK

---

这是一个svg在css中的模板: background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' fill='%23' xmlns='http://www.w3.org/2000/svg'%3E SVG SHAPES HERE %3C/svg%3E")