SVG图片中的CSS背景未显示渐变

时间:2019-08-02 16:01:05

标签: css svg

用作元素背景时,缺少SVG图像的渐变部分。如果CSS与HTML不在同一个文件中,并且样式已内嵌到带有渐变部分的HTML图像加载中,则Chrome(FF也会从SVG中删除渐变部分)。为什么会这样以及如何加载它?

在声明的CSS文件中:

.img-feature-best {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg width='31px' height='36px' viewBox='0 0 31 36' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg'%3e%3cdesc%3eCreated with Lunacy%3c/desc%3e%3cdefs%3e%3clinearGradient x1='1' y1='0' x2='0' y2='1' id='gradient_1'%3e%3cstop offset='0' stop-color='%23FF8278' /%3e%3cstop offset='1' stop-color='%23FFE38A' /%3e%3c/linearGradient%3e%3c/defs%3e%3cpath d='M3.46036 0L0.109737 6.61911C-0.0513606 6.93714 -0.0340615 7.31499 0.154877 7.61726C0.344357 7.91927 0.677905 8.10326 1.03767 8.10326L6.07793 8.10326L9.10203 12.0865C9.29854 12.3463 9.60695 12.4967 9.93158 12.4967C10.3627 12.4967 10.7025 12.2425 10.8603 11.93L14.0177 5.69145C9.74885 5.28824 5.98522 3.14987 3.46036 0Z' transform='translate(0 22.7533)' id='Path' fill='url(../StyleSheets/%23gradient_1)' stroke='none' /%3e%3cpath d='M13.9079 6.61911L10.5573 0C8.03246 3.14987 4.26883 5.28824 0 5.69145L3.15763 11.93C3.31521 12.2425 3.65498 12.4967 4.0861 12.4967C4.41073 12.4967 4.71941 12.3463 4.91592 12.0865L7.93975 8.10326L12.98 8.10326C13.3398 8.10326 13.6733 7.91927 13.8628 7.61726C14.0517 7.31499 14.069 6.93714 13.9079 6.61911L13.9079 6.61911Z' transform='translate(16.96484 22.7533)' id='Path' fill='url(../StyleSheets/%23gradient_1)' stroke='none' /%3e%3cpath d='M26.5347 13.1068C26.5347 5.87971 20.583 0 13.2673 0C5.9517 0 0 5.87971 0 13.1068C0 20.3337 5.9517 26.2137 13.2673 26.2137C20.583 26.2137 26.5347 20.334 26.5347 13.1068ZM14.8372 18.5983C14.8372 19.1647 14.3726 19.6237 13.7993 19.6237C13.2262 19.6237 12.7613 19.1647 12.7613 18.5983L12.7613 10.1033L11.2244 11.6326C10.8206 12.0345 10.1635 12.0369 9.7567 11.6376C9.3499 11.2387 9.34746 10.5896 9.75129 10.1877L13.0627 6.89281C13.359 6.59801 13.806 6.50883 14.1947 6.66718C14.5834 6.82552 14.8372 7.1999 14.8372 7.61513L14.8372 18.5983Z' transform='translate(2.222656 0.25)' id='Shape' fill='%23FF3E7E' stroke='none' /%3e%3c/svg%3e");
}

Chrome DevTools元素CSS显示:

.img-feature-best {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg width='31px' height='36px' viewBox='0 0 31 36' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg'%3e%3cdesc%3eCreated with Lunacy%3c/desc%3e%3cdefs%3e%3clinearGradient x1='1' y1='0' x2='0' y2='1' id='gradient_1'%3e%3cstop offset='0' stop-color='%23FF8278' /%3e%3cstop offset='1' stop-color='%23FFE38A' /%3e%3c/linearGradient%3e%3c/defs%3e%3cpath d='M3.46036 0L0.109737 6.61911C-0.0513606 6.93714 -0.0340615 7.31499 0.154877 7.61726C0.344357 7.91927 0.677905 8.10326 1.03767 8.10326L6.07793 8.10326L9.10203 12.0865C9.29854 12.3463 9.60695 12.4967 9.93158 12.4967C10.3627 12.4967 10.7025 12.2425 10.8603 11.93L14.0177 5.69145C9.74885 5.28824 5.98522 3.14987 3.46036 0Z' transform='translate(0 22.7533)' id='Shape' fill='%23FF3E7E' stroke='none' /%3e%3c/svg%3e);
}

缺少部分:

id='Path' fill='url(../StyleSheets/%23gradient_1)' stroke='none' /%3e%3cpath d='M13.9079 6.61911L10.5573 0C8.03246 3.14987 4.26883 5.28824 0 5.69145L3.15763 11.93C3.31521 12.2425 3.65498 12.4967 4.0861 12.4967C4.41073 12.4967 4.71941 12.3463 4.91592 12.0865L7.93975 8.10326L12.98 8.10326C13.3398 8.10326 13.6733 7.91927 13.8628 7.61726C14.0517 7.31499 14.069 6.93714 13.9079 6.61911L13.9079 6.61911Z' transform='translate(16.96484 22.7533)' id='Path' fill='url(../StyleSheets/%23gradient_1)' stroke='none' /%3e%3cpath d='M26.5347 13.1068C26.5347 5.87971 20.583 0 13.2673 0C5.9517 0 0 5.87971 0 13.1068C0 20.3337 5.9517 26.2137 13.2673 26.2137C20.583 26.2137 26.5347 20.334 26.5347 13.1068ZM14.8372 18.5983C14.8372 19.1647 14.3726 19.6237 13.7993 19.6237C13.2262 19.6237 12.7613 19.1647 12.7613 18.5983L12.7613 10.1033L11.2244 11.6326C10.8206 12.0345 10.1635 12.0369 9.7567 11.6376C9.3499 11.2387 9.34746 10.5896 9.75129 10.1877L13.0627 6.89281C13.359 6.59801 13.806 6.50883 14.1947 6.66718C14.5834 6.82552 14.8372 7.1999 14.8372 7.61513L14.8372 18.5983Z' transform='translate(2.222656 0.25)'

0 个答案:

没有答案