Je crée une icône personnalisée à utiliser dans une application de flutter. Lorsque je télécharge mon svg sur le site Web de customicon, cela me montre une erreur de conversion en chemin composé manuellement Si l'image ne ressemble pas à ce que vous attendiez, veuillez la convertir en chemin composé manuellement. Balises et attributs ignorés: remplir. J'en ai également partagé la capture d'écran. Pouvez-vous s'il vous plaît me dire comment puis-je créer mon icône personnalisée à l'aide de svg et pourquoi cette erreur s'affiche?
3 Réponses :
Certaines des balises SVG ne sont pas prises en charge par exemple
supprimer les balises comme le style et la class du chemin
Cela montre clairement que le problème est fill balise de fill (voir la capture d'écran fournie). Apparemment, les icônes de police ne devraient contenir que des chemins, sans remplissage.
Il semble que https://www.fluttericon.com ne puisse générer que des svg à un seul chemin. Si vous avez deux chemins (vous devez avoir deux chemins pour avoir une propriété fill) cela ne fonctionnera pas.
De plus, j'utilisais des icônes matérielles de https://material.io/resources/icons , et il semble que certaines des icônes ont une bordure par défaut qui n'est pas remplie donc pas nécessaire.
Si vous avez un fichier svg similaire avec une bordure, vous pouvez supprimer le chemin de la bordure et ce sera comme vous le souhaitez.
Par exemple;
Svg téléchargé depuis https://material.io/resources/icons (drag_indicator):
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
SVG modifié qui fonctionne:
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
À la fin de la journée, si vous avez un chemin de bordure (généralement c'est le cas), vous pouvez le supprimer et cela fonctionnera bien.
Téléchargez vos SVG ici:
https://jakearchibald.github.io/svgomg/
il supprime les fonctionnalités SVG non prises en charge pour la police. téléchargez-le, puis téléchargez-le FlutterIcons. le SVG est rendu correctement.
Avez-vous trouvé une solution à ce problème?
pas encore. Veuillez signaler ce problème afin que quelqu'un puisse y répondre