Kennt ihr euch mit SVG Elementen aus?

Wie werden die geometrischen und die Gestaltungsattribute von SVG-Elementen angegeben? Gibt es mehrere Möglichkeiten?

Answer 1

[regex9]

Entweder du verwendest die entsprechenden Attribute, die es für SVG-Elemente gibt (z.B. cx, cy, fill, usw.)

<svg height="100" width="200">
  <ellipse cx="100" cy="50" fill="red" rx="40" ry="40" />
</svg>

oder du setzt stattdessen CSS dafür ein. Dieses kann entweder über ein style-Attribut oder wie im folgenden Beispiel über einen style-Tag eingebunden werden.

<svg>
  <style type="text/css">
    <![CDATA[
      svg {
        height: 100px;
        width: 200px;
      }
                
      circle {
        cx: 100;
        cy: 50;
        fill: red;
        stroke: black;
        stroke-width: 2;
      }
    ]]>
  </style>
  <circle r="40" />
</svg>

Welche Attribute es gibt und welche Werte für sie valid sind, kannst du in einer Referenz wie der auf MDN nachschlagen.