Не могу закодировать этот SVG в рабочее фоновое изображение

Question

У меня есть SVG:

<svg xmlns="https://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="stripes" patternUnits="userSpaceOnUse" width="7" height="6" patternTransform="rotate(45)">
      <line x1="1" y="0" x2="1" y2="7" stroke="#fffa72" stroke-width="1.5" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="#fffeea" />
  <rect width="100%" height="100%" fill="url(#stripes)" />
</svg>

Он протестировал его с помощью внешнего инструмента, и он прекрасно работает:

Теперь я хотел бы использовать его в качестве фонового изображения. Я закодировал SVG с помощью https://www.url -encode-decode.com /

Затем я беру закодированный SVG и помещаю его в мой SCSS:

background-image: url('data:image/svg+xml;charset=utf8,%3Csvg+xmlns%3D%22https%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22+width%3D%22100%25%22+height%3D%22100%25%22%3E%0D%0A++%3Cdefs%3E%0D%0A++++%3Cpattern+id%3D%22stripes%22+patternUnits%3D%22userSpaceOnUse%22+width%3D%227%22+height%3D%226%22+patternTransform%3D%22rotate%2845%29%22%3E%0D%0A++++++%3Cline+x1%3D%221%22+y%3D%220%22+x2%3D%221%22+y2%3D%227%22+stroke%3D%22%23fffa72%22+stroke-width%3D%221.5%22+%2F%3E%0D%0A++++%3C%2Fpattern%3E%0D%0A++%3C%2Fdefs%3E%0D%0A++%3Crect+width%3D%22100%25%22+height%3D%22100%25%22+fill%3D%22%23fffeea%22+%2F%3E%0D%0A++%3Crect+width%3D%22100%25%22+height%3D%22100%25%22+fill%3D%22url%28%23stripes%29%22+%2F%3E%0D%0A%3C%2Fsvg%3E');

это не работает. фон остается пустым. Я знаю, что мой HTML работает нормально, потому что когда я подключаю другое фоновое изображение к SVG, который я нашел в Интернете, он прекрасно работает:

background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22a%22%20patternUnits%3D%22userSpaceOnUse%22%20width%3D%225%22%20height%3D%225%22%20patternTransform%3D%22rotate(45)%22%3E%3Cpath%20stroke%3D%22%23fffa72%22%20d%3D%22M1%200v5%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23a)%22%2F%3E%3C%2Fsvg%3E');

Что я делаю не так?

Answer 1

Может быть, это не ответ на ваш точный вопрос,
но вы могли бы сделать background, используя linear-gradient с более простым кодом:

body {
  background: linear-gradient(135deg, #fff 2px, #fffa72, #fff 5px, #fff 9px, #fffa72, #fff 12px) 0 0 / 10px 10px;
}

Answer 2

Сохраните svg в file.svg и попробуйте использовать https://www.developertoolkits.com/base64/encoder

Он берет изображения и превращает их в URL-адреса данных, которые затем можно вставить в строку или в CSS, как вы пытаетесь это сделать.

Веб-сайт, который вы используете, является кодировщиком URL.

Answer 3

Ваше xmlns значение неверно. Это http://www.w3.org/2000/svg, а не https://.

body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='stripes' patternUnits='userSpaceOnUse' width='7' height='6' patternTransform='rotate(45)'%3E%3Cline x1='1' y='0' x2='1' y2='7' stroke='%23fffa72' stroke-width='1.5' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%23fffeea' /%3E%3Crect width='100%25' height='100%25' fill='url(%23stripes)' /%3E%3C/svg%3E");
}
html, body {height: auto;}

<div></div>

Документация: https://www.w3.org/2000/svg - да, с https://: D

Во встроенных элементах <svg> большинство браузеров по умолчанию устанавливают атрибут http://www.w3.org/2000/svg, когда он не разрешается (вы можете удалить его, и он все еще работает). Но они не делают этого для SVG в кодировке background-image base64.

Короче говоря, оно не будет работать как изображение, если оно недействительно.