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

替换stroke为currentColor导致svg变形 #74

Open
zhen-one opened this issue Sep 6, 2022 · 6 comments
Open

替换stroke为currentColor导致svg变形 #74

zhen-one opened this issue Sep 6, 2022 · 6 comments

Comments

@zhen-one
Copy link

zhen-one commented Sep 6, 2022

svg如下

image

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>icon_schedule</title>
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.55">
        <g id="主数据配置-1姓名-默认" transform="translate(-52.000000, -784.000000)" fill-rule="nonzero">
            <g id="ADD、" transform="translate(20.000000, 156.000000)">
                <g id="字段备份-8" transform="translate(32.000000, 628.000000)">
                    <g id="编组-16" transform="translate(4.000000, 6.000000)">
                        <line x1="1" y1="12.5" x2="16" y2="12.5" id="直线" stroke="#000000" stroke-linecap="round"></line>
                        <g id="123" fill="#000000">
                            <polygon id="路径" points="2.51872399 8.83969466 1.65325936 8.83969466 1.65325936 1.20229008 0 2.10687023 0 1.16793893 1.87517337 0.160305344 2.51872399 0.160305344"></polygon>
                            <path d="M5.53675451,8.01526718 L9.46463245,8.01526718 L9.46463245,8.83969466 L4.38280166,8.83969466 L4.38280166,8.09541985 L6.95700416,5.0610687 C7.48220065,4.42748092 7.85760518,3.90458015 8.08321775,3.49236641 C8.30883033,3.08015267 8.42163662,2.69465649 8.42163662,2.33587786 C8.42163662,1.8778626 8.27924179,1.50954198 7.99445215,1.23091603 C7.70966251,0.952290076 7.33425798,0.812977099 6.86823856,0.812977099 C6.48358761,0.812977099 6.13777161,0.929389313 5.83079057,1.16221374 C5.52380952,1.39503817 5.27415626,1.73664122 5.08183079,2.1870229 L4.34951456,1.80916031 C4.57142857,1.22900763 4.90060102,0.782442748 5.3370319,0.469465649 C5.77346278,0.15648855 6.29126214,0 6.89042996,0 C7.36384651,0 7.78363384,0.0935114504 8.14979196,0.280534351 C8.51595007,0.467557252 8.80073971,0.734732824 9.00416089,1.08206107 C9.20758206,1.42938931 9.30929265,1.83206107 9.30929265,2.29007634 C9.30929265,2.73282443 9.18539066,3.20610687 8.93758669,3.70992366 C8.68978271,4.21374046 8.28478964,4.79770992 7.72260749,5.46183206 L5.53675451,8.01526718 Z" id="路径"></path>
                            <path d="M13.0818308,3.76717557 C13.2223763,3.73664122 13.3814147,3.72137405 13.5589459,3.72137405 C13.9731854,3.72137405 14.3670828,3.82061069 14.740638,4.01908397 C15.1141933,4.21755725 15.4174757,4.51145038 15.6504854,4.90076336 C15.8834951,5.29007634 16,5.75954198 16,6.30916031 C16,6.85114504 15.889043,7.32442748 15.667129,7.72900763 C15.445215,8.13358779 15.1308368,8.44656489 14.7239945,8.66793893 C14.3171521,8.88931298 13.8511327,9 13.3259362,9 C12.7267684,9 12.1886269,8.83396947 11.7115118,8.5019084 C11.2343967,8.16984733 10.8848821,7.70992366 10.6629681,7.1221374 L11.4507628,6.82442748 C11.8132224,7.72519084 12.4493759,8.17557252 13.3592233,8.17557252 C13.8844198,8.17557252 14.3079057,8.00572519 14.629681,7.66603053 C14.9514563,7.32633588 15.112344,6.8740458 15.112344,6.30916031 C15.112344,5.74427481 14.9477577,5.29198473 14.6185853,4.95229008 C14.2894129,4.61259542 13.8511327,4.44274809 13.3037448,4.44274809 C12.9560795,4.44274809 12.6269071,4.53435115 12.3162275,4.71755725 L11.8391123,4.04198473 L14.4133148,0.973282443 L10.8737864,0.973282443 L10.8737864,0.160305344 L15.5450763,0.160305344 L15.5450763,0.904580153 L13.0596394,3.72137405 L13.0818308,3.76717557 Z" id="路径"></path>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

使用插件引入会加粗
image

查看引入svg文件发现是由于stroker currentColor

 content = content.replace(/stroke="[a-zA-Z#0-9]*"/, 'stroke="currentColor"')

某些情况下 我不需要改变svg的颜色!

@vimcaw
Copy link

vimcaw commented Sep 22, 2022

已经有相关 PR 了:#68
不过貌似此库欠缺维护了,上一次更新还是一月份,而且 PR 也没人处理。

@zhen-one
Copy link
Author

已经有相关 PR 了:#68 不过貌似此库欠缺维护了,上一次更新还是一月份,而且 PR 也没人处理。

感谢!看来不能使用了

@tangxiangmin
Copy link

可以临时处理一下,把vite-plugin-svg-icons/dist/index.js下面的

content = content.replace(/stroke="[a-zA-Z#0-9]*"/, 'stroke="currentColor"');

这行代码注释掉,然后npx patch-package vite-plugin-svg-icons 打个补丁,希望能把上面的PR合并了,然后更新一下npm上面的版本

@zhen-one
Copy link
Author

可以临时处理一下,把vite-plugin-svg-icons/dist/index.js下面的

content = content.replace(/stroke="[a-zA-Z#0-9]*"/, 'stroke="currentColor"');

这行代码注释掉,然后npx patch-package vite-plugin-svg-icons 打个补丁,希望能把上面的PR合并了,然后更新一下npm上面的版本

学到了 谢谢😘

@Fuphoenixes
Copy link

降级到v1.0.1版本就没这个问题了

@digitalacorn
Copy link

I have published a forked version which supports disabling the replacement of the stroke colour.
https://www.npmjs.com/package/@digitalacorn/vite-plugin-svg-icons

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

No branches or pull requests

5 participants