SVG 背景：无效的属性值，但没有编码问题，没有大小问题，正确的 SVG 数据

Question

我想为部分添加 SVG 背景：

section:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1759' height='487'>
    <path fill-rule='evenodd' d='M.275 486.998v-71.289l195.433-17.134 272.605 36.139 354.025-40.084 376.837 22.027 167.116-33.691 123.525 10.183v-90.097c-19.37-7.076-33.993-19.779-41.836-37.348-12.608.575-23.677-2.665-34.94-4.042-11.307-1.384-9.418-2.978-20.29-11.748-6.322-7.559-25.001-23.314-19.396-53.32-54.99-8.674-7.704-61.466-19.727-38.411 6.692-12.833 16.4-22.991 29.181-30.047-17.93-26.729.239-59.614 26.875-62.722 4.146-.484 8.045-.83 10.293-7.007 7.362-20.224 21.257-35.519 40.076-46.175C1478.063 2.033 1497.6-1.056 1517.926.559c11.874.944 23.17 4.624 33.822 9.938 10.682 5.329 19.499 13.147 27.424 21.958 10.107 11.238 16.863 24.342 19.687 39.136 1.733 9.071 2.123 18.399 3.179 28.198 2.566 0 5.628-.463 8.504.076 17.91 3.357 33.729 10.548 46.525 24.14 20.512 21.785 26.021 47.316 17.87 75.256-8.23 28.216-28.42 45.136-56.394 53.167-1.31.376-2.851 1.283-3.508 2.4-8.365 14.199-20.443 21.727-37.183 21.019-3.065-.13-4.823.98-6.917 3.515-7.53 9.11-16.14 17.19-27.673 21.065-8.299 2.789-16.779 5.039-25.166 7.524v87.653l240.027 20.105v71.289H.275z'/></svg>");
}

如您所见，SVG 数据是正确的。没有任何编码问题（因为我不使用#）。而且，SVG数据是正确的。

但是，Chrome 认为这是无效的。

我该如何修复这个错误？

Answer 1

我认为你的字符串有问题。使用此URL-Encoder 比较您的差异。

编辑：我发现这个question 有同样的问题。 （可能这是一个 重复）

简单示例：

section {
position: relative;
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,.1);
}

section:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1759' height='487'%3E%3Cpath fill-rule='evenodd' d='M.275 486.998v-71.289l195.433-17.134 272.605 36.139 354.025-40.084 376.837 22.027 167.116-33.691 123.525 10.183v-90.097c-19.37-7.076-33.993-19.779-41.836-37.348-12.608.575-23.677-2.665-34.94-4.042-11.307-1.384-9.418-2.978-20.29-11.748-6.322-7.559-25.001-23.314-19.396-53.32-54.99-8.674-7.704-61.466-19.727-38.411 6.692-12.833 16.4-22.991 29.181-30.047-17.93-26.729.239-59.614 26.875-62.722 4.146-.484 8.045-.83 10.293-7.007 7.362-20.224 21.257-35.519 40.076-46.175C1478.063 2.033 1497.6-1.056 1517.926.559c11.874.944 23.17 4.624 33.822 9.938 10.682 5.329 19.499 13.147 27.424 21.958 10.107 11.238 16.863 24.342 19.687 39.136 1.733 9.071 2.123 18.399 3.179 28.198 2.566 0 5.628-.463 8.504.076 17.91 3.357 33.729 10.548 46.525 24.14 20.512 21.785 26.021 47.316 17.87 75.256-8.23 28.216-28.42 45.136-56.394 53.167-1.31.376-2.851 1.283-3.508 2.4-8.365 14.199-20.443 21.727-37.183 21.019-3.065-.13-4.823.98-6.917 3.515-7.53 9.11-16.14 17.19-27.673 21.065-8.299 2.789-16.779 5.039-25.166 7.524v87.653l240.027 20.105v71.289H.275z'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
   
}

<section>
This is an example section </section>

Answer 2

你必须使用 url 编码的字符串： e. G。 <svg> 变成了%3Csvg%3E。