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

fix: rank text seems not in the center of circle #2

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

kurt-liao
Copy link

Hi, thanks for this wonderful project. I found that rank text looks not center of the circle, so I changed the cx and cy for the circle. You can see the effect after changed:

Before

After

I've created Stack Overflow stats card which also inspired by github-readme-stats. Just too happy to see your intersting project, so want to share mine with you😀.

@vercel
Copy link

vercel bot commented Oct 14, 2022

Someone is attempting to deploy a commit to a Personal Account owned by @HwangTaehyun on Vercel.

@HwangTaehyun first needs to authorize it.

@HwangTaehyun
Copy link
Owner

Hi @kurt-liao!
Thank you for introducing your pretty awesome project. I will use it on my readme!

@HwangTaehyun
Copy link
Owner

I check your changes, but it does not work on the desktop chrome. However, I noticed that the rank is not centered in mobile chrome. Is any other method to center the rank text by SVG's CSS property?

@kurt-liao
Copy link
Author

kurt-liao commented Oct 14, 2022

I check your changes, but it does not work on the desktop chrome. However, I noticed that the rank is not centered in mobile chrome. Is any other method to center the rank text by SVG's CSS property?

I think I've found the solution here and also I commit the new version.

Uses text-anchor="middle" and alignment-baseline="middle" to fix this problem.

Also, I've tried it on desktop chrome, it seems fine.

@kurt-liao
Copy link
Author

Hi @kurt-liao! Thank you for introducing your pretty awesome project. I will use it on my readme!

Thanks! Open source hooray🎉

@HwangTaehyun
Copy link
Owner

HwangTaehyun commented Oct 14, 2022

@kurt-liao Actually, I think before changes have more centered rank text than after changes.
image

In this code, SVG's relative positions are literally weird. So, I want to fix them.
For example, I think y offset is unnecessary but it doesn't actually.

      <g transform="translate(30,16)">
        <text class="stat bold">${name}</text>
      </g>

Doing this would be really/very helpful to this repo and the center problem also will be resolved.

@kurt-liao
Copy link
Author

kurt-liao commented Oct 15, 2022

I think svg might have different effect on desktop and mobile.

Though I think second version is better than first, but it seems not work in mobile browser(text not show), kind weird🧐
S__165289987

I'm not that familiar in svg, but I'll keep to fix those problem.

@Sangram03
Copy link

Ok

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants