snapsvg
Version:
JavaScript Vector Library
45 lines • 1.38 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Snap.svg</title>
<style>
body {
background: #333;
}
</style>
<script src="../../dist/snap.svg-min.js"></script>
</head>
<body>
<svg width="0" height="0">
<pattern id="pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" viewBox="0 0 10 10">
<path d="M-5,0,10,15M0-5,15,10" stroke="white" stroke-width="5"/>
</pattern>
</svg>
<script>
var s = Snap();
var bigCircle = s.circle(100, 100, 50);
bigCircle.attr({
fill: "#bada55",
stroke: "#000",
strokeWidth: 5
});
var smallCircle = s.circle(70, 100, 40);
var discs = s.group(smallCircle, s.circle(130, 100, 40));
discs.attr({
fill: Snap("#pattern")
});
bigCircle.attr({
mask: discs
});
Snap.load("mascot.svg", function (f) {
var g = f.select("g");
f.selectAll("polygon[fill='#09B39C']").attr({
fill: "#fc0"
})
s.append(g);
g.drag();
});
</script>
</body>
</html>