Beispiel:CSS-custom-props-5.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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>