SVG Rect ignoriert die Höhe?

8

Hier ist eine Arbeitsdemo eines Rechtecks. Ich möchte die height -Eigenschaft nach css verschieben und nun, es funktioniert nicht und gibt mir ein Leerzeichen. Es passiert in Firefox und Chrome.

Gibt es einen anderen Namen dafür? Ich verstehe nicht, warum ich keine CSS-Datei verwenden kann. Die Füllfarbe funktioniert.

Arbeitsbeispiel.

css:

%Vor%

html:

%Vor%     
BruteCode 17.01.2013, 15:58
quelle

3 Antworten

13

In SVG sind die x, y, Breite und Höhe von <rect> -Elementen Attribute und nicht CSS-Eigenschaften . Nur CSS-Eigenschaften können mit CSS formatiert werden.

    
Robert Longson 17.01.2013, 16:14
quelle
5

Das width eines <rect> -Elements ist keine CSS-Eigenschaft in SVG, es kann nur als Attribut verwendet werden. Es ist zum Beispiel wie das size eines <select> -Elements in HTML. Sie können es nur als Attribut festlegen.

    
Thomas W 17.01.2013 16:11
quelle
3

SVG bietet keine direkte Unterstützung für CSS zum Festlegen von Formdimensionen.

Es gibt jedoch eine Problemumgehung für Rectures, die auch zum Generieren von horizontalen und vertikalen Linien verwendet werden können:

  • Legen Sie Breite und Höhe auf 1 fest und verwenden Sie die CSS-Transformation: scale (width, height)
  • Geben Sie keine x, y-Position an und verwenden Sie transform: translate (x, y)

z. B.

%Vor% %Vor%
    
Ian.mc 20.02.2015 06:57
quelle

Tags und Links