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作为背景图像插入样式属性中

2 个答案: