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.

Sign up for GitHub

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

Jump to bottom

The main card image is clipped by the 'Suit/Rank' section #8

Open
I-Omnibus opened this issue Oct 31, 2022 · 3 comments
Open

The main card image is clipped by the 'Suit/Rank' section #8

I-Omnibus opened this issue Oct 31, 2022 · 3 comments

Comments

@I-Omnibus
Copy link

Thanks for this excellent repo 😊
Issue

<!DOCTYPE html>
<html>

<head>
  <title>The main card image is clipped by the 'Suit/Rank' section</title>
</head>

<body>
  <div data-suit="heart" data-rank="12" style="width: 170px;">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 170 245">
      <use href="./node_modules/svg-cards/svg-cards.svg#heart_queen"></use>
    </svg>
  </div>
  <a href="https://github.com/htdebeer/SVG-cards" target="_blank">Huub de Beer</a>
</body>

</html>```
@htdebeer
Copy link
Owner

htdebeer commented Nov 1, 2022

I am not sure this is intentional or not. Looking at the two images in the original repository's webpage, I see one image with this clipping and one without.

@I-Omnibus
Copy link
Author

I see what you mean but it's a slight crease in an otherwise beautiful rendition. I know nothing about SVG and were it as simple as rescaling the central image not to overlap the denomination, that could be a quick solution, I guess.

In any event, it's not a big issue.

@htdebeer
Copy link
Owner

htdebeer commented Nov 2, 2022

It's not a big issue, but adding an extra set of cards with a nice and uninterrupted border might be nice. Then our users can choose whatever design they like best.

You can scale the inner part of the card in SVG. Or maybe scale the rank part and move it a bit towards the inner part of the card. However, I doubt either solution result in nicer looking cards. But I am not a designer.

I do believe it should be possible to create a nice design with a complete border around the card. Doing this well will take a bit of effort though. You need to come up with a layout that works for all cards and looks fine however you scale your cards.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@htdebeer @I-Omnibus