背景Chrome中的属性值无效
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了背景Chrome中的属性值无效相关的知识,希望对你有一定的参考价值。
我在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绘制它)。
Here是jsfiddle。
答案
您可能需要先阅读本文:Optimizing SVGs in data URIs。本质是:每当您使用SVG作为数据URI时:
- 用单引号交换其属性值的双引号。
- 编码<,>,#,任何剩余的“(如文本内容),非ASCII字符和其他URL不安全的字符,如%。
- 使用时用双引号包装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>
以上是关于背景Chrome中的属性值无效的主要内容,如果未能解决你的问题,请参考以下文章