CSS 中的内联 SVG 做背景图像

Question

我正在尝试使用 CSS 内的内联 SVG 来实现此目的，但它不起作用。

原文： https: //codepen.io/cmdw/pen/vQqzyB

CSS 内嵌 SVG：

https://codepen.io/honk007/pen/wvBgxGZ

.divider{
        content                   : " ";
        height                    : 25px;
        width                     : 100%;
        background-image: url("data:image/svg+xml;utf8,<svg class='editorial' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 24 150 28'><defs><path id='gentle-wave' d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' /></defs><g class='parallax1'><use xlink:href='#gentle-wave' x='50' y='3' fill='#f461c1' /></g></svg>");

        background-size        : 49px 100%;
        -webkit-background-size: 49px 100%;
        position               : absolute;
        top                    : -25px;
    }

我感觉引号是问题所在。

Answer 1

• 您缺少 xlink 命名空间的定义。
• # 字符在 URL 中保留，以指示片段标识符的开始。必须写成%23

这给了我们一个有效的 URL

data:image/svg+xml;utf8,<svg class='editorial' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none' viewBox='0 24 150 28'><defs><path id='gentle-wave' d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' /></defs><g class='parallax1'><use xlink:href='%23gentle-wave' x='50' y='3' fill='%23f461c1' /></g></svg>

尝试将 URL 直接粘贴到浏览器的地址栏中，它会告诉您。