Error：“property missing ':'” when I use background and svg together

[blankPen]

Expected Behavior

no Error, parse success

Actual Behavior

An error exception has occurred

Error: undefined:1:1675: property missing ':'
at m (index.js:103:15)
at A (index.js:208:37)
at index.js:239:20
at c (index.js:250:10)
at l (index.js:21:22)
at ?editor_console=true:126:16

Steps to Reproduce

window.StyleToObject(`display: block; width: 100px; background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3E9.%E5%85%83%E7%B4%A0/%E5%8A%A0%E8%BD%BD/Black%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='%E9%A1%B5%E9%9D%A2-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg id='LoadingDefault'%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' id='%E8%B7%AF%E5%BE%84' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' id='%E8%B7%AF%E5%BE%84' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3CanimateTransform attributeName='transform' begin='0s' dur='1s' type='rotate' values='0 40 40;360 40 40' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E%0A") 50% 50% / 16px no-repeat scroll padding-box border-box rgb(32, 32, 32); height: 100px;`)

Reference demo

Reproducible Demo

https://jsfiddle.net/t6bkepf9/10/

Environment

• Version: 0.4.1
• Platform: web
• Browser: chrome
• OS: mac os

Keywords

[remarkablemark]

@blankPen the background property in your CSS style is invalid. See JSFiddle where it parses successfully when background is removed.

[blankPen]

In fact, thebackground property is not invalid， its value is a correct value；
You can check out the demo https://jsfiddle.net/t6bkepf9/10/, which shows a loading animation;