Как я могу использовать% 23 вместо # в Chrome?

Question

Как я могу использовать %23 вместо # в Chrome?

html:

<div class="helloText">
hello text
</div>

css:

.helloText {
    background: #FF8500 url( "data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'><polygon points='0,1 1,1 1,0' style='fill:#fff;'></polygon></svg>" );
    background-repeat: no-repeat;
    background-size: 36px 36px;
    background-position: 100% 100%;

    padding: 20px;
    padding-bottom: 25px;
    margin-top: 35px;

    color: white;
    font-family: AvenirLT65Medium;
    font-size: 14pt;
}

res

В такой конфигурации все работает отлично.Единственное, но я получаю следующее предупреждение в консоли Chrome:

[Устаревание] Использование неэкранированных символов '#' в теле URI данных устарело и будет удалено в M71 примерно в декабре 2018 года.Пожалуйста, используйте "% 23" вместо этого.См. https://www.chromestatus.com/features/5656049583390720 для более подробной информации.

Хорошо, позвольте мне изменить css на:

.helloText {
        background: #FF8500 url( "data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'><polygon points='0,1 1,1 1,0' style='fill:%29fff;'></polygon></svg>" );
        background-repeat: no-repeat;
        background-size: 36px 36px;
        background-position: 100% 100%;

        padding: 20px;
        padding-bottom: 25px;
        margin-top: 35px;

        color: white;
        font-family: AvenirLT65Medium;
        font-size: 14pt;
    }

res

Здесь - скрипка.Итак, как мне заменить # на %29?

Кроме того, я хотел бы отметить, что часть ответа от здесь неверна.

Это говорит о том, что

Хэштег в атрибуте fill вызывает сообщение в моей ситуации!Изменение # на% 23 устраняет проблему.

Но это не тот случай, как я объяснил выше.

Answer 1

Вы использовали % 29 вместо % 23 .Используя % 23 , он работает как задумано.

Answer 2

Зачем использовать SVG, когда вы можете легко сделать это с помощью простого CSS:

.helloText {
  background:
   linear-gradient(to bottom right,transparent 49.8%,#fff 50%),
   #FF8500;
  background-repeat: no-repeat;
  background-size: 36px 36px;
  background-position: 100% 100%;
  padding: 20px;
  padding-bottom: 25px;
  margin-top: 35px;
  color: white;
  font-family: AvenirLT65Medium;
  font-size: 14pt;
}

<div class="helloText">
  hello text
</div>