微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

为什么在 Illustrator 中重新保存 SVG 时路径代码会发生变化

如何解决为什么在 Illustrator 中重新保存 SVG 时路径代码会发生变化

嗨,所以我在这方面没有太多经验,所以我有点困惑为什么在 illustrator 中重新保存 SVG xml 代码后会发生变化?路径是否更改为花药类型?

这是SVG路径在notepad++中的原始形式

<svg width="82" height="79" viewBox="0 0 82 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M69.8096 42.6079C74.6204 40.529 82.5999 32.8914 80.7182 28.5365C78.8363 24.1817 67.8057 24.7589 62.9949 26.8378C58.1841 28.9167 55.8098 34.1321 57.6916 38.487C59.5734 42.8418 64.9988 44.6868 69.8096 42.6079Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M18.262 77.0413C13.9762 77.0413 11.3323 72.3624 13.5434 68.6911L22.1862 54.3413H31.1007L23.3735 73.5855C22.5352 75.6732 20.5117 77.0413 18.262 77.0413Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M30.6561 77.0408C26.506 77.0408 23.6702 72.8464 25.2166 68.9952L31.1008 54.3408H40.0154L36.4032 72.333C35.8535 75.071 33.4486 77.0408 30.6561 77.0408Z" fill="#8CCDE9"/>
<path d="M30.6561 77.0408C26.506 77.0408 23.6702 72.8464 25.2166 68.9952L31.1008 54.3408H40.0154L36.4032 72.333C35.8535 75.071 33.4486 77.0408 30.6561 77.0408Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M42.8632 77.0408C39.0333 77.0408 36.1615 73.5353 36.9154 69.7803L40.0151 54.3408H48.9297V70.9744C48.9297 74.3249 46.2137 77.0408 42.8632 77.0408Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M36.7022 7.27252L36.7021 7.2725C35.541 6.44538 34.1189 6.13104 32.6829 6.39418C31.5026 6.61168 30.3708 5.82862 30.1544 4.65001L30.1543 4.64978C29.938 3.47011 30.7189 2.33811 31.8989 2.12176L31.8989 2.12175C34.4879 1.64722 37.0936 2.21797 39.2224 3.73449C41.3293 5.23543 42.7629 7.53373 43.1473 10.0543C43.3282 11.2401 42.5135 12.3474 41.3286 12.5286C41.2173 12.5458 41.1071 12.5538 40.9989 12.5538C39.9432 12.5538 39.0174 11.7851 38.8533 10.7093L36.7022 7.27252ZM36.7022 7.27252C37.8684 8.10321 38.6478 9.36211 38.8533 10.7092L36.7022 7.27252Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M67.0963 39.3012C67.0963 22.2743 55.4126 8.47119 41.0001 8.47119C26.5876 8.47119 14.9038 22.2743 14.9038 39.3012C14.9038 56.3281 26.5876 61.8259 41.0001 61.8259C55.4126 61.8259 67.0963 56.3281 67.0963 39.3012Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M34.1577 36.4794C36.7419 36.4794 38.8368 34.8111 38.8368 32.7531C38.8368 30.6952 36.7419 29.0269 34.1577 29.0269C31.5735 29.0269 29.4786 30.6952 29.4786 32.7531C29.4786 34.8111 31.5735 36.4794 34.1577 36.4794Z" fill="#FFA6BB"/>
<path d="M59.5204 36.4794C62.1045 36.4794 64.1994 34.8111 64.1994 32.7531C64.1994 30.6952 62.1045 29.0269 59.5204 29.0269C56.9362 29.0269 54.8413 30.6952 54.8413 32.7531C54.8413 34.8111 56.9362 36.4794 59.5204 36.4794Z" fill="#FFA6BB"/>
<path d="M46.1742 25.9936L43.1262 29.6736C42.6048 30.3031 42.6801 31.2334 43.2959 31.7709L45.8273 33.9801C46.4073 34.4862 47.2718 34.4862 47.8518 33.9801L50.3832 31.7709C50.999 31.2334 51.0743 30.3031 50.5529 29.6736L47.505 25.9936C47.1595 25.5764 46.5196 25.5764 46.1742 25.9936Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M39.1124 29.8698C38.4652 29.8698 37.9405 29.3452 37.9405 28.6979C37.9405 28.1159 37.4671 27.6426 36.8852 27.6426C36.3034 27.6426 35.8301 28.1159 35.8301 28.6979C35.8301 29.3452 35.3054 29.8698 34.6582 29.8698C34.011 29.8698 33.4863 29.3452 33.4863 28.6979C33.4863 26.8237 35.011 25.2988 36.8852 25.2988C38.7595 25.2988 40.2843 26.8237 40.2843 28.6979C40.2843 29.3451 39.7598 29.8698 39.1124 29.8698Z" fill="black"/>
<path d="M59.021 29.8698C58.3736 29.8698 57.8491 29.3452 57.8491 28.6979C57.8491 28.1159 57.3757 27.6426 56.7938 27.6426C56.2119 27.6426 55.7385 28.1159 55.7385 28.6979C55.7385 29.3452 55.2139 29.8698 54.5666 29.8698C53.9192 29.8698 53.3947 29.3452 53.3947 28.6979C53.3947 26.8237 54.9196 25.2988 56.7938 25.2988C58.668 25.2988 60.1928 26.8237 60.1928 28.6979C60.1928 29.3451 59.6683 29.8698 59.021 29.8698Z" fill="black"/>
<path d="M38.3904 66.1445C36.7035 66.1445 35.3362 64.7771 35.3362 63.0903V59.7134C35.3362 58.0265 36.7035 56.6592 38.3904 56.6592C40.0773 56.6592 41.4446 58.0265 41.4446 59.7134V63.0903C41.4446 64.7771 40.0773 66.1445 38.3904 66.1445Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M54.2496 66.1445C55.9365 66.1445 57.3038 64.7771 57.3038 63.0903V59.7134C57.3038 58.0265 55.9365 56.6592 54.2496 56.6592C52.5627 56.6592 51.1954 58.0265 51.1954 59.7134V63.0903C51.1954 64.7771 52.5627 66.1445 54.2496 66.1445Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M12.1904 42.6079C7.37966 40.529 -0.599872 32.8914 1.28185 28.5365C3.16372 24.1817 14.1943 24.7589 19.0051 26.8378C23.8159 28.9167 26.1903 34.1321 24.3084 38.487C22.4267 42.8418 17.0012 44.6868 12.1904 42.6079Z" fill="white" stroke="#222222" stroke-width="2"/>
</svg>

这是在我将其重新保存在 Illustrator 中而不更改任何内容之后

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0,SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-308 411 82 79"
     style="enable-background:new -308 411 82 79;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;stroke:#222222;stroke-width:2;}
    .st1{fill:#8CCDE9;}
    .st2{fill:#FFA6BB;}
</style>
<Metadata>
    <sfw  xmlns="&ns_sfw;">
        <slices></slices>
        <sliceSourceBounds  width="82" height="77.1" bottomLeftOrigin="true" x="0" y="1"></sliceSourceBounds>
    </sfw>
</Metadata>
<path class="st0" d="M-238.2,453.6c4.8-2.1,12.8-9.7,10.9-14.1c-1.9-4.4-12.9-3.8-17.7-1.7c-4.8,2.1-7.2,7.3-5.3,11.6
    C-248.4,453.8-243,455.7-238.2,453.6z"/>
<path class="st0" d="M-289.7,488c-4.3,0-6.9-4.7-4.7-8.4l8.6-14.3h8.9l-7.7,19.2C-285.5,486.7-287.5,488-289.7,488z"/>
<path class="st1" d="M-277.3,488c-4.2,0-7-4.2-5.4-8l5.9-14.7h8.9l-3.6,18C-272.1,486.1-274.6,488-277.3,488z"/>
<path class="st0" d="M-277.3,488z"/>
<path class="st0" d="M-265.1,488c-3.8,0-6.7-3.5-5.9-7.3l3.1-15.4h8.9V482C-259.1,485.3-261.8,488-265.1,488z"/>
<path class="st0" d="M-271.3,418.3L-271.3,418.3c-1.2-0.8-2.6-1.1-4-0.9c-1.2,0.2-2.3-0.6-2.5-1.7l0,0c-0.2-1.2,0.6-2.3,1.7-2.5l0,0
    c2.6-0.5,5.2,0.1,7.3,1.6c2.1,1.5,3.5,3.8,3.9,6.3c0.2,1.2-0.6,2.3-1.8,2.5c-0.1,0-0.2,0-0.3,0c-1.1,0-2-0.8-2.1-1.8L-271.3,418.3z
     M-271.3,418.3c1.2,0.8,1.9,2.1,2.2,3.4L-271.3,418.3z"/>
<path class="st0" d="M-240.9,450.3c0-17-11.7-30.8-26.1-30.8s-26.1,13.8-26.1,30.8c0,17,11.7,22.5,26.1,22.5
    S-240.9,467.3-240.9,450.3z"/>
<path class="st2" d="M-273.8,447.5c2.6,4.7-1.7,4.7-3.7c0-2.1-2.1-3.7-4.7-3.7c-2.6,0-4.7,1.7-4.7,3.7
    C-278.5,445.8-276.4,447.5-273.8,447.5z"/>
<path class="st2" d="M-248.5,3.7
    C-253.2,445.8-251.1,447.5-248.5,447.5z"/>
<path class="st0" d="M-261.8,437l-3,3.7c-0.5,0.6-0.4,1.6,0.2,2.1l2.5,2.2c0.6,0.5,1.4,2,0l2.5-2.2c0.6-0.5,0.7-1.5,0.2-2.1
    l-3-3.7C-260.8,436.6-261.5,436.6-261.8,437z"/>
<path d="M-268.9,440.9c-0.6,0-1.2-0.5-1.2-1.2c0-0.6-0.5-1.1-1.1-1.1c-0.6,0-1.1,0.5-1.1,1.1c0,0.6-0.5,1.2-1.2,1.2
    c-0.6,0-1.2-0.5-1.2-1.2c0-1.9,1.5-3.4,3.4-3.4c1.9,3.4,3.4C-267.7,440.3-268.2,440.9-268.9,440.9z"/>
<path d="M-249,3.4C-247.8,440.3-248.3,440.9-249,440.9z"/>
<path class="st0" d="M-269.6,477.1c-1.7,0-3.1-1.4-3.1-3.1v-3.4c0-1.7,1.4-3.1,3.1-3.1c1.7,3.1,3.1v3.4
    C-266.6,475.8-267.9,477.1-269.6,477.1z"/>
<path class="st0" d="M-253.8,477.1c1.7,3.1-1.4,3.1-3.1v-3.4c0-1.7-1.4-3.1-3.1-3.1c-1.7,0-3.1,3.1v3.4
    C-256.8,475.8-255.4,477.1-253.8,477.1z"/>
<path class="st0" d="M-295.8,453.6c-4.8-2.1-12.8-9.7-10.9-14.1c1.9-4.4,12.9-3.8,17.7-1.7s7.2,5.3,11.6
    C-285.6,453.8-291,455.7-295.8,453.6z"/>
</svg>

谢谢

解决方法

您是否在导入和保存之间移动了图像? viewBox X 和 Y 已更改,路径坐标已调整以匹配。

之前:viewBox="0 0 82 79"
之后:viewBox="-308 411 82 79"

,

好吧,我终于得到了答案,首先我在 Windows 中打开了 svg 代码,然后在 mac 中打开了相同的 svg 但代码不一样,所以在我的 mac 插图画家中,我输入了样式:内部 css 和十进制: 5 之后,我将路径转换为绝对路径并解决了问题。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。