moko-resources
moko-resources copied to clipboard
Published
20 hours ago •
icerockdev
icerockdev
Svg icons with alpha color become black on iOS
trafficstars
Following SVG icon has path color with alpha "#a3acb1a4"
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 54 48"
width="54" height="48"
id="vector">
<path
id="path"
d="M 54 24 C 54 37.25 41.88 48 26.93 48 C -8.99 46.7 -8.98 1.3 26.93 0 C 41.88 0 54 10.75 54 24 Z"
fill="#a3acb1a4"/>
<path
id="path_1"
d="M 40.63 32.93 C 40.61 32.8 40.59 32.68 40.57 32.56 C 40.54 32.46 40.52 32.36 40.48 32.27 C 40.47 32.24 40.46 32.22 40.45 32.19 C 40.41 32.08 40.36 31.96 40.3 31.86 L 29.5 11.04 C 28.96 10.01 27.9 9.36 26.73 9.36 C 25.56 9.36 24.5 10.01 23.96 11.04 L 13.16 31.87 C 13.09 32.01 13 32.2 12.94 32.43 C 12.92 32.49 12.9 32.57 12.89 32.66 C 12.88 32.69 12.87 32.72 12.87 32.76 C 12.87 32.79 12.86 32.81 12.86 32.84 C 12.85 32.9 12.85 32.97 12.84 33.03 C 12.83 33.12 12.82 33.22 12.82 33.32 C 12.79 33.9 12.8 34.61 12.89 35.04 C 13 35.52 13.24 35.99 13.58 36.38 C 14.02 36.89 14.51 37.14 14.77 37.25 C 15.13 37.4 15.52 37.47 15.93 37.47 C 16.27 37.47 16.62 37.42 16.96 37.3 L 26.41 34.09 C 26.51 34.05 26.63 34.03 26.74 34.03 C 26.85 34.03 26.97 34.05 27.07 34.09 L 36.52 37.3 C 36.85 37.41 37.2 37.48 37.54 37.48 C 38.61 37.48 39.63 36.9 40.2 35.96 C 40.62 35.26 40.79 33.92 40.63 32.93 Z"
fill="#ffffff"/>
<path
id="path_2"
d="M 28.58 11.52 C 27.81 10.03 25.67 10.03 24.89 11.52 C 21.29 18.46 17.69 25.4 14.09 32.34 C 14 32.52 13.74 33.08 13.9 33.77 C 13.92 33.9 14.02 34.28 14.35 34.67 C 14.67 35.04 15.04 35.2 15.14 35.24 C 15.81 35.51 16.42 35.34 16.61 35.28 L 26.06 32.06 C 26.49 31.91 26.97 31.91 27.39 32.06 L 36.84 35.28 C 38.62 35.89 40.22 34.01 39.36 32.34 L 28.58 11.52 Z"
fill="#232f34"/>
</svg>
Moko version: 0.24.0
| iOS | Android |
|---|---|
Temporary workaround is to use fill="#a3acb1" fill-opacity="0.64" instead of fill="#a3acb1a4"
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 54 48"
width="54" height="48"
id="vector">
<path
id="path"
d="M 54 24 C 54 37.25 41.88 48 26.93 48 C -8.99 46.7 -8.98 1.3 26.93 0 C 41.88 0 54 10.75 54 24 Z"
fill="#a3acb1"
fill-opacity="0.64"/>
<path
id="path_1"
d="M 40.63 32.93 C 40.61 32.8 40.59 32.68 40.57 32.56 C 40.54 32.46 40.52 32.36 40.48 32.27 C 40.47 32.24 40.46 32.22 40.45 32.19 C 40.41 32.08 40.36 31.96 40.3 31.86 L 29.5 11.04 C 28.96 10.01 27.9 9.36 26.73 9.36 C 25.56 9.36 24.5 10.01 23.96 11.04 L 13.16 31.87 C 13.09 32.01 13 32.2 12.94 32.43 C 12.92 32.49 12.9 32.57 12.89 32.66 C 12.88 32.69 12.87 32.72 12.87 32.76 C 12.87 32.79 12.86 32.81 12.86 32.84 C 12.85 32.9 12.85 32.97 12.84 33.03 C 12.83 33.12 12.82 33.22 12.82 33.32 C 12.79 33.9 12.8 34.61 12.89 35.04 C 13 35.52 13.24 35.99 13.58 36.38 C 14.02 36.89 14.51 37.14 14.77 37.25 C 15.13 37.4 15.52 37.47 15.93 37.47 C 16.27 37.47 16.62 37.42 16.96 37.3 L 26.41 34.09 C 26.51 34.05 26.63 34.03 26.74 34.03 C 26.85 34.03 26.97 34.05 27.07 34.09 L 36.52 37.3 C 36.85 37.41 37.2 37.48 37.54 37.48 C 38.61 37.48 39.63 36.9 40.2 35.96 C 40.62 35.26 40.79 33.92 40.63 32.93 Z"
fill="#ffffff"/>
<path
id="path_2"
d="M 28.58 11.52 C 27.81 10.03 25.67 10.03 24.89 11.52 C 21.29 18.46 17.69 25.4 14.09 32.34 C 14 32.52 13.74 33.08 13.9 33.77 C 13.92 33.9 14.02 34.28 14.35 34.67 C 14.67 35.04 15.04 35.2 15.14 35.24 C 15.81 35.51 16.42 35.34 16.61 35.28 L 26.06 32.06 C 26.49 31.91 26.97 31.91 27.39 32.06 L 36.84 35.28 C 38.62 35.89 40.22 34.01 39.36 32.34 L 28.58 11.52 Z"
fill="#232f34"/>
</svg>