如何在Chrome中使用％23而不是＃？

Question

如何在Chrome中使用%23代替#？

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年12月左右将其删除。请改用'％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

Here是一个小提琴。那么，如何将#替换为%29？

此外，我想注意到here的部分答案是错误的。

它表明了

  

在我的情况下，fill属性中的＃标签会触发消息！将＃更改为％23可解决此问题。

但这不是我上面解释的情况。

Answer 1

为什么可以使用简单的CSS轻松地使用SVG：

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

Answer 2

您使用了％29 而不是％23 。使用％23 ，它可以按预期工作。