背景Chrome中无效的属性值

Question

我在Chrome中收到背景Invalid property value 。 我在这里想念什么？

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>

由于它是电子邮件模板，因此需要内联样式。

如您所见，没有显示任何复选标记（我在后台借助svg进行绘制）。

这是jsfiddle。

Answer 1

您可能需要首先阅读本文：在数据URI中优化SVG 。 本质是：每当将SVG用作数据URI时：

将其属性值的双引号替换为单引号。
编码<，>，＃，其余的所有“”（例如文本内容），非ASCII字符以及其他URL不安全字符，例如％。
使用URI时，请用双引号将URI：url（“”）括起来。

希望对您有所帮助。

 .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>

更新：这是内联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