SVG Infos <rect> , <text>, <stroke> auch in externens CSS integrierbar?

[Matthias Scharwies]

Servus!

ist es möglich <rect> oder (vorallem) <text> Infos ins externe CSS einzubauen oder muss das im html innerhalb von <svg> stehen?

Da muss man jetzt mal ein bisschen in die Theorie und die Begrifflichkeiten:

<rect x="0" y="0" height="100" width="100"/>
<rect x="0" y="0" height="100" width="100" fill="white" stroke="green" stroke-width="1"/>

SVG enthält XML-Attribute, von denen einige (noch) im SVG-Element notiert werden müssen. Daneben gibt es Präsentationsattribute, die du auch im CSS notieren (und animieren) kannst.

In SVG2 sollen auch die Größenmaße Präsentationsattribute werden:

• Präsentationsattribute in SVG 2

Das Live-Beispiel funktioniert im Chrome (und wsl. Safari, nicht jedoch im Firefox und schon gar nicht im IE)

Meine Frage ist deshalb weil ich im <text> eine Drehung mit transform:rotate eingebaut habe wobei ich diese später bei einem Breakpunkt bei @media screen and (max-width: 28.125em) diese drehung wieder rückgängig machen möchte.

In dieser Liste ist transform nicht aufgeführt. Probier's doch mal aus und berichte.

Achtung: SVG/Tutorials/SVG_mit_CSS_transformieren

CSS-Transform ≠ SVG-Transform

Trotz ihrer Ähnlichkeit gibt es gravierende Unterschiede in den Koordinatensystemen, auf denen die Transformationen basieren. Während jedes HTML-Element sein internes Koordinatensystem hat, dassen Ursprung bei (50%, 50%) liegt, beziehen sich SVG-Elemente immer auf das Koordinatensystem des svg-Elements, das seinen Ursprung in der linken oberen Ecke bei (0|0) hat. 

Ist es mäglich ein svg bei Bildschirmverkleinerungen skalierbar zu machen?

Ja, indem du dem svg eine relative Größe (100%) anstelle fester Pixelwerte gibst. SVG heißt doch skalierbar.

Herzliche Grüße

Matthias Scharwies