2017-01-17 71 views
-1

任何能夠將此圖像複製到SVG曲線的人?嘗試了幾個小時(以前從未使用過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> 
+0

https://inkscape.org – ceving

回答

1

如果您有機會獲得Adobe Illustrator的你可以很容易地將jpeg和png轉換爲SVG。

  • 打開Illustrator中的圖像
  • 點擊它,選擇它
  • 單擊工具欄上找到的圖像痕跡按鈕(您可能需要 更改設置來diferent質量)
  • 點擊展開(圖像跟蹤按鈕是)
  • Voila!你有你的圖像的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

+1

非常好,謝謝艾倫。 –

+3

這非常大。試試這個。 https://jsfiddle.net/09navc7r/ –

+0

@PaulLeBeau你知道一種自動創建圖像的SVG版本的方法嗎?還是這個手工編碼? – Pixelomo

相關問題