M
M
Mad Coder2021-03-09 12:28:02
React
Mad Coder, 2021-03-09 12:28:02

Why is svg clipped in react jsx?

I insert jsx svg into react and for some reason the svg is half cut off. Normal html doesn't have this problem. What could be the reason?
Here is svg:

<svg width="155" height="155" viewBox="0 0 155 155" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0)">
                            <path opacity="0.2" d="M123.965 42.3258C130.743 42.3258 136.239 36.8306 136.239 30.052C136.239 23.2735 130.743 17.7783 123.965 17.7783C117.186 17.7783 111.691 23.2735 111.691 30.052C111.691 36.8306 117.186 42.3258 123.965 42.3258Z" fill="#B3C0ED"/>
                            <path opacity="0.7" d="M31.5618 135.712C38.3404 135.712 43.8355 130.217 43.8355 123.439C43.8355 116.66 38.3404 111.165 31.5618 111.165C24.7832 111.165 19.2881 116.66 19.2881 123.439C19.2881 130.217 24.7832 135.712 31.5618 135.712Z" fill="#B3C0ED"/>
                            <path opacity="0.4" d="M142.726 89.773C149.504 89.773 154.999 84.2779 154.999 77.4993C154.999 70.7207 149.504 65.2256 142.726 65.2256C135.947 65.2256 130.452 70.7207 130.452 77.4993C130.452 84.2779 135.947 89.773 142.726 89.773Z" fill="#B3C0ED"/>
                            <path opacity="0.8" d="M12.2737 89.773C19.0523 89.773 24.5474 84.2779 24.5474 77.4993C24.5474 70.7207 19.0523 65.2256 12.2737 65.2256C5.49513 65.2256 0 70.7207 0 77.4993C0 84.2779 5.49513 89.773 12.2737 89.773Z" fill="#B3C0ED"/>
                            <path opacity="0.5" d="M123.439 135.712C130.218 135.712 135.713 130.217 135.713 123.439C135.713 116.66 130.218 111.165 123.439 111.165C116.661 111.165 111.166 116.66 111.166 123.439C111.166 130.217 116.661 135.712 123.439 135.712Z" fill="#B3C0ED"/>
                            <path opacity="0.8" d="M31.5618 43.8345C38.3404 43.8345 43.8355 38.3394 43.8355 31.5608C43.8355 24.7822 38.3404 19.2871 31.5618 19.2871C24.7832 19.2871 19.2881 24.7822 19.2881 31.5608C19.2881 38.3394 24.7832 43.8345 31.5618 43.8345Z" fill="#B3C0ED"/>
                            <path opacity="0.6" d="M77.4973 155.001C84.2759 155.001 89.771 149.505 89.771 142.727C89.771 135.948 84.2759 130.453 77.4973 130.453C70.7187 130.453 65.2236 135.948 65.2236 142.727C65.2236 149.505 70.7187 155.001 77.4973 155.001Z" fill="#B3C0ED"/>
                            <path d="M77.4973 24.5474C84.2759 24.5474 89.771 19.0523 89.771 12.2737C89.771 5.49513 84.2759 0 77.4973 0C70.7187 0 65.2236 5.49513 65.2236 12.2737C65.2236 19.0523 70.7187 24.5474 77.4973 24.5474Z" fill="#B3C0ED"/>
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M69.4874 93.2266C63.7983 74.5411 75.8191 67.7185 75.8191 67.7185C74.9781 77.6892 80.6626 85.4572 80.6626 85.4572C82.7533 84.8284 86.7439 81.8898 86.7439 81.8898C86.7439 85.4572 84.6383 93.2221 84.6383 93.2221C84.6383 93.2221 92.0094 87.5411 94.3298 78.1054C96.6471 68.6698 89.9157 59.197 89.9157 59.197C90.3213 65.8753 88.0547 72.4437 83.6138 77.4618C83.836 77.2062 84.0224 76.9223 84.1655 76.6146C84.9633 75.0241 86.2443 70.8905 85.4942 61.318C84.4384 47.881 72.2238 42.2148 72.2238 42.2148C72.9763 48.0671 71.5779 50.6999 68.018 57.4017C66.5978 60.0754 64.8335 63.3967 62.7246 67.8285C55.3296 83.3658 69.4874 93.2266 69.4874 93.2266ZM63.7078 93.3329L46.2865 101.878C43.6569 103.167 44.578 107.113 47.5086 107.113L66.3361 105.526L72.2975 96.915C68.4797 96.3455 65.18 95.1917 63.7078 93.3329ZM71.6058 107.202C70.843 106.296 69.7938 105.701 68.6539 105.499L74.4212 97.1682C75.7405 97.2885 77.0909 97.3464 78.4241 97.3464C79.4996 97.3464 80.5862 97.3087 81.6612 97.231L87.6216 105.84C86.977 106.119 86.3899 106.534 85.905 107.068L82.2687 111.071C80.2338 113.311 76.691 113.244 74.7422 110.929L71.6058 107.202ZM89.6363 105.43C89.7785 105.431 89.9213 105.438 90.0642 105.451L108.121 107.113C110.991 107.113 111.965 103.296 109.444 101.929L93.5864 93.3329C91.7051 95.3123 87.972 96.4923 83.8131 97.0185L89.6363 105.43Z" fill="#B3C0ED"/>
                        </g>
                        <defs>
                            <clipPath id="clip0">
                                <rect width="155" height="155" fill="white"/>
                            </clipPath>
                        </defs>
                    </svg>

Here is the screenshot:
60473f9e3e054018822694.png

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question