StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
17017083
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-06-10T04:55:24.443
FavoriteCount
0
LastActivityDate
2013-06-12T04:16:25.323
LastEditDate
2013-06-12T04:16:25.323
LastEditorUserId
1292848
OwnerUserId
1292848
ParentId
16983442
PostTypeId
2
Score
1
ViewCount
0
LastEditorDisplayName
text
Body
<p>You can use preserveAspectRatio to achieve this affect in a limited way. But you are limited by the positioning options that preserveAspectRatio provides. So as long as your sprite has a maximum of 3x3 images or are positioned at the corners or sides, it would work.</p> <p>The are a couple of other ways I can think of to achieve the same effect in a more flexible way.</p> <ul> <li>Use the clip or clip-path style properties along with careful positioning of the image on the page</li> <li>Embed the image inside another <code><svg></code> element and use viewBox to select the part of the sprite you want.</li> </ul> <p>The following example demonstrates the three main techniques above.</p> <pre><code><?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="8cm" height="8cm" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Testing image elements</desc>  <rect fill="none" stroke="blue" x="1" y="1" width="398" height="398"/>  <image x="100px" y="100px" width="238px" height="64px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png" preserveAspectRatio="xMinYMin slice"/>  <image x="-50px" y="-800px" width="238px" height="1073px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png" clip="rect(200 100 219 119)" />  <svg x="100px" y="300px" width="19px" height="19px" viewBox="150 1000 19 19" version="1.1"> <image x="0px" y="0px" width="238px" height="1073px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png" /> </svg> </svg> </code></pre>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POHow to specify the portion of the image to be rendered inside SVG:image tag?
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USPaul LeBeau
UserOwnerUserId
1. USPaul LeBeau
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POHow to specify the portion of the image to be rendered inside SVG:image tag?
  singulars
  PostTypePostTypeId
  PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTAcceptedByOriginator
CommentsPostId
1. This table or related slice is empty.

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.