Beispiel:CSS3 clip-path-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<style>
figure {
max-width: 500px;
padding: 0;
border: thin dotted #c82f04;
}
img {
clip-path: url(#beschneideform);
width: 100%;
}
text {
font-size: 210px;
font-weight: bolder;
font-weight: 900;
font-family: sans-serif;
}
svg {
height: 0;
}
</style>
<title>SVG als Beschneideform referenzieren</title>
</head>
<body>
<figure> <img src="https://wiki.selfhtml.org/images/5/57/Alaska-rockies.jpg" alt="Rockie Mountains"> </figure>
<svg>
<defs>
<clipPath id="beschneideform">
<text stroke="black" x="0" y="160">USA</text>
<path transform="translate(120,152) scale(0.4)"
d="m 102,6 c 0,0 4,1 9,2 9,3 17,5 23,6 2,1 7,3 11,3 3,1 8,2 10,3 1,0 5,1 7,2 3,0 6,1 8,1 4,1 14,3 23,5 5,1 10,2 22,4 6,2 17,4 33,6 5,1 13,3 18,3 11,2 22,4 28,5 2,0 6,0 10,1 6,1 29,3 42,5 3,0 10,0 16,1 5,1 15,1 21,1 6,1 17,1 23,2 6,0 25,1 42,1 l 30,-1 1,-3 c 2,-6 5,-5 6,1 1,6 3,9 8,9 3,1 6,2 7,3 2,1 3,1 6,-1 l 3,-1 7,3 c 3,2 7,3 8,3 0,0 3,1 6,3 l 4,3 3,-2 c 2,-2 4,-2 10,-1 4,0 7,1 8,1 0,1 1,1 2,1 5,0 2,3 -7,7 -5,2 -9,4 -10,6 -2,4 -9,11 -12,12 -2,1 -2,1 -1,2 1,2 5,2 10,-1 5,-2 6,-2 6,2 0,1 1,2 2,2 2,0 8,-2 9,-3 1,-1 3,-2 7,-4 4,-1 7,-3 10,-7 4,-4 9,-8 12,-8 2,0 1,2 -2,6 -2,2 -3,4 -3,5 0,0 2,1 4,1 3,1 5,2 8,4 2,4 3,4 8,4 4,0 6,-1 9,-3 3,-2 5,-3 8,-3 3,0 6,-1 7,-2 2,-1 5,-1 5,2 0,1 1,2 2,3 2,1 7,0 9,-1 2,-2 2,-1 3,4 1,3 1,3 5,3 4,0 5,1 5,2 0,2 -1,2 -8,3 -5,0 -9,0 -10,0 -1,0 -4,0 -7,0 -3,0 -5,0 -6,1 -1,0 -3,1 -5,1 -2,1 -4,2 -5,3 -2,1 -4,2 -5,2 -4,0 -9,3 -9,6 0,2 -2,6 -6,12 -3,4 -4,8 -2,8 1,0 8,-7 8,-9 0,-1 4,-5 5,-5 1,1 0,3 -2,6 -2,5 -3,8 -5,24 -1,14 1,33 3,36 1,1 2,3 3,5 2,5 5,5 10,2 3,-2 4,-4 4,-5 0,-2 1,-4 2,-5 1,-1 1,-4 1,-9 0,-6 0,-7 -3,-12 -3,-6 -3,-7 -3,-14 1,-15 4,-24 7,-25 0,0 2,-1 2,-3 1,-1 2,-2 3,-3 2,-1 5,-4 5,-7 0,-5 8,-6 16,-1 2,1 5,2 6,2 3,0 6,4 6,7 0,1 0,3 1,3 1,1 1,3 1,6 0,5 -2,11 -5,14 -2,1 -2,4 -1,6 2,2 3,1 6,-4 3,-4 5,-5 6,-5 3,0 7,4 7,7 0,1 1,5 3,8 3,8 3,15 0,15 -2,1 -6,7 -6,10 0,2 -1,3 -1,4 -1,1 -2,2 -2,2 0,2 8,5 11,5 2,0 4,0 5,1 1,1 3,1 4,0 2,0 4,-1 5,-1 2,-1 6,-4 9,-7 4,-3 7,-5 7,-5 1,0 3,-1 6,-3 2,-2 5,-3 5,-3 0,0 4,-3 7,-7 7,-8 9,-12 6,-14 -2,-2 -2,-5 -1,-7 3,-2 11,-4 17,-4 11,0 14,-1 19,-6 l 5,-5 -2,-4 c 0,-2 -2,-4 -2,-5 -1,-1 0,-2 2,-5 2,-2 4,-5 5,-7 2,-4 10,-12 13,-13 1,-1 3,-1 6,-1 2,0 6,-1 8,-1 5,-2 11,-4 22,-7 6,-1 8,-2 8,-4 1,-2 3,-4 5,-5 2,0 3,-2 4,-3 0,-1 1,-3 2,-5 0,-1 1,-8 1,-14 1,-9 2,-13 4,-19 3,-8 5,-9 8,-7 1,2 2,2 5,-1 3,-2 4,-3 6,-3 5,2 7,4 10,14 5,15 6,18 8,18 2,0 4,2 4,4 0,2 2,3 4,3 2,1 4,2 5,4 1,2 3,3 3,2 1,0 1,1 1,1 0,1 0,2 -1,2 0,0 -4,3 -9,8 -5,5 -9,9 -10,9 0,0 -2,1 -2,2 -1,2 -2,3 -3,3 -1,1 -4,3 -7,6 -4,3 -7,5 -9,5 -1,0 -2,1 -3,7 -1,4 -1,11 -2,16 0,9 0,9 3,10 1,0 3,2 4,4 2,2 3,3 5,3 3,0 4,-2 2,-5 -1,-1 -1,-1 1,-1 1,0 2,1 3,3 1,2 1,3 1,3 0,1 -2,2 -4,3 -3,2 -4,4 -4,5 1,2 0,2 -5,2 -4,0 -6,1 -9,3 -2,2 -5,3 -5,3 -1,0 -3,1 -4,1 -2,1 -5,2 -8,3 -4,1 -12,7 -12,10 0,1 0,1 1,0 1,-1 3,-1 5,-1 2,0 5,-1 8,-3 9,-6 11,-3 2,4 -8,6 -11,8 -15,8 -1,0 -3,0 -4,1 -1,1 -1,1 0,4 3,6 3,14 -1,21 -2,4 -3,7 -3,8 0,1 -3,4 -4,4 -1,0 -1,-1 -1,-2 0,-2 -5,-4 -6,-2 0,1 2,5 5,7 2,2 5,11 4,12 -2,3 -5,13 -5,16 0,4 -3,9 -4,8 -2,-1 -3,-5 -1,-9 1,-4 1,-6 0,-8 l -1,-3 -2,3 -1,2 -2,-3 c -1,-4 -5,-4 -5,-1 0,3 1,4 3,5 1,0 2,3 2,7 0,4 1,8 1,8 0,0 1,2 1,3 0,2 1,3 3,3 2,0 4,1 7,6 1,3 3,6 3,7 0,0 1,2 3,3 1,1 2,3 2,4 0,1 -3,6 -5,8 0,0 -1,1 -1,2 0,0 -2,2 -3,3 -5,2 -5,6 -1,7 2,1 3,3 0,6 0,1 -2,2 -4,2 -6,0 -18,11 -18,17 0,2 -2,4 -5,4 -1,0 -3,1 -5,1 -3,2 -8,9 -8,12 0,2 -1,5 -2,6 -2,3 -12,14 -15,16 -1,1 -2,3 -3,4 -1,2 -3,4 -4,5 -2,2 -4,8 -6,19 -3,12 -1,18 8,36 3,5 7,11 10,13 5,6 5,6 4,9 -1,3 -1,4 2,7 2,2 3,4 3,5 0,0 1,1 1,2 1,1 4,5 6,9 l 5,8 c 0,7 0,28 0,29 1,1 -4,11 -5,11 0,0 -1,-1 -1,-2 0,-1 -1,-1 -5,-1 -6,1 -6,1 -7,-2 0,-4 -6,-10 -9,-10 -2,0 -6,-3 -6,-5 0,-3 -4,-7 -6,-6 -1,0 -3,-1 -5,-6 -3,-4 -6,-8 -7,-10 -2,-2 -3,-4 -3,-5 0,-1 -1,-2 -2,-4 -1,-2 -1,-4 -1,-12 0,-12 -1,-16 -8,-19 -3,-1 -7,-4 -9,-7 -9,-9 -11,-10 -20,-3 -9,6 -13,6 -17,2 -1,-1 -5,-3 -8,-5 -5,-2 -7,-3 -13,-2 -6,0 -11,0 -15,2 -3,1 -7,2 -8,2 0,-1 -1,-2 -1,-4 0,-4 -1,-4 -5,-1 -2,3 -3,3 -8,2 -9,0 -14,2 -18,9 -1,2 -1,2 1,1 6,-2 8,1 3,6 l -2,4 4,2 c 2,0 5,2 6,2 2,1 2,4 0,5 -2,1 -2,1 -13,-4 -3,-1 -4,0 -4,2 0,1 -1,2 -2,3 -2,1 -2,1 -3,-1 -2,-1 -2,-1 -5,1 -1,1 -3,2 -4,2 -3,0 -9,-3 -9,-6 -1,-1 -1,-2 -2,-2 0,0 -2,-1 -4,-3 -2,-2 -3,-3 -6,-2 -3,0 -4,2 -1,2 1,0 3,0 3,1 0,2 -13,1 -20,-1 -9,-3 -22,-2 -30,2 -1,0 -2,1 -3,1 -1,0 -3,1 -4,2 -1,1 -3,4 -5,5 -2,1 -4,3 -4,4 -1,1 -6,5 -16,9 -4,3 -9,5 -11,7 -4,3 -11,13 -13,19 l -2,6 3,9 c 2,9 2,10 1,13 -3,3 -5,4 -9,1 -2,-1 -5,-2 -7,-2 -1,0 -4,-1 -6,-2 -2,-1 -5,-2 -5,-2 -5,0 -13,-7 -13,-12 0,-1 -1,-2 -1,-3 -1,0 -2,-2 -2,-4 -2,-9 -2,-11 -5,-13 -2,-1 -4,-4 -5,-5 0,-2 -2,-5 -4,-6 -2,-2 -7,-13 -7,-16 0,-2 -3,-6 -8,-12 -7,-6 -9,-7 -14,-7 -2,0 -5,0 -6,-1 -5,-2 -9,1 -12,6 -3,7 -6,10 -8,10 -3,0 -15,-8 -20,-12 -4,-4 -6,-8 -6,-13 0,-4 -4,-13 -8,-16 -4,-3 -12,-11 -19,-20 -2,-3 -10,-5 -22,-5 -8,0 -10,0 -10,3 0,4 -1,5 -7,5 -36,-5 -43,-6 -47,-7 -2,-2 -28,-17 -33,-20 -1,-1 -13,-8 -19,-12 -2,0 -3,-1 -5,-2 -1,0 -2,-2 -2,-3 0,-2 -1,-3 -7,-4 -4,0 -12,-1 -18,-2 -13,-2 -15,-2 -15,-9 0,-6 -2,-10 -5,-14 -1,-1 -3,-2 -6,-2 -4,0 -5,0 -5,-2 0,-4 -2,-6 -4,-6 -3,0 -4,-1 -9,-8 -2,-2 -4,-4 -5,-4 -1,0 -2,-1 -4,-1 -1,-1 -3,-2 -5,-3 -2,0 -5,-1 -5,-2 -2,-2 -2,-2 0,-7 l 1,-6 -4,-9 c -3,-5 -5,-10 -5,-11 0,-1 -1,-3 -2,-6 -3,-6 -4,-9 -1,-12 3,-2 3,-5 0,-6 -4,-2 -5,-7 -5,-15 1,-6 1,-7 -1,-9 -2,-3 -3,-4 -3,-8 0,-3 -1,-6 -3,-11 -4,-7 -4,-10 -1,-18 2,-4 1,-9 -3,-15 -2,-5 -2,-7 2,-12 7,-8 9,-13 10,-33 l 1,-13 4,-7 c 6,-9 14,-24 14,-27 0,0 1,-3 2,-5 4,-9 5,-12 6,-16 1,-2 2,-5 3,-6 0,-2 1,-5 1,-7 0,-1 1,-3 2,-4 1,-1 2,-4 0,-4 -1,0 -1,-2 1,-3 1,-1 1,-2 0,-5 0,-2 -1,-8 -1,-14 -1,-8 -1,-11 0,-13 2,-1 2,-1 5,2 4,3 9,6 11,6 1,0 3,1 4,2 3,1 3,1 5,0 3,-1 3,-1 3,1 0,1 1,2 2,2 1,0 1,-1 1,-3 0,-2 1,-4 1,-5 1,0 1,-4 0,-6 -1,-1 -1,-3 -1,-3 1,-2 2,-2 4,-1 z m 687,225 c -1,3 -1,11 0,11 2,1 2,1 2,-4 1,-5 -1,-10 -2,-7 z M 96,11 c 0,1 0,3 -1,4 -1,2 -1,2 -3,1 -2,-1 -3,-4 -2,-5 0,-2 5,-1 6,0 z m 478,60 c 0,1 -8,7 -10,7 -2,0 -1,-3 3,-5 3,-3 7,-4 7,-2 z m 299,92 c 1,0 1,1 1,1 0,1 -1,1 -2,0 0,-1 0,-1 1,-1 z m -54,137 1,4 c 1,2 1,3 0,4 -2,2 -2,1 -1,-4 z M 62,327 c 0,1 -1,1 -4,1 -2,-1 -4,-1 -5,-1 l -1,-1 c 0,-2 9,-1 10,1 z m 17,16 c 1,0 1,1 1,2 -1,2 -2,2 -3,0 0,-1 1,-2 2,-2 z m -3,11 c 1,0 1,3 0,3 -1,0 -2,-3 -1,-3 0,-1 1,-1 1,0 z m 36,64 c 1,2 3,3 4,3 1,0 3,1 4,3 2,2 4,3 6,3 1,0 4,1 5,1 1,1 3,2 4,2 1,0 2,0 3,1 0,1 2,1 4,1 4,-1 9,1 10,4 1,2 1,13 1,41 -1,36 -1,39 1,40 1,1 3,2 4,1 2,0 3,1 6,5 2,3 4,5 5,5 1,0 3,-1 4,-3 3,-4 4,-4 7,0 1,1 3,4 5,5 2,2 5,7 8,10 3,6 6,8 9,9 2,1 5,3 5,4 3,5 -1,14 -4,10 -1,-2 -2,-2 -4,0 -1,2 -3,3 -4,3 -2,0 -7,-6 -7,-8 0,-1 -1,-2 -2,-3 -3,0 -8,-6 -12,-14 -2,-5 -7,-9 -12,-12 -2,-1 -4,-3 -4,-3 -1,-1 -7,-3 -16,-5 -3,-1 -6,-2 -8,-3 -2,-1 -6,0 -9,3 -2,1 -2,1 -5,0 -3,-2 -6,-1 -9,1 -1,2 -3,3 -5,3 -2,-1 -2,-1 -2,-4 0,-2 1,-4 2,-5 1,-1 1,-3 1,-4 -1,-1 -3,-1 -3,1 0,2 -5,6 -7,7 -2,1 -2,2 -2,5 0,3 0,5 -1,5 -1,1 0,1 1,0 5,-1 6,-1 5,2 0,6 -1,7 -4,9 -5,5 -10,3 -9,-3 1,-3 -1,-3 -7,0 -2,1 -5,2 -5,2 -1,0 -3,1 -5,3 -2,2 -4,3 -8,4 -4,0 -4,1 -4,3 0,3 -3,3 -5,-1 -1,-2 -3,-3 -8,-1 -2,1 -5,2 -8,2 -4,0 -5,0 -5,-2 0,-1 2,-2 6,-2 2,0 6,-2 8,-3 2,-1 5,-2 7,-2 2,0 5,-1 7,-2 1,0 3,-1 5,-1 2,0 8,-6 10,-10 2,-3 1,-5 -3,-5 -2,1 -3,0 -3,-1 -1,-2 -5,-4 -9,-3 -3,0 -3,0 -3,-2 2,-4 3,-8 3,-9 -1,-1 -2,-1 -4,-1 -2,0 -6,-3 -6,-5 0,-1 0,-5 -1,-9 v -7 l 6,-5 c 5,-5 5,-5 8,-4 2,0 5,1 7,0 3,0 4,0 5,-3 3,-4 2,-6 -3,-6 -2,0 -4,-1 -4,-1 -1,-1 -2,-1 -4,-1 -4,0 -5,-1 -6,-6 0,-3 -1,-6 -2,-7 0,-3 0,-3 3,-4 1,0 5,0 8,0 5,-1 5,0 6,2 0,2 1,3 3,3 4,0 4,-1 1,-7 -2,-2 -3,-5 -3,-6 0,-1 -1,-4 -2,-5 -1,-3 -2,-5 -1,-6 0,-2 1,-2 5,-2 5,0 5,0 8,-3 3,-3 11,-7 17,-7 1,0 3,-1 4,-1 1,-2 3,-1 7,1 z m 13,94 c 0,2 1,5 2,4 1,0 1,-1 1,-2 0,-3 -2,-4 -3,-2 z M 43,468 c 0,3 -1,2 -5,-1 -3,-3 -4,-5 -2,-6 1,-2 7,4 7,7 z m -24,14 c 1,1 1,2 1,2 0,1 0,2 -1,2 -1,1 -1,0 -1,-2 0,-1 0,-2 1,-2 z m 225,9 c 2,2 1,5 -1,6 -2,2 -2,2 -6,0 l -2,-3 2,-2 c 2,-2 5,-3 7,-1 z m -199,6 c 3,2 2,4 -1,5 -3,0 -7,-3 -5,-5 0,-1 2,-1 6,0 z m 184,0 c 0,1 0,2 -1,2 -1,0 -2,-2 -1,-2 1,-2 2,-1 2,0 z m 45,8 c 4,5 4,6 -2,6 -4,-1 -5,-1 -6,-3 -1,-3 -1,-3 1,-5 3,-3 3,-3 7,2 z m 22,8 c 1,1 4,2 7,3 7,3 9,5 8,7 -1,1 -3,2 -5,3 -3,0 -4,0 -6,-3 -3,-3 -3,-3 -5,-2 -2,2 -5,1 -5,-2 0,-1 -1,-3 -2,-3 -2,-1 -3,-3 -3,-3 0,-2 9,-1 11,0 z m 25,22 c 4,1 7,4 10,8 5,6 5,8 -3,10 -2,1 -5,3 -7,5 -3,4 -4,4 -7,1 -1,-2 -2,-4 -2,-6 0,-3 -1,-6 -1,-7 -2,-3 -2,-3 0,-6 1,-2 2,-4 2,-5 -1,-1 -1,-2 0,-2 1,-2 3,-1 8,2 z m 436,11 c 0,1 -2,3 -5,3 -2,0 -2,0 0,-2 2,-2 5,-3 5,-1 z m -734,4 c 1,2 1,2 -1,3 -3,1 -15,0 -15,-1 0,-1 5,-2 7,-2 1,0 3,0 4,-1 2,-2 4,-1 5,1 z" />
</clipPath>
</defs>
</svg>
</body> </html>
