The svg image is cropped #255
Answered
by
paulushub
tatarnikov-yura
asked this question in
Q&A
-
Tell me why the svg image is cropped
It shows normally in the browser |
Beta Was this translation helpful? Give feedback.
Answered by
paulushub
Jun 16, 2023
Replies: 1 comment 3 replies
-
Hello, I have confirmed the issue. The clip-path rect shown below is not well rendered. As a work-around, just remove this clip region, it will still be rendered without issue. <clipPath id="clip0_401_29779">
<rect width="38" height="38" fill="white" transform="translate(5 5)" />
</clipPath> <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_401_29779)">
<path d="M24.0002 35.7618C30.4961 35.7618 35.7621 30.4959 35.7621 23.9999C35.7621 17.504 30.4961 12.238 24.0002
12.238C17.5043 12.238 12.2383 17.504 12.2383 23.9999C12.2383 30.4959 17.5043 35.7618 24.0002 35.7618Z" fill="url(#paint0_linear_401_29779)" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0255 9.94128C31.5953 10.98 30.4046 11.4734 29.3658 11.0433C28.327 10.6131
27.8337 9.42235 28.2638 8.3836L29.1292 6.29378C29.5593 5.25503 30.7501 4.76165 31.7889 5.19179C32.8276 5.62193 33.321 6.81271
32.8909 7.85147L32.0255 9.94128ZM19.7336 8.38437C20.164 9.42304 19.6709 10.6139 18.6322 11.0443C17.5935 11.4746 16.4026
10.9815 15.9723 9.94282L15.1065 7.85318C14.6761 6.81451 15.1693 5.62363 16.2079 5.19328C17.2466 4.76292 18.4375 5.25606 18.8678
6.29473L19.7336 8.38437ZM38.0572 15.9723C37.0186 16.4026 36.5254 17.5935 36.9558 18.6322C37.3861 19.6708 38.577 20.164 39.6157
19.7336L41.7053 18.8678C42.744 18.4375 43.2371 17.2466 42.8068 16.2079C42.3764 15.1692 41.1855 14.6761 40.1469 15.1065L38.0572
15.9723ZM8.38464 28.2667C9.42331 27.8364 10.6142 28.3295 11.0445 29.3682C11.4749 30.4068 10.9818 31.5977 9.9431
32.0281L7.85346 32.8939C6.81479 33.3242 5.62391 32.8311 5.19356 31.7924C4.7632 30.7538 5.25634 29.5629 6.295 29.1325L8.38464
28.2667ZM29.3685 36.9557C30.4072 36.5253 31.5981 37.0185 32.0284 38.0571L32.8943 40.1468C33.3246 41.1854 32.8315 42.3763
31.7928 42.8067C30.7541 43.237 29.5633 42.7439 29.1329 41.7052L28.2671 39.6156C27.8367 38.5769 28.3299 37.386 29.3685
36.9557ZM18.6349 36.957C19.6736 37.3871 20.167 38.5779 19.7369 39.6166L18.8715 41.7064C18.4414 42.7452 17.2506 43.2386 16.2118
42.8084C15.1731 42.3783 14.6797 41.1875 15.1098 40.1488L15.9752 38.0589C16.4054 37.0202 17.5961 36.5268 18.6349
36.957ZM11.0435 18.6346C10.6134 19.6734 9.4226 20.1667 8.38384 19.7366L6.29403 18.8712C5.25527 18.4411 4.76189 17.2503 5.19203
16.2115C5.62218 15.1728 6.81295 14.6794 7.85171 15.1095L9.94153 15.9749C10.9803 16.4051 11.4737 17.5958 11.0435
18.6346ZM38.0591 32.0251C37.0203 31.595 36.5269 30.4042 36.9571 29.3654C37.3872 28.3267 38.578 27.8333 39.6167 28.2634L41.7066
29.1288C42.7453 29.5589 43.2387 30.7497 42.8086 31.7885C42.3784 32.8272 41.1876 33.3206 40.1489 32.8905L38.0591 32.0251Z" fill="url(#paint1_linear_401_29779)" />
</g>
<defs>
<linearGradient id="paint0_linear_401_29779" x1="12.4023" y1="12.2524" x2="12.4023" y2="35.4482" gradientUnits="userSpaceOnUse">
<stop offset="0.000617825" stop-color="#FFCE47" />
<stop offset="1" stop-color="#FFB300" />
</linearGradient>
<linearGradient id="paint1_linear_401_29779" x1="5.30102" y1="5.0595" x2="5.30102" y2="42.4582" gradientUnits="userSpaceOnUse">
<stop offset="0.000617825" stop-color="#FFCE47" />
<stop offset="1" stop-color="#FFB300" />
</linearGradient>
<clipPath id="clip0_401_29779">
<rect width="38" height="38" fill="white" transform="translate(5 5)" />
</clipPath>
</defs>
</svg> |
Beta Was this translation helpful? Give feedback.
3 replies
Answer selected by
tatarnikov-yura
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello, I have confirmed the issue. The clip-path rect shown below is not well rendered. As a work-around, just remove this clip region, it will still be rendered without issue.