Open DmitriyKurto opened 7 years ago
I use SCSS and paste SVG on page with background-image background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' x='0px' y='0px' viewBox='0 0 35.1 35.1' style='enable-background:new 0 0 35.1 35.1%3B'%3E%3Cstyle%3E.st0%7Bfill:%2333C158%3B%7D .st1%7Bfill:url(%23SVGID_1_)%3B%7D .st2%7Bopacity:0.4%3Bfill:%23FFFFFF%3Benable-background:new %3B%7D%3C/style%3E%3Cg%3E%3Ccircle cx='17.6' cy='17.6' r='16' class='st0'/%3E%3ClinearGradient id='SVGID_1_' x1='0.5522' x2='34.5522' y1='19.7015' y2='19.7015' gradientUnits='userSpaceOnUse' gradientTransform='matrix(1 0 0 -1 0 37.2537)'%3E%3Cstop offset='0' style='stop-color:%23147F45'/%3E%3Cstop offset='1' style='stop-color:%231DBB50'/%3E%3C/linearGradient%3E%3Cpath d='M17.6 34.6c-9.4 0-17-7.6-17-17s7.6-17 17-17 17 7.6 17 17-7.7 17-17 17zm0-32.1C9.2 2.5 2.5 9.2 2.5 17.6s6.8 15.1 15.1 15.1 15.1-6.8 15.1-15.1S25.9 2.5 17.6 2.5z' class='st1'/%3E%3Cellipse cx='12.5' cy='12.5' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -5.1797 12.5223)' class='st2' rx='6.8' ry='5.5'/%3E%3C/g%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' x='0px' y='0px' viewBox='0 0 35.1 35.1' style='enable-background:new 0 0 35.1 35.1%3B'%3E%3Cstyle%3E.st0%7Bfill:%2333C158%3B%7D .st1%7Bfill:url(%23SVGID_1_)%3B%7D .st2%7Bopacity:0.4%3Bfill:%23FFFFFF%3Benable-background:new %3B%7D%3C/style%3E%3Cg%3E%3Ccircle cx='17.6' cy='17.6' r='16' class='st0'/%3E%3ClinearGradient id='SVGID_1_' x1='0.5522' x2='34.5522' y1='19.7015' y2='19.7015' gradientUnits='userSpaceOnUse' gradientTransform='matrix(1 0 0 -1 0 37.2537)'%3E%3Cstop offset='0' style='stop-color:%23147F45'/%3E%3Cstop offset='1' style='stop-color:%231DBB50'/%3E%3C/linearGradient%3E%3Cpath d='M17.6 34.6c-9.4 0-17-7.6-17-17s7.6-17 17-17 17 7.6 17 17-7.7 17-17 17zm0-32.1C9.2 2.5 2.5 9.2 2.5 17.6s6.8 15.1 15.1 15.1 15.1-6.8 15.1-15.1S25.9 2.5 17.6 2.5z' class='st1'/%3E%3Cellipse cx='12.5' cy='12.5' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -5.1797 12.5223)' class='st2' rx='6.8' ry='5.5'/%3E%3C/g%3E%3C/svg%3E");
SVG text includes matrix(1 0 0 -1 0 37.2537) after runing stylefmt I get background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' x='0px' y='0px' viewBox='0 0 35.1 35.1' style='enable-background:new 0 0 35.1 35.1%3B'%3E%3Cstyle%3E.st0%7Bfill:%2333C158%3B%7D .st1%7Bfill:url(%23SVGID_1_)%3B%7D .st2%7Bopacity:0.4%3Bfill:%23FFFFFF%3Benable-background:new %3B%7D%3C/style%3E%3Cg%3E%3Ccircle cx='17.6' cy='17.6' r='16' class='st0'/%3E%3ClinearGradient id='SVGID_1_' x1='0.5522' x2='34.5522' y1='19.7015' y2='19.7015' gradientUnits='userSpaceOnUse' gradientTransform='matriX(1 0 0 -1 0 37.2537)'%3E%3Cstop offset='0' style='stop-color:%23147F45'/%3E%3Cstop offset='1' style='stop-color:%231DBB50'/%3E%3C/linearGradient%3E%3Cpath d='M17.6 34.6c-9.4 0-17-7.6-17-17s7.6-17 17-17 17 7.6 17 17-7.7 17-17 17zm0-32.1C9.2 2.5 2.5 9.2 2.5 17.6s6.8 15.1 15.1 15.1 15.1-6.8 15.1-15.1S25.9 2.5 17.6 2.5z' class='st1'/%3E%3Cellipse cx='12.5' cy='12.5' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -5.1797 12.5223)' class='st2' rx='6.8' ry='5.5'/%3E%3C/g%3E%3C/svg%3E");
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' x='0px' y='0px' viewBox='0 0 35.1 35.1' style='enable-background:new 0 0 35.1 35.1%3B'%3E%3Cstyle%3E.st0%7Bfill:%2333C158%3B%7D .st1%7Bfill:url(%23SVGID_1_)%3B%7D .st2%7Bopacity:0.4%3Bfill:%23FFFFFF%3Benable-background:new %3B%7D%3C/style%3E%3Cg%3E%3Ccircle cx='17.6' cy='17.6' r='16' class='st0'/%3E%3ClinearGradient id='SVGID_1_' x1='0.5522' x2='34.5522' y1='19.7015' y2='19.7015' gradientUnits='userSpaceOnUse' gradientTransform='matriX(1 0 0 -1 0 37.2537)'%3E%3Cstop offset='0' style='stop-color:%23147F45'/%3E%3Cstop offset='1' style='stop-color:%231DBB50'/%3E%3C/linearGradient%3E%3Cpath d='M17.6 34.6c-9.4 0-17-7.6-17-17s7.6-17 17-17 17 7.6 17 17-7.7 17-17 17zm0-32.1C9.2 2.5 2.5 9.2 2.5 17.6s6.8 15.1 15.1 15.1 15.1-6.8 15.1-15.1S25.9 2.5 17.6 2.5z' class='st1'/%3E%3Cellipse cx='12.5' cy='12.5' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -5.1797 12.5223)' class='st2' rx='6.8' ry='5.5'/%3E%3C/g%3E%3C/svg%3E");
where matrix(1 0 0 -1 0 37.2537) becomes matriX(1 0 0 -1 0 37.2537), but matrix(0.7071 -0.7071 0.7071 0.7071 -5.1797 12.5223 don't change. Uppercase X makes error when I use webpack for building prod package. Looks like font changes not always, because after formating in this SVG matrix is ok background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' x='0px' y='0px' viewBox='0 0 59.6 59.6' style='enable-background:new 0 0 59.6 59.6%3B'%3E%3Cstyle%3E.st0%7Bfill:url(%23SVGID_1_)%3B%7D .st1%7Bopacity:0.3%3Bfill:%23E5E5E5%3Benable-background:new %3B%7D .st2%7Bfill:%231DA950%3Bfill-opacity:0%3B%7D .st3%7Bopacity:0.3%3Bfill:%23FFFFFF%3Benable-background:new %3B%7D%3C/style%3E%3Cg%3E%3Cg%3E%3ClinearGradient id='SVGID_1_' x1='0.2926' x2='59.2924' y1='51.7925' y2='51.7925' gradientUnits='userSpaceOnUse' gradientTransform='matrix(1 0 0 1 0 -22)'%3E%3Cstop offset='0' style='stop-color:%23D0D0D0'/%3E%3Cstop offset='1' style='stop-color:%23EEEEEE'/%3E%3C/linearGradient%3E%3Cpath d='M59 19.9l-9.3-13c-0.3-0.4-0.7-0.6-1.1-0.6H11c-0.4 0-0.8.2-1.1.6l-9.4 13c-0.3.4-0.3 1-0.1 1.4.1.1.1.2.2.3l28.2 31.3c0.3.3.6.4 1 0.4s0.7-0.2 1-0.4L59 21.6c0.1-0.1.1-0.2.2-0.3.2-0.4.1-1-0.2-1.4zm-3.7-0.6H41.8l6.8-9.4 6.7 9.4zM37.4 22l-7.6 25.2L22.2 22h15.2zM23 19.3l6.8-9.4 6.8 9.4H23zM32.4 9h13.5l-6.8 9.4L32.4 9zm-12 9.4L13.6 9h13.5l-6.7 9.4zm-1 3.6l7.4 24.6L4.7 22h14.7zm20.8 0H55L32.8 46.6 40.2 22zM11 9.9l6.8 9.4H4.3L11 9.9z' class='st0'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M27.2 9H13.6l6.8 9.4zM45.9 9H32.4l6.8 9.4z' class='st1'/%3E%3Cpath d='M23 19.3h13.6l-6.8-9.4zM4.3 19.3h13.5L11 9.9z' class='st2'/%3E%3Cpath d='M40.2 22l-7.4 24.6L55 22z' class='st3'/%3E%3Cpath d='M41.8 19.3h13.5l-6.7-9.4z' class='st2'/%3E%3Cpath d='M37.4 22H22.2l7.6 25.3z' class='st1'/%3E%3Cpath d='M4.7 22l22.1 24.6L19.4 22z' class='st3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); How to disable stylefmt change font?
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' x='0px' y='0px' viewBox='0 0 59.6 59.6' style='enable-background:new 0 0 59.6 59.6%3B'%3E%3Cstyle%3E.st0%7Bfill:url(%23SVGID_1_)%3B%7D .st1%7Bopacity:0.3%3Bfill:%23E5E5E5%3Benable-background:new %3B%7D .st2%7Bfill:%231DA950%3Bfill-opacity:0%3B%7D .st3%7Bopacity:0.3%3Bfill:%23FFFFFF%3Benable-background:new %3B%7D%3C/style%3E%3Cg%3E%3Cg%3E%3ClinearGradient id='SVGID_1_' x1='0.2926' x2='59.2924' y1='51.7925' y2='51.7925' gradientUnits='userSpaceOnUse' gradientTransform='matrix(1 0 0 1 0 -22)'%3E%3Cstop offset='0' style='stop-color:%23D0D0D0'/%3E%3Cstop offset='1' style='stop-color:%23EEEEEE'/%3E%3C/linearGradient%3E%3Cpath d='M59 19.9l-9.3-13c-0.3-0.4-0.7-0.6-1.1-0.6H11c-0.4 0-0.8.2-1.1.6l-9.4 13c-0.3.4-0.3 1-0.1 1.4.1.1.1.2.2.3l28.2 31.3c0.3.3.6.4 1 0.4s0.7-0.2 1-0.4L59 21.6c0.1-0.1.1-0.2.2-0.3.2-0.4.1-1-0.2-1.4zm-3.7-0.6H41.8l6.8-9.4 6.7 9.4zM37.4 22l-7.6 25.2L22.2 22h15.2zM23 19.3l6.8-9.4 6.8 9.4H23zM32.4 9h13.5l-6.8 9.4L32.4 9zm-12 9.4L13.6 9h13.5l-6.7 9.4zm-1 3.6l7.4 24.6L4.7 22h14.7zm20.8 0H55L32.8 46.6 40.2 22zM11 9.9l6.8 9.4H4.3L11 9.9z' class='st0'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M27.2 9H13.6l6.8 9.4zM45.9 9H32.4l6.8 9.4z' class='st1'/%3E%3Cpath d='M23 19.3h13.6l-6.8-9.4zM4.3 19.3h13.5L11 9.9z' class='st2'/%3E%3Cpath d='M40.2 22l-7.4 24.6L55 22z' class='st3'/%3E%3Cpath d='M41.8 19.3h13.5l-6.7-9.4z' class='st2'/%3E%3Cpath d='M37.4 22H22.2l7.6 25.3z' class='st1'/%3E%3Cpath d='M4.7 22l22.1 24.6L19.4 22z' class='st3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
I use SCSS and paste SVG on page with background-image
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' x='0px' y='0px' viewBox='0 0 35.1 35.1' style='enable-background:new 0 0 35.1 35.1%3B'%3E%3Cstyle%3E.st0%7Bfill:%2333C158%3B%7D .st1%7Bfill:url(%23SVGID_1_)%3B%7D .st2%7Bopacity:0.4%3Bfill:%23FFFFFF%3Benable-background:new %3B%7D%3C/style%3E%3Cg%3E%3Ccircle cx='17.6' cy='17.6' r='16' class='st0'/%3E%3ClinearGradient id='SVGID_1_' x1='0.5522' x2='34.5522' y1='19.7015' y2='19.7015' gradientUnits='userSpaceOnUse' gradientTransform='matrix(1 0 0 -1 0 37.2537)'%3E%3Cstop offset='0' style='stop-color:%23147F45'/%3E%3Cstop offset='1' style='stop-color:%231DBB50'/%3E%3C/linearGradient%3E%3Cpath d='M17.6 34.6c-9.4 0-17-7.6-17-17s7.6-17 17-17 17 7.6 17 17-7.7 17-17 17zm0-32.1C9.2 2.5 2.5 9.2 2.5 17.6s6.8 15.1 15.1 15.1 15.1-6.8 15.1-15.1S25.9 2.5 17.6 2.5z' class='st1'/%3E%3Cellipse cx='12.5' cy='12.5' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -5.1797 12.5223)' class='st2' rx='6.8' ry='5.5'/%3E%3C/g%3E%3C/svg%3E");SVG text includes matrix(1 0 0 -1 0 37.2537) after runing stylefmt I get
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' x='0px' y='0px' viewBox='0 0 35.1 35.1' style='enable-background:new 0 0 35.1 35.1%3B'%3E%3Cstyle%3E.st0%7Bfill:%2333C158%3B%7D .st1%7Bfill:url(%23SVGID_1_)%3B%7D .st2%7Bopacity:0.4%3Bfill:%23FFFFFF%3Benable-background:new %3B%7D%3C/style%3E%3Cg%3E%3Ccircle cx='17.6' cy='17.6' r='16' class='st0'/%3E%3ClinearGradient id='SVGID_1_' x1='0.5522' x2='34.5522' y1='19.7015' y2='19.7015' gradientUnits='userSpaceOnUse' gradientTransform='matriX(1 0 0 -1 0 37.2537)'%3E%3Cstop offset='0' style='stop-color:%23147F45'/%3E%3Cstop offset='1' style='stop-color:%231DBB50'/%3E%3C/linearGradient%3E%3Cpath d='M17.6 34.6c-9.4 0-17-7.6-17-17s7.6-17 17-17 17 7.6 17 17-7.7 17-17 17zm0-32.1C9.2 2.5 2.5 9.2 2.5 17.6s6.8 15.1 15.1 15.1 15.1-6.8 15.1-15.1S25.9 2.5 17.6 2.5z' class='st1'/%3E%3Cellipse cx='12.5' cy='12.5' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -5.1797 12.5223)' class='st2' rx='6.8' ry='5.5'/%3E%3C/g%3E%3C/svg%3E");where matrix(1 0 0 -1 0 37.2537) becomes matriX(1 0 0 -1 0 37.2537), but matrix(0.7071 -0.7071 0.7071 0.7071 -5.1797 12.5223 don't change. Uppercase X makes error when I use webpack for building prod package. Looks like font changes not always, because after formating in this SVG matrix is ok
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' x='0px' y='0px' viewBox='0 0 59.6 59.6' style='enable-background:new 0 0 59.6 59.6%3B'%3E%3Cstyle%3E.st0%7Bfill:url(%23SVGID_1_)%3B%7D .st1%7Bopacity:0.3%3Bfill:%23E5E5E5%3Benable-background:new %3B%7D .st2%7Bfill:%231DA950%3Bfill-opacity:0%3B%7D .st3%7Bopacity:0.3%3Bfill:%23FFFFFF%3Benable-background:new %3B%7D%3C/style%3E%3Cg%3E%3Cg%3E%3ClinearGradient id='SVGID_1_' x1='0.2926' x2='59.2924' y1='51.7925' y2='51.7925' gradientUnits='userSpaceOnUse' gradientTransform='matrix(1 0 0 1 0 -22)'%3E%3Cstop offset='0' style='stop-color:%23D0D0D0'/%3E%3Cstop offset='1' style='stop-color:%23EEEEEE'/%3E%3C/linearGradient%3E%3Cpath d='M59 19.9l-9.3-13c-0.3-0.4-0.7-0.6-1.1-0.6H11c-0.4 0-0.8.2-1.1.6l-9.4 13c-0.3.4-0.3 1-0.1 1.4.1.1.1.2.2.3l28.2 31.3c0.3.3.6.4 1 0.4s0.7-0.2 1-0.4L59 21.6c0.1-0.1.1-0.2.2-0.3.2-0.4.1-1-0.2-1.4zm-3.7-0.6H41.8l6.8-9.4 6.7 9.4zM37.4 22l-7.6 25.2L22.2 22h15.2zM23 19.3l6.8-9.4 6.8 9.4H23zM32.4 9h13.5l-6.8 9.4L32.4 9zm-12 9.4L13.6 9h13.5l-6.7 9.4zm-1 3.6l7.4 24.6L4.7 22h14.7zm20.8 0H55L32.8 46.6 40.2 22zM11 9.9l6.8 9.4H4.3L11 9.9z' class='st0'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M27.2 9H13.6l6.8 9.4zM45.9 9H32.4l6.8 9.4z' class='st1'/%3E%3Cpath d='M23 19.3h13.6l-6.8-9.4zM4.3 19.3h13.5L11 9.9z' class='st2'/%3E%3Cpath d='M40.2 22l-7.4 24.6L55 22z' class='st3'/%3E%3Cpath d='M41.8 19.3h13.5l-6.7-9.4z' class='st2'/%3E%3Cpath d='M37.4 22H22.2l7.6 25.3z' class='st1'/%3E%3Cpath d='M4.7 22l22.1 24.6L19.4 22z' class='st3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");How to disable stylefmt change font?