Databases
StackOverflow2013
Postsdbo
POHow can I use an svg file with lots of individual svg's in html5?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I use an svg file with lots of individual svg's in html5?
    primarykey
    data
    text
    <p>I downloaded an svg file from <a href="http://svg-cards.sourceforge.net/" rel="nofollow">http://svg-cards.sourceforge.net/</a>. Its a basic standard deck of playing cards. It's structure looks like this: </p> <pre><code>&lt;defs&gt; &lt;g&gt; &lt;text&gt;&lt;/text&gt; &lt;/g&gt; &lt;/defs&gt; &lt;g&gt; &lt;g id="king_spade"&gt; &lt;use&gt;&lt;/use&gt; &lt;/g&gt; ... //50+ more cards &lt;/g&gt; </code></pre> <p>The readme says</p> <blockquote> <p>You can access to each either by rendering the file into a pixmap and clipping each card or by using their name with a DOM interface</p> </blockquote> <p>And then gives this example:</p> <pre><code>&lt;g id="king_spade"&gt; ... &lt;/g&gt; </code></pre> <p>OK, great I see the relationship between the two but I don't understand how I can display just one card, since all of the cards are in the same file. Anything I have done has rendered the entire svg file (all 55 cards!)</p> <p>That includes:</p> <pre><code>&lt;img&gt; &lt;embed&gt; &lt;object&gt; </code></pre> <p><strong>So my question:</strong> How exactly do I do what the readme suggests should be so easy... How do I access the individual cards inside of the group without first displaying the entire file? </p> <p>Really what I am looking for is almost a way to use it like css. Include it as a resource in my head, and then be able to do in the body of the document <code>&lt;g id="king_spade"&gt;&lt;/g&gt;</code> and have a the card king of spades show up. Can I not use it this way?</p> <p><strong>Edit:</strong> I am trying to do this all inside of a phonegap application, so there is no external server I am connecting to. All resources would be located on the phone, so the <code>ajax</code> solution below doesn't work because of same origin restrictions.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRyan
    1. USRyan
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow can I use an svg file with lots of individual svg's in html5?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow can I use an svg file with lots of individual svg's in html5?
      1. This table or related slice is empty.
      1. VTUpMod
    1. CODo you work inside one big `<svg>` element, or just want to add a card to regular HTML (for example, to `<div>`)?
      singulars
      1. POHow can I use an svg file with lots of individual svg's in html5?
      1. USEgor Nepomnyaschih
    2. CO@EgorNepomnyaschih I would prefer the second option.
      singulars
      1. POHow can I use an svg file with lots of individual svg's in html5?
      1. USRyan
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload