css - Sass DataURIs 未闭合的引号

Question

Sass 一直给我未闭合的引号错误:

ExecJS::ProgramError - /application.css.scss:10760:41102: Unclosed quote
11:47:13 web.1         |   background-position: right center;
11:47:13 web.1         |   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32" data-icon="check" data-container-transform="translate(0 2)" viewBox="0 0 32 32"> <path fill="#308A28" d="M27.375.25l-2.063 2.188-14.375 15.25-4.313-4.313-2.125-2.125-4.25 4.25 2.125 2.125 6.5 6.5 2.188 2.188 2.125-2.25 16.5-17.5 2.063-2.188-4.375-4.125z" transform="translate(0 2)" /> </svg>');

我看不到这是未关闭的地方？

button {
    padding-right: 2em;
    background-repeat: no-repeat;
    background-position: right center;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32" data-icon="check" data-container-transform="translate(0 2)" viewBox="0 0 32 32"> <path fill="#308A28" d="M27.375.25l-2.063 2.188-14.375 15.25-4.313-4.313-2.125-2.125-4.25 4.25 2.125 2.125 6.5 6.5 2.188 2.188 2.125-2.25 16.5-17.5 2.063-2.188-4.375-4.125z" transform="translate(0 2)" /> </svg>');

出于某种原因，它会呈现，但无法识别填充属性，如果我在填充值周围放置转义引号:

background-image: url('data:image/svg+xml;utf8,'+'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" data-icon="check" data-container-transform="translate(0 2)" viewBox="0 0 32 32">'+'<path fill="\'#308A28\'" d="M27.375.25l-2.063 2.188-14.375 15.25-4.313-4.313-2.125-2.125-4.25 4.25 2.125 2.125 6.5 6.5 2.188 2.188 2.125-2.25 16.5-17.5 2.063-2.188-4.375-4.125z" transform="translate(0 2)" />'+'</svg>');

Answer 1

一个临时修复方法是将两个转义的 ' 作为值放入一个组成的属性 foo 中:

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" data-icon="check" data-container-transform="translate(0 2)" viewBox="0 0 32 32"><path fill="#308A28" foo="\'\'" d="M27.375.25l-2.063 2.188-14.375 15.25-4.313-4.313-2.125-2.125-4.25 4.25 2.125 2.125 6.5 6.5 2.188 2.188 2.125-2.25 16.5-17.5 2.063-2.188-4.375-4.125z" transform="translate(0 2)" /></svg>'); 

但这是完全无效的 svg，而且很奇怪。