Straturi de Mască SVG CSS
Măștile pentru imagini pot fi create și în SVG.
Această sarcină îi revine elementului <mask>, care aplică o mască unei imagini și îți permite să creezi diferite straturi de mască pentru ea.
Strat de Mască SVG - Cerc
Un cerc se desenează cu elementul SVG <circle>.
Exemplu
Aici stratul de mască ia forma unui cerc:
Prompt
Creează un element SVG (600x400) cu o mască care folosește un cerc (rază 150, centrat la 200,200) umplut cu alb, aplicat unei imagini peisagistice (folosește "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask Layer - Circle</title>
</head>
<body>
<h2>SVG Mask Layer - Circle</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<circle r="150" cx="200" cy="200" fill="#ffffff" />
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
Strat de Mască SVG - Elipsă
O elipsă se desenează cu elementul SVG <ellipse>.
Exemplu
Aici stratul de mască ia forma unei elipse:
Prompt
Creează un element SVG (600x400) cu o mască care folosește o elipsă (cx=220, cy=150, rx=200, ry=100) umplută cu alb, aplicată unei imagini peisagistice (folosește "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask Layer - Ellipse</title>
</head>
<body>
<h2>SVG Mask Layer - Ellipse</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<ellipse cx="220" cy="150" rx="200" ry="100" fill="#ffffff" />
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
Strat de Mască SVG - Triunghi
Orice formă cu trei sau mai multe laturi se desenează cu elementul SVG <polygon>.
Exemplu
Aici stratul de mască ia forma unui triunghi:
Prompt
Creează un element SVG (600x400) cu o mască care folosește un poligon în formă de triunghi (puncte: 200 0, 400 400, 0 400) umplut cu alb, aplicat unei imagini peisagistice (folosește "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask Layer - Triangle</title>
</head>
<body>
<h2>SVG Mask Layer - Triangle</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
Mască SVG - Stea
Un strat de mască în formă de stea este o altă sarcină pentru elementul SVG <polygon>.
Exemplu
Aici stratul de mască ia forma unei stele:
Prompt
Creează un element SVG (600x400) cu o mască care folosește un poligon în formă de stea (puncte: 100,10 40,198 190,78 10,78 160,198) umplut cu alb, aplicat unei imagini peisagistice (folosește "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask - Star</title>
</head>
<body>
<h2>SVG Mask - Star</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
Mască SVG - Cercuri Multiple
O singură mască poate conține mai multe cercuri, fiecare în propria poziție.
Exemplu
Aici trei cercuri formează împreună stratul de mască:
Prompt
Creează un element SVG (600x400) cu o mască care folosește trei cercuri albe în poziții diferite (cx=75 cy=75 r=75, cx=80 cy=260 r=75, cx=270 cy=160 r=75), aplicată unei imagini peisagistice (folosește "img_5terre.jpg").
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mask - Multiple Circles</title>
</head>
<body>
<h2>SVG Mask - Multiple Circles</h2>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1">
<circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
<circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
<circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
</body>
</html>
Toate Proprietățile CSS de Mascare
Toate proprietățile CSS de mascare sunt listate mai jos:
mask-clip— setează zona afectată de o imagine de mască.mask-composite— setează operația de compunere dintre stratul de mască curent și straturile de mască de sub el.mask-image— numește imaginea care servește drept strat de mască al unui element.mask-mode— decide dacă imaginea unui strat de mască acționează ca mască de luminanță sau ca mască alfa.mask-origin— setează poziția de la care pornește imaginea unui strat de mască.mask-position— setează locul în care începe imaginea unui strat de mască.mask-repeat— controlează modul în care se repetă imaginea unui strat de mască.mask-size— setează cât de mare este imaginea unui strat de mască.mask-type— decide dacă un element SVG<mask>acționează ca mască de luminanță sau ca mască alfa.