Beispiel:CSS-custom-props-5.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:SELFHTML-Beispiel-Grundlayout.css" >
<title>SVG mit custom properties</title>
<style>
:root {
--color-1: #c32e04;
--color-2: hsla(201, 50%, 38%, 1);
--color-3: hsla(201, 50%, 38%, .8);
--color-4: hsla(201, 50%, 38%, .6);
--color-5: hsla(201, 50%, 38%, .4);
}
.ball {
--distance: calc(var(--d, 1) * (2.5 * var(--radius)));
--radius: 20px;
cx: var(--distance);
cy: var(--radius);
r: var(--radius);
}
.ball:nth-child(1) {
fill: var(--color-1);
}
.ball:nth-child(2) {
fill: var(--color-2);
--d: 2;
}
.ball:nth-child(3) {
fill: var(--color-3);
--d: 3;
}
.ball:nth-child(4) {
fill: var(--color-4);
--d: 4;
}
.ball:nth-child(5) {
fill: var(--color-5);
--d: 5;
}
@keyframes moveCircle {
50% {
cy: 150px;
r: 13px;
}
}
</style>
</head>
<body>
<h1>SVG mit <em>custom properties</em></h1>
<p>Da alle Objekte die gleichen Abstände zueinander haben, können die x-Koordinaten vom CSS selbst berechnet werden.</p>
<svg width="350" height="250">
<circle class="ball" />
<circle class="ball" />
<circle class="ball" />
<circle class="ball" />
<circle class="ball" />
</svg>
</body></html>