-2

我正在用 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 代码有问题，有人知道如何正确导出它吗？

提前致谢

4

1 回答 1

0

弄清楚了。

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

于 2021-02-26T20:03:42.203 回答