有人可以创建这个SVG曲线吗?

时间:2017-01-17 11:47:34

标签: svg curve

有人能够将此图像复制到SVG曲线吗?已经尝试了几个小时(以前从未使用过SVG路径)。

要复制的图像在这里:

enter image description here

我们有一些代码,但它是错误的方式......

    <svg width="1300" height="303" viewbox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0,0 
    L100,0
    C25,50 50,75 0,100z" fill="#760032" />
    </svg>

1 个答案:

答案 0 :(得分:1)

如果您可以访问Adobe Illustrator,则可以非常轻松地将jpeg&p和sng转换为SVG。

  • 在Illustrator中打开图像
  • 点击它选择它
  • 单击工具栏上的“图像跟踪”按钮(您可能需要 将设置更改为不同的质量)
  • 单击展开(图像跟踪按钮所在的位置)
  • 瞧!你有一个SVG版本的图像,你可以编辑矢量
  • 单击图像后,工具栏中将出现一个名为“文档设置”的按钮
  • 其中的选项是编辑画板按钮
  • 展开画板以适合您图像的大小
  • 另存为SVG
  • 在文本编辑器中打开SVG文件,您将获得类似的代码 这样的:

<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="1305.933px" height="245.063px" viewBox="0 0 1305.933 245.063" style="enable-background:new 0 0 1305.933 245.063;"
     xml:space="preserve">
<g>
    <path style="fill:#FEFEFE;" d="M5,173.072C5,116.746,5.039,60.42,4.903,4.094C4.894,0.669,5.576-0.001,8.999,0
        c430.946,0.099,861.892,0.099,1292.838,0c3.423-0.001,4.101,0.67,4.096,4.093c-0.124,80.323-0.124,160.646,0,240.97
        c0.005,3.424-0.673,4.094-4.096,4.093c-430.946-0.099-861.892-0.093-1292.838-0.153c-1.296,0-3.1,1.127-4-0.94
        c431.394,0,862.788,0,1294.182,0.005c3.054,0,5.812,0.848,5.795-4.414c-0.211-66.483-0.166-132.967-0.068-199.451
        c0.006-3.812-0.469-4.877-4.568-3.495c-64.031,21.6-128.741,41.007-193.75,59.414c-69.635,19.717-139.676,37.901-210.195,54.192
        c-73.948,17.084-148.261,32.372-223.145,44.816c-40.895,6.796-81.888,12.93-123.044,17.865
        c-36.375,4.361-72.838,7.873-109.391,10.511c-41.724,3.011-83.499,4.614-125.303,4.201c-52.828-0.522-105.498-3.704-157.718-12.471
        c-39.49-6.629-78.29-15.824-115.677-30.332C29.584,184.041,17.363,178.372,5,173.072z"/>
    <path style="fill:#760A34;" d="M5,173.072c12.363,5.3,24.584,10.968,37.117,15.832c37.388,14.508,76.187,23.703,115.677,30.332
        c52.22,8.766,104.889,11.948,157.718,12.471c41.804,0.413,83.579-1.19,125.303-4.201c36.554-2.638,73.017-6.149,109.391-10.511
        c41.157-4.935,82.15-11.069,123.044-17.865c74.884-12.444,149.197-27.732,223.145-44.816
        c70.519-16.292,140.559-34.476,210.195-54.192c65.009-18.407,129.719-37.814,193.75-59.414c4.099-1.383,4.574-0.317,4.568,3.495
        c-0.098,66.484-0.143,132.968,0.068,199.451c0.017,5.263-2.74,4.414-5.795,4.414C867.788,248.063,436.394,248.063,5,248.063
        C5,223.066,5,198.069,5,173.072z"/>
</g>
</svg>

See this pen too