前端之家

  1. 首页
  2. 问答

从 Ilustrator 导入 SVG 不会产生干净的线条

• 问答

我用 SVG 插画师制作了 html 动画。但是制作完成后，笔划在某些部分变得自动。*（我只展示了文档本身的一小部分）*谢谢

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=0.5">
        <title>Document</title>
    </head>
    <body>
    
    <style type="text/css">
    
    #sobreU{fill: rgb(182,236,222);
       stroke:#119094;
       stroke-width:1px;
       stroke-dashoffset:497.458 ;
       stroke-dasharray: 497.458;
       animation: line 2s ease-in-out forwards; 
    }
    
    @keyframes line{
       100%{
           stroke-dashoffset: 0;
       }
       0%{
       }
    }
    </style>
    
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="310px" height="200px"
    viewBox="120 120 1024 549" style="enable-background:new 0 0 1024 549;" xml:space="preserve 3d">
    
    <path id="sobreU"
            d="M683.1,186c14.1,7.5,21.9,17.4,28s-7.8,20.5-21.9,28c-14.6,7.7-33.7,11.4-52.9,11.4c-19.1,0-38.3-3.8-52.9-11.5c-14.4-7.6-22.2-17.7-22-28.5l28,0.2c-0.1,6.9,4.7,13.2,13.6,17.9c9.1,4.8,21.1,7.2,33.1,7.2
            s24-2.4,33.2-7.2c8.8-4.7,13.7-10.8,13.7-17.4c0-6.6-4.9-12.7-13.7-17.4c-8.8-4.6-20.8-7.2-33.2-7.2c-0.8,0-1.6,0-2.4,0l-0.1-14.9
            c1,1.9,2.8,0C650.3,174.5,668.9,178.5,683.1,186z"/>
    </path>
    
    </body>
    </html>

long0103 回答：从 Ilustrator 导入 SVG 不会产生干净的线条

我认为，如果您要制作动画 svg，它将用于网络用途。不是吗？

如果是这种情况，我建议避免使用从 Illustrator 或 Coreldraw 导出的 svg，因为两者都会用稀有且不清晰的代码过度填充 svg 代码。我的建议是改用 Inkscape，因为它是原生 svg 编辑器。无论 Inkscape 是否还添加了一些与软件布局相关的代码，通过在文本编辑器中打开 svg 并删除所有额外代码或使用像 SVGO 这样的库（也有一个免费的网络应用程序来完成），可以很容易地清理它.请参阅此处的工具 SVGOMG

我将提供同一个 svg 的两个代码版本，以便您理解我在说什么。

这就是 Inkscape 保存 svg 的方式：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="448.12128"
height="2239.0315"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="animated.svg">
<metadata
id="metadata14">
 <rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
 </rdf:RDF>
</metadata>
<defs
id="defs12" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="702"
id="namedview10"
showgrid="false"
fit-margin-top="10"
fit-margin-left="10"
fit-margin-right="10"
fit-margin-bottom="10"
inkscape:zoom="0.061636364"
inkscape:cx="-3732.3292"
inkscape:cy="2149.3007"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<path
style="fill:#0029b4;fill-opacity:1"
inkscape:connector-curvature="0"
d="m 11.13017,1988.6745 212.92999,240.357 212.92981,-240.357 z m 0,-1978.6745 425.8598,0 1.13131,242.01964 -428.12128,0 z m 0,338.49925 425.8598,0 0,1543.67415 -425.8598,0 z"
id="path8" />
</svg>

这是优化后的svg：

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="448.12128" height="2239.0315">
<path style="fill:#0029b4;fill-opacity:1" d="m 11.13017,0 z"/>
</svg>

这是你的 html，我的 svg 正在运行：

    #sobreU{fill: rgb(182,236,222);
    stroke:#119094;
    stroke-width:2px;
    stroke-dashoffset:2150 ;
    stroke-dasharray: 2150;
    animation: line 2s ease-in-out forwards;
    }

    @keyframes line{
    100%{
        stroke-dashoffset: 0;
    }
    0%{
    }
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=0.5">
        <title>Document</title>
    </head>
    <body>

    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="1044" height="364">
    <path id="sobreU" d="M 923.0842,353.33646 1034,182.12299 923.0842,10.90966 Z M 10,353.33646 10,10.90966 121.68301,10 l 0,344.24521 z m 156.20465,-342.4268 712.34799,342.4268 z"/>
    </svg>

    </body>
    </html>

另请注意，您代码中的 svg 缺少最后一个结束标记 </svg> 并在此处重新声明 path 的结束标记：186z"/> </path> 如果您使用 /在 path d 声明的末尾，则不能使用 </path>，因为 / 关闭了标记。页面显示 svg 是因为它嵌入到 html 代码中，并且 html 不像 svg 那样严格，但是如果您尝试在浏览器中单独打开 svg，它会丢弃以下错误消息。

Sorry,my browser is in spanish

希望对我的英语有所帮助和抱歉。

htmlimportsvg
本文链接：https://www.f2er.com/8057.html

大家都在问