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

VS 代码不是从 illustrator 读取 SVG 文件代码,而是从 Figma 读取?

如何解决VS 代码不是从 illustrator 读取 SVG 文件代码,而是从 Figma 读取?

我正在用 VS 代码构建一个 React 网站。

我从 figma 获得了一个 SVG,我将代码复制并粘贴到我的组件中,效果很好,这是 figma svg 代码

`<svg width="1440" height="363" viewBox="0 0 1440 363" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1440 27.4774C1352.73 19.8184 1122.41 49.0556 899.331 227.276C620.48 450.052 354.282 355.647 170.328 185.318C23.165 49.0556 -4.21721 8.32998 0.487081 5" stroke="#D96ED4" strokeOpacity="0.1" strokeWidth="10"/>
</svg>`

但是后来我从 Adob​​e Illustrator 导出了一个类似的 SVG 并且它根本不起作用,这是 Illustrator 代码

`<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="269.3px" height="70.3px" viewBox="0 0 269.3 70.3" style="enable-background:new 0 0 269.3 70.3;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#E900DB;stroke-width:3;stroke-miterlimit:10;}
</style>
<path class="st0" d="M3.5,17.8c33.8,21.8,106.2,84.9,158.8,19.1s92.3-13,103.5-19.1"/>
</svg>`

我尝试将选择导出为 SVG 并抓取在 illustrator 中将其保存为 SVG 后弹出的代码,我得到了相同的代码

如果我用浏览器打开 svg,它工作得很好。

我使用的是 Illustrator 2021,我没有 figma 或者我只是使用它,很明显 Adob​​e 代码有问题,有人知道如何正确导出吗?

提前致谢

解决方法

想通了。

当像我一样尝试将 SVG 导入 JSX 时,一旦图像在 Illustrator 中准备就绪,单击文件 -> 导出 -> 导出为 -> 在“另存为类型”下拉列表中选择 svg -> 然后导出一个新的弹出窗口将出现在样式中选择演示属性而不是内部 css -> 单击显示代码,嘿,您的代码将出现供您复制并粘贴到您的项目中 -> 然后不要像我一样浪费 6 个小时的生命有。

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