background Недопустимое значение свойства в Chrome - PullRequest
Новая
       23

background Недопустимое значение свойства в Chrome

0 голосов
/ 02 октября 2018

Я получаю фон Invalid property value в Chrome.Чего мне здесь не хватает?

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>

Так как это шаблон электронной почты, мой стиль должен быть встроен.

enter image description here

Как видите, флажок не отображается (я рисую его с помощью svg в фоновом режиме).

Здесь - это jsfiddle.

1 Ответ

0 голосов
/ 02 октября 2018

Вы можете сначала прочитать эту статью: Оптимизация SVG в URI данных .Суть в том, что всякий раз, когда вы используете SVG в качестве URI данных:

  1. Поменяйте местами двойные кавычки значений его атрибутов с одинарными кавычками.

  2. Кодировать <,>, #, любые оставшиеся "(как в текстовом содержимом), не-ASCII-символы и другие небезопасные символы URL, такие как%.

  3. Обернуть 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.

Обратите внимание, что я использую &quot; в качестве третьего типа цитат в 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>
...