SVG in background-image

Question

Ich habe dieses SASS:

.menu-inner .item-block .item-inner{ 
    border: none; 
    background-image: url(data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%…20'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23fff'/></svg>); 
} 

Aber es funktioniert nicht, dass ich Fehler erhalte. expected a variable name (e.g. $x) or ')' for the parameter list for url

was fehlt mir?

Answer 1

SASS versucht, Ihr SVG als CSS/SASS zu interpretieren. Sie sollten Zitate um das Argument setzen. Da in der SVG-Quelle einfache Anführungszeichen stehen, verwenden Sie doppelte Anführungszeichen um das Argument herum.

.menu-inner .item-block .item-inner{ 
    border: none; 
    background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%…20'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23fff'/></svg>"); 
} 

Als Nebenwirkung, die … Zeichen in Ihrem SVG scheint fehl am Platz.