无法将此 SVG 编码为工作背景图像

Posted 2023-03-06

【中文标题】无法将此 SVG 编码为工作背景图像

【英文标题】：Can't encode this SVG into a working background image

【发布时间】：2019-06-04 19:08:47

【问题描述】：

我有一个 SVG：

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

它使用外部工具对其进行了测试，效果很好：

现在我想在背景图像中使用它。我用https://www.url-encode-decode.com/编码了SVG

然后我将编码的 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');

我做错了什么？

【问题讨论】：

查看我的回答：***.com/questions/54077571/…

这在未来可能会有所帮助：URL-encoder for SVG

【参考方案1】：

您的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（您基本上可以删除它并且它仍然有效）。但他们不会为background-image base64 编码的 SVG 这样做。

简而言之，如果它无效，它将无法作为图像使用。

【讨论】：

谢谢。一问：您是如何制作内容的？这不仅仅是从我的“https”中删除“s”。我的原始字符串在转义方面与您的完全不同。 我的：background-image: url('data:image/svg+xml;charset=utf8,%3Csvg+xmlns%3D%22https%3A%2F%2Fwww.w3.org...... 你的从哪里开始 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'

猜猜我对你的问题是什么编码过程传递给你通过我的原始svg 代码使其工作（除了 https -> http）。修改我的原始代码并删除“s”不会使代码工作。但是使用您的编码示例有效。你是怎么编码的？

如果您能看看我的 cmets，我将不胜感激

@Jason，我完全按照你的做法做了（使用了 online encoder），但是 我做了手动将 xmlns 从 https:// 更改为 http:// 之后意识到这就是原因。 （作为嵌入式<svg> 而不是图像通常是因为xmlns 有问题，所以这是我首先仔细检查的）。不更改xmlns 也会导致我使用的编码器出现错误结果。我通过搜索 "svg encode base64" 并单击第一个结果找到了该编码器。

你可以阅读base64编码和URL编码的区别here。它们相似，但又不同。 data:image/svg+xml 对象应该用 base64 编码，afaik。可能可以使用其他编码类型，但 URL 编码器是特定于 URL 的，它们不适用于 data。

【参考方案2】：

也许这不是您确切问题的答案， 但是您可以使用linear-gradient 使用更简单的代码来制作您的background：

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

【讨论】：

它没有回答我的问题，但我仍然很感激。我的目标是学习如何嵌入 SVG，但你是正确的，对于这个特定的目的，你更简单的解决方案可以完成这项工作。谢谢。

【参考方案3】：

将您的 svg 保存到 file.svg 并尝试使用 https://www.developertoolkits.com/base64/encoder

它获取图像并将它们转换为数据 url，然后您可以像尝试做的那样将其放入内联或 css 中。

您使用的网站是一个 url 编码器。