Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svg icons with alpha color become black on iOS #731

Open
egorikftp opened this issue Jun 10, 2024 · 1 comment
Open

Svg icons with alpha color become black on iOS #731

egorikftp opened this issue Jun 10, 2024 · 1 comment
Assignees
Labels
bug Something isn't working
Milestone

Comments

@egorikftp
Copy link

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
Simulator Screenshot - iPhone 15 Pro - 2024-06-10 at 14 20 00 Screenshot_20240610_142539
@egorikftp
Copy link
Author

egorikftp commented Oct 21, 2024

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants