Skip to content

Instantly share code, notes, and snippets.

@chilijung

chilijung/README.md

Created April 21, 2014 14:23
Show Gist options
  • Save chilijung/11144214 to your computer and use it in GitHub Desktop.
Save chilijung/11144214 to your computer and use it in GitHub Desktop.
Download ZIP
image, anchors, symbol and use in svg
Raw
README.md

image, anchors, symbol and use in svg

Raw
index.html
<html>
<head>
<style>
svg {
height: 200px;
}
</style>
</head>
<body>
<h1>Image</h1>
<svg>
<image x="20" y="20" width="162" height="49" xlink:href="http://opendata.datagarage.io/image/header-logo-xs.png" />
</svg>
<h1>Anchor</h1>
<svg>
<a xlink:href="https://github.com/chilijung">
<text x="10" y="20">https://github.com/chilijung</text>
</a>
<a xlink:href="https://github.com/chilijung" xlink:show="new">
<text x="10" y="40">https://github.com/chilijung
(xlink:show="new")</text>
</a>
<a xlink:href="https://github.com/chilijung" xlink:show="replace">
<text x="10" y="60">https://github.com/chilijung
(xlink:show="replace")</text>
</a>
<a xlink:href="https://github.com/chilijung" target="_blank">
<text x="10" y="80">mhttps://github.com/chilijung
(target="_blank")</text>
</a>
<a xlink:href="https://github.com/chilijung" target="_top">
<text x="10" y="100">https://github.com/chilijung
(target="_top")</text>
</a>
</svg>
<!-- SVG <symbol> element is used to define reusable symbols. The shapes nested inside a <symbol> are not displayed unless referenced by a <use> element -->
<h1>Symbol and use</h1>
<svg width="500" height="100">
<symbol id="shape2">
<circle cx="25" cy="25" r="25" />
</symbol>
<use xlink:href="#shape2" x="50" y="25" />
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment