Skip to content

Instantly share code, notes, and snippets.

@ccprog

ccprog/resource.svg

Last active November 14, 2017 15:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ccprog/99ff277fd905ad080a14913753932aa4 to your computer and use it in GitHub Desktop.
Save ccprog/99ff277fd905ad080a14913753932aa4 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
resource.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<style type="text/css">
#red-ring {
fill: none;
stroke: red;
}
</style>
<circle id="black-circle"
cx="50" cy="50" r="49"/>
<circle id="red-ring"
cx="50" cy="50" r="49"/>
</defs>
</svg>
Raw
test.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test case: SVG-in-HTML use from external file</title>
<style type="text/css">
svg {
float: left;
margin-right: 15px;
margin-bottom: 15px;
}
div {
clear: left;
}
#black-circle, #red-use {
fill: none;
stroke: red;
}
</style>
</head>
<body>
<div>
<svg id="red-use" width="100px" height="100px" viewBox="0 0 100 100">
<use xlink:href="resource.svg#black-circle"/>
</svg>
<p>1. Not styled in resource.svg, style in text.html targets use element.</p>
<p>Expected: Styling inherited inside shadow tree: red circle</p>
</div>
<div>
<svg width="100px" height="100px" viewBox="0 0 100 100">
<use xlink:href="resource.svg#red-ring"/>
</svg>
<p>2. Styled in resource.svg, not styled in text.html.</p>
<p>Expected: Styling applied and copied to shadow tree: red circle</p>
</div>
<div>
<svg width="100px" height="100px" viewBox="0 0 100 100">
<use xlink:href="resource.svg#black-circle"/>
</svg>
<p>3. Not styled in resource.svg, style in text.html targets element instance in the shatow tree.</p>
<p>Expected: no styling applied inside shadow tree: black disk</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment