I am trying to do the simpliest test of css clip-path, read the main websites about that and nothing works on my local. I have been running in circle for some time and it is infuriating. Even copying examples from the web won't at all provide any result.
I am just trying to... clip a simple jpg image with a circle. I tried with a css defining clip-path and -webkit-clip-path, it does not work: the img is displayed entirely without clipping. I tried with svg clippath, it does not work: the img is displayed entirely without clipping.
I use MacOs, I tried with the latest versions of Chrome, Safari and Firefox. I use (test) Adobe Brackets to edit the html and css files.
I must do something wrong, I must. But I cannot find what. Can you please provide any help? Thanks!
Here is the example with just css:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Torche</title>
<link rel="stylesheet" href="/style.css" />
<style>
.testClip {
-webkit-clip-path: circle(60 px at center);
clip-path: circle(60 px at center);
width: 100%;
}
</style>
</head>
<body>
<div id="mainPage">
<img src="/img/Japan.jpg" class="testClip">
</div>
</body>
</html>
Here is the example with SVG clipPath:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Torche</title>
<link rel="stylesheet" href="/style.css" />
<style>
.testClip {
-webkit-clip-path: url(#testSvgClip);
clip-path: url("testSvgClip);
width: 100%;
}
</style>
</head>
<body>
<svg width="0" height="0">
<defs>
<clipPath id="testSvgClip">
<circle cx="100" cy="100" r="25"></circle>
</clipPath>
</defs>
</svg>
<div id="mainPage">
<img src="/img/Japan.jpg">
</div>
</body>
</html>