Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

.encoded-svg-background(@svg)与px2rem问题 #1140

Closed
qingxiao opened this issue Apr 12, 2017 · 1 comment
Closed

.encoded-svg-background(@svg)与px2rem问题 #1140

qingxiao opened this issue Apr 12, 2017 · 1 comment
Assignees

Comments

@qingxiao
Copy link

mixins.less中有如下代码:

.encoded-svg-background(@svg) when (@svg = 'image_picker_delete') {
  @svg-bg-img: "<svg width='16' height='16' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><circle id='Oval-98' fill-opacity='0.4' fill='#404040' cx='8' cy='8' r='8'></circle><path d='M11.8979743,11.8990375 L11.8979743,11.8990375 C11.7633757,12.0336542 11.5447877,12.0336542 11.4101891,11.8990375 L8,8.48838931 L4.5887341,11.8990375 C4.45413554,12.0336542 4.23554748,12.0336542 4.10094892,11.8990375 L4.10094892,11.8990375 C3.96635036,11.7644208 3.96635036,11.5458033 4.10094892,11.4111866 L7.51221482,8.00053847 L4.10202571,4.58881335 C3.96742715,4.45419667 3.96742715,4.23557919 4.10202571,4.10096251 L4.10202571,4.10096251 C4.23662427,3.96634583 4.45521233,3.96634583 4.58981089,4.10096251 L8,7.51268762 L11.4112659,4.10203944 C11.5458645,3.96742276 11.7644525,3.96742276 11.8990511,4.10203944 L11.8990511,4.10203944 C12.0336496,4.23665612 12.0336496,4.45527361 11.8990511,4.58989029 L8.48778518,8.00053847 L11.8979743,11.4122636 C12.0325729,11.5468803 12.0325729,11.7644208 11.8979743,11.8990375 L11.8979743,11.8990375 Z' id='Shape' fill='#FFFFFF' transform='translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000) '></path></g></svg>";
  .encoded-svg-background-i(@svg-bg-img);
}
.encoded-svg-background(@svg) when (@svg = 'input_item_delete') {
  @svg-bg-img: "<svg fill='#fff' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>";
  .encoded-svg-background-i(@svg-bg-img);
}
.encoded-svg-background(@svg) when (@svg = 'modal_delete') {
  @svg-bg-img: "<svg width='30px' height='30px' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'> <defs></defs> <g id='ALL-ICON' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'> <g id='Rectangle-283-+-Rectangle-283' fill='#888888'> <rect id='Rectangle-283' transform='translate(14.849242, 14.849242) rotate(-315.000000) translate(-14.849242, -14.849242) ' x='-5.1507576' y='13.8492424' width='40' height='2'></rect> <rect id='Rectangle-283' transform='translate(14.849242, 14.849242) scale(-1, 1) rotate(-315.000000) translate(-14.849242, -14.849242) ' x='-5.1507576' y='13.8492424' width='40' height='2'></rect> </g> </g> </svg>";
  .encoded-svg-background-i(@svg-bg-img);

部分svg高宽有单位px,部分没有,经过encoded-svg-background()后会转换成

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216px%22%20height%3D%2226px%22%20viewBox%3D%220%200%2016%2026%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20id%3D%22UI-KIT_%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%229.9%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20transform%3D%22translate(-5809.000000%2C%20-8482.000000)%22%20fill%3D%22%23C7C7CC%22%3E%3Cpolygon%20id%3D%22Disclosure-Indicator%22%20points%3D%225811%208482%205809%208484%205820.5%208495%205809%208506%205811%208508%205825%208495%22%3E%3C%2Fpolygon%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");

其中%2221px会被 px2rem模块处理,但是实际上应该是"21px

求解,为什么有的有px 有的没有px单位,是否需要直接修改px2rem模块来解决

@paranoidjk
Copy link
Contributor

@pingan1927 icon 是不是不要缩放?所以可以把 px 都去掉?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants