背景Chrome中无效的属性值

Question

I am getting background Invalid property value in Chrome. 我在Chrome中收到背景Invalid property value 。 What am I missing here? 我在这里想念什么？

html: HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Email template</title>

</head>
<body style="margin-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0;">
<div class="t3 sMargin" style="margin-top: 20px; background-color: #dedede; padding-left: 40px; padding-right: 40px; padding-top: 20px; padding-bottom: 20px;">

    <div class="t31" style="color: #5222a8; font-weight: bold; font-size: 20px;">
        Lorem ipsum
    </div>

    <div class="t32" style="background: url( 'data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 20 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'><path fill='none' stroke='#be1196' stroke-width='4' d='M4 10 l5 11 l8 -20'/></svg>'); background-repeat: no-repeat, no-repeat; background-position: 0 0; background-size: 32px 20px; margin-top: 20px; padding-left: 35px; color: #4a4a4a; font-size: 20px;">
        Lorem ipsum
    </div>

    <div class="t32" style="background: url( 'data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 20 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'><path fill='none' stroke='#be1196' stroke-width='4' d='M4 10 l5 11 l8 -20'/></svg>'); background-repeat: no-repeat, no-repeat; background-position: 0 0; background-size: 32px 20px; margin-top: 20px; padding-left: 35px; color: #4a4a4a; font-size: 20px;">
        Lorem ipsum
    </div>

    <div class="t32" style="background: url( 'data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 20 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'><path fill='none' stroke='#be1196' stroke-width='4' d='M4 10 l5 11 l8 -20'/></svg>'); background-repeat: no-repeat, no-repeat; background-position: 0 0; background-size: 32px 20px; margin-top: 20px; padding-left: 35px; color: #4a4a4a; font-size: 20px;">
        Lorem ipsum
    </div>
</div>
</body>

</html>

Since it is an email template I need my styling to be inlined. 由于它是电子邮件模板，因此需要内联样式。

As you can see no check mark is displayed (I am drawing it with the help of svg in background). 如您所见，没有显示任何复选标记（我在后台借助svg进行绘制）。

Here is the jsfiddle. 这是jsfiddle。

Answer 1

You may want to read first this article: Optimizing SVGs in data URIs . 您可能需要首先阅读本文：在数据URI中优化SVG 。 The essence is: whenever you're using an SVG as a data URI: 本质是：每当将SVG用作数据URI时：

Swap its attribute values' double quotes with single quotes. 将其属性值的双引号替换为单引号。
Encode <, >, #, any remaining " (like in textual content), non-ASCII characters, and other URL-unsafe characters, like %. 编码<，>，＃，其余的所有“”（例如文本内容），非ASCII字符以及其他URL不安全字符，例如％。
Wrap the URI with double quotes when using it: , url(""). 使用URI时，请用双引号将URI：url（“”）括起来。

I hope it helps. 希望对您有所帮助。

 .t32{background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 20 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23be1196' stroke-width='4' d='M4 10 l5 11 l8 -20'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat; background-position: 0 0; background-size: 32px 20px; margin-top: 20px; padding-left: 35px; color: #4a4a4a; font-size: 20px;}

 <div class="t3 sMargin" style="margin-top: 20px; background-color: #dedede; padding-left: 40px; padding-right: 40px; padding-top: 20px; padding-bottom: 20px;"> <div class="t31" style="color: #5222a8; font-weight: bold; font-size: 20px;"> Lorem ipsum </div> <div class="t32"> Lorem ipsum </div> <div class="t32"> Lorem ipsum </div> <div class="t32"> Lorem ipsum </div> </div>

UPDATE: this time an example with inline CSS. 更新：这是内联CSS的示例。

Please note that I'm using " 请注意，我使用的是" as a third type of quotes in CSS 作为CSS中的第三种引号

 <div class="t3 sMargin" style="margin-top: 20px; background-color: #dedede; padding-left: 40px; padding-right: 40px; padding-top: 20px; padding-bottom: 20px;"> <div class="t31" style="color: #5222a8; font-weight: bold; font-size: 20px;"> Lorem ipsum </div> <div class="t32" style="background-image: url(&quot;data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 20 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23be1196' stroke-width='4' d='M4 10 l5 11 l8 -20'/%3E%3C/svg%3E&quot;);background-repeat: no-repeat, no-repeat; background-position: 0 0; background-size: 32px 20px; margin-top: 20px; padding-left: 35px; color: #4a4a4a; font-size: 20px;"> Lorem ipsum </div> </div>

背景Chrome中无效的属性值

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-10-02 15:13:15

背景Chrome中无效的属性值

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-10-02 15:13:15

解决方案1
1 已采纳 2018-10-02 15:13:15