スタイルの前にSVGデータを背景として追加する

Question

ベクトル要素（svg）をbefore要素の背景CSSに追加します。しかし、私はCSS内でこのパスの色を変更することもできる必要があります。

これは私が現時点で入手したものですが、私はCSSをコンパイルするためにLESSを使用していますので、コンパイル時に色が変わるはずの変数があります。

background: url(data:image/svg+xml,%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%20%20%09%3Cpath%20fill%3D%22%23@test-color%22%20d%3D%22M49.916%2C1.295C49.355%2C0.484%2C48.417%2C0%2C47.406%2C0S45.457%2C0.484%2C44.9%2C1.291c-3.095%2C4.446-30.231%2C43.93-30.231%2C60.784%0A%09%09c0%2C18.052%2C14.686%2C32.737%2C32.737%2C32.737c18.05%2C0%2C32.737-14.687%2C32.737-32.737C80.143%2C45.22%2C53.007%2C5.737%2C49.916%2C1.295z%0A%09%09%20M47.33%2C82.719c-0.402%2C2.166-2.293%2C3.68-4.42%2C3.68c-0.272%2C0-0.549-0.025-0.826-0.076c-15.646-2.902-20.04-18.395-20.178-26.18%0A%09%09c-0.044-2.484%2C1.935-4.534%2C4.42-4.578c0.026-0.001%2C0.054-0.001%2C0.081-0.001c2.443%2C0%2C4.445%2C1.954%2C4.497%2C4.405%0A%09%09c0.017%2C0.646%2C0.539%2C15.225%2C12.822%2C17.504C46.17%2C77.926%2C47.783%2C80.274%2C47.33%2C82.719z%22%2F%3E%0A%20%20%09%3C%2Fsvg%3E) no-repeat 50% 50%; 

この@test-colorは文書で定義された色に置き換えられますが、これはパスデータ内に動作しない、私はちょうど背景として、このSVGを持つ一方でCSSで塗りつぶしの色を変えることができる方法はあり画像？

希望はこれが理にかなっています。

Answer 1

これはどういう意味ですか？ @{variable-name}

@test-color: #f0f0f0; 
div { 
    background: url("data:image/svg+xml,....#@{test-color}...") no-repeat 50% 50%; 
}