ユーザーがアップロードしたSVGファイルの色を抽出し、フォームで使用するために出力します。

Question

単純なロゴと色の変更でシステムのブランドを変更するためのページを作成します。

ユーザーは自分のロゴをアップロードすることができます。SVGを選択した場合、ページ上の他のフィールドにそれらをコピーして保存することができます16進数コードなどを掘り出すことができます

jQuery/JS/Regexを使用して、選択/アップロードされたSVGファイル内の塗りつぶしの色を検索して出力できますか？

私は不透明度やエフェクトなどの複雑さに興味はありません。プログレッシブエンハンスメントとしてのカラーコードの単純な抽出です。ユーザーは、SVGにあるものに加えて、自分の色をフォールバックとして選択することもできます。

私が始めるために方法を知らないが、私は私が対処する必要がある問題のいくつかは、出力

SVGセキュリティ/スクリプトインジェクション

はSVGを行う前に重複する値を削除

• が含まれると思います使用前に サーバーにアップロードする必要がありますか、送信前に使用することはできますか？私はそれは、私が今ちょうど私がありますどのように多くの値を見ることができるように配列に値を配置する方法を考え出すと、その後の選択に各値を挿入する必要があります考え出した

Answer 1

http://codepen.io/rachelreveley/pen/LZNBgX?editors=1010

OKメニュー。

jQueryを知らない人にとっては悪くないですか？あなたが不透明ミックス、グラデーション、そして濾過色について考えるとき

<div id="element1" style="width:250px; height:250px;"> 
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 405 312.9" xml:space="preserve" enable-background="new 0 0 405 312.9"><style type="text/css"> 
    .st0{fill:#0000ff;} 
    .st1{fill:#ff00ff;} 
    </style> 
    <g id="group"> 
     <path id="figure-head" fill="#ff000" class="st1" d="M319.9 6.9C313 3 302.7 1.2 288.8 1.7c-8 0.5-15.5 3-22.7 7.2 -4.2 2.8-6.8 6.4-8.6 10.2 -1.7 6.5-1.7 11.9 2.3 14.7 5.5 4.5 12.9 5.8 21.5 4.8 7-1.4 15.3-3.5 22.3-4.6 -6.6 4.8-14.5 9.2-21.1 13.7 8.5 0.8 16.5 1.1 24.8 0.2 13.2-4 22.1-8 25.6-19C334.9 19.2 329.5 12.3 319.9 6.9zM284.1 23.6c-4.8 0-8.7-2.6-8.7-5.9 0-3.2 3.9-5.9 8.7-5.9s8.7 2.6 8.7 5.9C292.7 20.9 288.8 23.6 284.1 23.6zM311.2 26.2c-5.1 0-9.3-3.1-9.3-6.8s4.2-6.8 9.3-6.8c5.1 0 9.3 3.1 9.3 6.8C320.4 23.1 316.3 26.2 311.2 26.2z"/> 
    </g> 
    <path id="i" class="st1" fill="#00000" d="M3.6 129.6c2.3-8.2 7.2-12.8 15.7-12.2 10.9 0.1 14.1 5.4 15.1 12.2 -0.1 25.8-0.1 51.7-0.2 77.5 -2 7.8-7.4 10.7-15.1 10.3 -8.2 0.9-12.8-2.3-14.7-12.2C4.3 180.3 3.6 154.5 3.6 129.6z"/> 
    </svg> 
</div> 
<div id="element2"></div> 


jQuery(document).ready(function($){ 
    var colours = $('#element1').children('svg').find('path').each(function() { 
    $("#element2").append($(this).attr('fill')); 
}); 
});