Come gestire Sketch SVG esportato con ID

Desidero utilizzare le icone svg nella mia pagina. I designer con cui lavoro utilizzano Sketch per progettare l'immagine ed esportare il risultato in svg. Sketch aggiunge varie id tag al codice esportato (notare gli attributi id="Page-1", id="My-Star" e id="Star-1"):Come gestire Sketch SVG esportato con ID

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
     <g id="My-Star" stroke="#979797" fill="#D8D8D8"> 
      <polygon id="Star-1" points="11.9860934 18.5835921 5.4876995 22 6.7287823 14.763932 1.47147118 9.63932023 8.73689646 8.58359214 11.9860934 2 15.2352904 8.58359214 22.5007157 9.63932023 17.2434045 14.763932 18.4844873 22 "></polygon> 
     </g> 
    </g> 
</svg>

ho includono lo SVG direttamente nel codice HTML. In questo modo, introduco lo stesso id più volte. Oltre all'html non valido che è il risultato di questo modo di lavorare, ho bisogno di modificare gli elementi svg basati su id s. Questa è una cattiva pratica.

Io uso css per lo stile dei SVG, un'occhiata ad un example

La domanda:
C'è un modo per sostituire i id s con class es durante l'esportazione SVG da Sketch? C'è qualche plugin o impostazione che posso dare ai designer? In caso negativo, qual è il flusso di lavoro ottimale nella ricezione di risorse svg dai progettisti e nel suo utilizzo nella pagina?

fonte

2016-03-11 Peter Goes

mentre non è l'ideale, è possibile utilizzare una ricerca e sostituzione manuale sui dati SVG – Martin

-1

Mi sono imbattuto nello stesso problema, quindi ho creato un plugin. Con questo plugin, tutti gli id in svg esportati da slice vengono assegnati in uno spazio dei nomi in stile BEM.

https://github.com/Knowre-Dev/svg-namespacing

fonte

2016-08-03 05:02:03

Guardando il codice del proprio plugin, si sostituisce il _content_ dell'attributo 'id'. Ma l'attributo 'id' rimane nel file. Ciò significa che quando si hanno più svg identici nel documento html, si finisce con più occorrenze dello stesso id. Stavo cercando un modo per sostituire l'attributo 'id' con un' class'attribute, ma mantenere il suo contenuto. Il tuo plugin mi ha dato un punto di partenza per scrivere il mio plugin. Quindi grazie! –

Sembra che non v'è alcuna buona soluzione altri che chiede ai progettisti di utilizzare nomi dei gruppi unici.

I nomi dei gruppi diventano ID di gruppo nell'SVG generato.

fonte

2016-08-21 11:42:37 Nishant

Non ho trovato alcuna soluzione in Sketch, ma ho trovato un semplice walk-around con PHP. In Sketch, nomino ogni gruppo o percorso che voglio come classe che inizia con a. punto, ad esempio .person ed esportare il file. Ovviamente il gruppo ha ancora id=".person"

E poi caricare la Svg nella pagina utilizzando PHP e sostituire tutti gli ID che partono da un punto per classe: <?php echo str_replace('id=".', 'class="', file_get_contents('sample.svg')); ?>

io so che non è l'ideale, ma funziona nel mio caso.

fonte

2018-02-21 10:51:22 Ziki

Come gestire Sketch SVG esportato con ID

risposta

Problemi correlati