Files
doc-svg/exercices/vision/solution1.html
2025-10-30 13:08:21 +01:00

37 lines
873 B
HTML
Executable File

<html>
<head>
<title>SVG Image</title>
<style>
body { margin: 0 }
</style>
</head>
<body>
<svg height="100%" width="100%">
<defs>
<radialGradient id="Gradient" r="0.4">
<stop offset="0%" stop-color="white"/>
<stop offset="20%" stop-color="white"/>
<stop offset="100%" stop-color="black"/>
</radialGradient>
<mask id="masque">
<circle id="centre" cx="512" cy="342" r="20%" fill="url(#Gradient)" />
</mask>
</defs>
<image href="../street1.jpg" x="0" y="0" height="100%" width="100%" />
<rect width="100%" height="100%" mask="url(#masque)" />
</svg>
<script>
document.body.onmousemove = event =>
{
document.getElementById("centre").setAttribute("cx", event.clientX );
document.getElementById("centre").setAttribute("cy", event.clientY );
}
</script>
</body>
</html>