htdebeer / svg-cards Goto Github PK

View Code? Open in Web Editor NEW

141.0 8.0 45.0 13.39 MB

A set of playing cards in SVG (now also with a rendering in PNG)

License: GNU Lesser General Public License v2.1

svg cards

svg-cards's People

Contributors

Stargazers

Watchers

svg-cards's Issues

How to make Spades/Clubs black?

When I spawn a card with #club_jack etc it comes out red, anyway to make them appropriately colored? Did not see in the docs.

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

Thanks for this excellent repo 😊

<!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>```

Misplaced "J" ?

Using the deck for selecting cards for a hand got me to notice this:

Looking at the SVG-file I can see there is a different font-size for the J (And in fact also for the Queen)

Shouldn't all have the same size?

SVG file shows blank on Inkscape

What program was used to create these files? They don't display in text editor also so they look binary. They show empty in Inkscape although when I did a save-as there, it saved it as a text file I could read with text editor. Loading that file into Inkscape it still displays blank.

nothing renders

Hello,

This is awesome! I can't get anything to render though.

I ran npm install --save svg-cards

and then added this example code to the html:

  `<svg 
      width="600"
      height="400"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      >

      <!-- The cards have a natural width of 169.075 and a height of 244.640. It
           center is located at (+98.0375, +122.320). -->
      <!-- The original back color was #0062ff. The color of the back card can
           be changed by setting the fill on the USE-element. -->

      <use xlink:href="svg-cards-indented.svg#back" x="150" y="10" fill="red"/>
      <use xlink:href="svg-cards-indented.svg#heart_1" x="0" y="0"/>
      <use xlink:href="svg-cards-indented.svg#joker_black" x="100" y="100"/>
      <use xlink:href="svg-cards-indented.svg#spade_10" x="200" y="200" transform="rotate(45,198.0375,122.320)scale(0.5)"/>
      <use xlink:href="svg-cards-indented.svg#club_jack" x="300" y="100" transform="rotate(75,198.0375,122.320)scale(0.75)"/>
  </svg>`

Am I missing something?

I also tried extracting the jack of diamonds from the file (only need jacks right now), and opening in illustrator, but it didn't look right (I wrapped it in an svg tag before saving):

Thanks for your help with this!
Marshall

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.