SVG 作为样式属性中内联的背景图像

Question

我正在尝试将 SVG 内联为 div 的背景图像。这在样式表中工作正常：

div {
  background-image:
    url('data:image/svg+xml;charset=utf8,<svg width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M3 14.0204L10.8806 21L27 3" stroke="%231CDFAF" stroke-width="5" stroke-linecap="round"/></svg>');
}

因为我在 PHP 中使用模板语言，所以我需要使 SVG 的 stroke 动态化。为了使其动态化，我试图在 HTML 样式属性中内联背景图像 SVG，但无法转义 SVG 中的 " 字符。

我试过的：

没有转义的内联

<div
  style="background-image: url('data:image/svg+xml;charset=utf8,<svg width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M3 14.0204L10.8806 21L27 3" stroke="%231CDFAF" stroke-width="5" stroke-linecap="round"/></svg>');"
>
</div>

在每个 "

前添加 \

<div
  style="background-image: url('data:image/svg+xml;charset=utf8,<svg width=\"30\" height=\"25\" viewBox=\"0 0 30 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"><path d=\"M3 14.0204L10.8806 21L27 3\" stroke=\"%231CDFAF\" stroke-width=\"5\" stroke-linecap=\"round\"/></svg>');"
>
</div>

将 " 替换为 %22

<div
  style="background-image: url('data:image/svg+xml;charset=utf8,<svg width=%2230%22 height=%2225%22 viewBox=%220 0 30 25%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22 version=%221.1%22><path d=%22M3 14.0204L10.8806 21L27 3%22 stroke=%22%231CDFAF%22 stroke-width=%225%22 stroke-linecap=%22round%22/></svg>');"
>
</div>

是否可以转义这个内联 SVG？

Answer 1

在属性值内使用 HTML 转义：" 用于双引号，并且（在这种情况下没有必要，但如果需要）' 用于单引号.

<div
  style="background-image: url('data:image/svg+xml;charset=utf8,<svg width=&quot;30&quot; height=&quot;25&quot; viewBox=&quot;0 0 30 25&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;><path d=&quot;M3 14.0204L10.8806 21L27 3&quot; stroke=&quot;%231CDFAF&quot; stroke-width=&quot;5&quot; stroke-linecap=&quot;round&quot;/></svg>');"
>
<br style="line-height:25px">
</div>

（请注意，为了使背景可见，我必须给 div 一些内容；否则它的高度将是 0。但这只是这里的代码片段。）

编辑：如评论中所述，当您使用 %22 而不是 " 引号时，代码也有效。

<div
  style="background-image: url('data:image/svg+xml;charset=utf8,<svg width=%2230%22 height=%2225%22 viewBox=%220 0 30 25%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22 version=%221.1%22><path d=%22M3 14.0204L10.8806 21L27 3%22 stroke=%22%231CDFAF%22 stroke-width=%225%22 stroke-linecap=%22round%22/></svg>');"
>
<br style="line-height:25px">
</div>

那么您的代码中是否存在其他问题？你的div有身高吗？

Answer 2

对于更复杂的 SVG，您需要转义的不仅仅是引号。

我正在使用的项目是用 Twig 模板语言编写的，它带有一个 escape 过滤器，可以与 html_attr.

一起使用

例如：

<div
  style="background-image: url('data:image/svg+xml;charset=utf8,{{ '<svg>...</svg>' | escape('html_attr') }}');"
>
</div>

可在此处找到 escape('html_attr') 的代码：https://github.com/twigphp/Twig/blob/8a78e8bd20f228469cba345284ef8496f84010dd/src/Extension/CoreExtension.php#L1117

它基本上会转义任何与此正则表达式不匹配的字符：[^a-zA-Z0-9,\.\-_]

需要逃脱的主要角色有：

"    &quot;
&    &amp;
<    &lt;
>    &gt;

以下 JavaScript 可用作转义 SVG 字符串以用作 HTML 属性的实用程序：

function escapeHtmlAttr(str) {
  return str.replace(/["&<>]/g, char => {
    switch (char) {
      case '"':
        return '&quot';

      case '&':
        return '&amp';

      case '<':
        return '&lt';

      case '>':
        return '&gt';
    }
    return char;
  });
}

// Usage
const str = `<svg>...</svg>`;           // Your SVG
const escapedStr = escapeHtmlAttr(str); // Escaped SVG

SVG 作为样式属性中内联的背景图像

SVG as background image inlined in style attribute

html

css

svg

inline