Extrahieren von Farben von Benutzer hochgeladen SVG-Datei und Ausgabe für die Verwendung in einem Formular

Question

Ich möchte eine Seite für Benutzer erstellen, um unser System mit einfachen Logo-und Farbänderungen neu zu gestalten.

Benutzer können ihr Logo hochladen und wenn sie ein SVG wählen, würde die Seite im Idealfall die Farben in ihrem Logo als praktische Referenz auflisten, damit sie diese in die anderen Felder auf der Seite kopieren können, um sie zu speichern um Hex-Codes usw. auszugraben

Ist es möglich, mit jQuery/JS/Regex die Füllfarben aus einer ausgewählten/hochgeladenen SVG-Datei zu finden und auszugeben?

Ich bin nicht an Komplikationen wie Opazität und Effekte interessiert, nur eine einfache Extraktion von Farbcodes als eine progressive Verbesserung. Der Benutzer wird auch in der Lage sein, seine eigenen Farben als Rückfall zusätzlich zu dem, was in der SVG gefunden wird, zu wählen.

Ich weiß nicht, wie um zu beginnen, aber ich denke, einige der Fragen, die ich ansprechen müssen schließen

• doppelte Werte vor der Ausgabe Entfernen
• SVG Sicherheit/script Injektion
• Hat der SVG muss vor der Verwendung auf den Server hochgeladen werden oder kann es vor der Übermittlung verwendet werden?

Answer 1

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

OK Ich habe es herausgefunden, ich jetzt müssen nur herausfinden, wie die Werte in ein Array setzen, so kann ich sehen, wie viele Werte gibt und dann jeden Wert in einem ausgewählten einfügen Speisekarte.

Nicht schlecht für jemanden, der jQuery nicht kennt?

<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')); 
}); 
});