45 lines
1.3 KiB
HTML
45 lines
1.3 KiB
HTML
|
<!DOCTYPE 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>
|