Je suis développeur, mais j'ai besoin de faire un motif rapide avec l'image SVG. Et est tombé sur une question. Mon fichier image SVG est comme suit: et actuellement, on dirait ci-dessous: Ceci est un panneau U-Turn. Et il y a deux sentiers: le cercle extérieur et le tournant d'initié. Actuellement, l'espace entre le chemin extérieur et d'initié est transparent. Je veux le rendre bleu. Comment le réparer? 
< / p>
3 Réponses :
Ce que j'ai fait: j'ai recalculé la liste code> de votre élément SVG, puis j'ai calculé le centre de votre SVG. J'ai ajouté un cercle bleu avec le centre au centre de l'élément SVG.
Pour obtenir la taille de votre SVG, j'ai supprimé d'abord la transformation et utilisée la méthode p> getbox () code>. J'ai utilisé les propriétés de la boîte de sélection de la nouvelle liste de visualité code> Valeur
<svg viewBox="64 32 1506 1506">
<circle cx="817" cy="785" r="680" fill="skyblue" />
<g
fill="red" stroke="none">
<path d="M715 1534 c-191 -31 -370 -134 -489 -280 -55 -67 -118 -192 -143
-284 -27 -101 -25 -293 5 -390 43 -136 97 -226 197 -326 80 -80 104 -98 195
-142 135 -66 235 -87 375 -79 510 28 846 542 664 1018 -87 228 -278 400 -514
463 -61 17 -236 28 -290 20z m285 -191 c176 -58 318 -202 372 -378 31 -97 31
-243 0 -340 -75 -243 -304 -415 -552 -415 -258 0 -486 168 -562 415 -31 97
-31 243 0 340 38 124 120 235 230 309 152 104 333 128 512 69z"/>
<path d="M746 1155 c-48 -17 -94 -59 -113 -105 -11 -24 -17 -86 -21 -199 l-5
-164 -52 58 c-50 56 -52 58 -58 34 -4 -13 -7 -51 -7 -84 l1 -60 87 -93 87 -93
97 88 98 88 0 84 0 84 -22 -19 c-13 -10 -40 -34 -61 -54 l-39 -35 4 152 c3
144 4 153 27 177 46 49 143 42 179 -12 15 -23 17 -54 13 -294 l-3 -268 65 0
65 0 7 284 c7 281 7 285 -15 330 -24 51 -58 79 -121 101 -52 19 -161 19 -213
0z"/>
</g>
</svg>
Juste pour développer la réponse en extrexanetas pour orienter la flèche correctement, voici le code, avec toutes les transformations réduites et votre boîte de vie de vue / tailles intactes (plus j'ai rendu les cercles):
P>
<?xml version="1.0" encoding="utf-8"?> <svg version="1.0" width="160pt" height="157pt" viewBox="0 0 160 157" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"> <circle fill="skyblue" cx="80" cy="78.5" r="58.2"/> <path fill="red" stroke="none" d="M 73 41.4 C 68.2 43.1 63.6 47.3 61.7 51.9 C 60.6 54.3 60 60.5 59.6 71.8 L 59.1 88.2 L 53.9 82.4 C 48.9 76.8 48.7 76.6 48.1 79 C 47.7 80.3 47.4 84.1 47.4 87.4 L 47.5 93.4 L 56.2 102.7 L 64.9 112 L 74.6 103.2 L 84.4 94.4 L 84.4 86 L 84.4 77.6 L 82.2 79.5 C 80.9 80.5 78.2 82.9 76.1 84.9 L 72.2 88.4 L 72.6 73.2 C 72.9 58.8 73 57.9 75.3 55.5 C 79.9 50.6 89.6 51.3 93.2 56.7 C 94.7 59 94.9 62.1 94.5 86.1 L 94.2 112.9 L 100.7 112.9 L 107.2 112.9 L 107.9 84.5 C 108.6 56.4 108.6 56 106.4 51.5 C 104 46.4 100.6 43.6 94.3 41.4 C 89.1 39.5 78.2 39.5 73 41.4 Z M 138.2 78.5 C 138.2 46.4 112.1 20.3 80 20.3 C 47.9 20.3 21.8 46.4 21.8 78.5 C 21.8 110.6 47.9 136.7 80 136.7 C 112.1 136.7 138.2 110.6 138.2 78.5 Z M 155.5 78.5 C 155.5 120.2 121.7 154 80 154 C 38.3 154 4.5 120.2 4.5 78.5 C 4.5 36.8 38.3 3 80 3 C 121.7 3 155.5 36.8 155.5 78.5 Z" /> </svg>
Vous pouvez le simplifier massivement en utilisant des formes plus simples. Ce qui suit a besoin d'un peu de peau de départ, mais est un bon point de départ:
p>
<path fill="red"
d="
M83 83 # Move to top right corner of arrow head
v15 # down 15
l -18 16 -18-16 # \/ shape left (bottom of arrow head)
v-15 # up 15
l 18 16 18-16 # \/ shape right (arrow top) to starting point
# line above could be written 'l18 16 z' for same result
" />
Forméning toujours requis: modifier le rayon ou l'épaisseur du cercle sur non entier pour éviter les bords carrés dans des navigateurs anti-blink; Formation positionnement des bords de ligne pour éviter la flou dans des écrans non-rétine; La courbe de ligne devrait être ellipse pas cercle; ... etc, etc., etc. Codage heureux;)