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

[einsiedler]

Hallo liebe Forumer,

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

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.

Ist dies möglich?

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

MFG der misanthrop

[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

[Gunnar Bittersmann]

@@Matthias Scharwies

… Koordinatensystem des svg-Elements, das seinen Ursprung in der linken oberen Ecke bei (0|0) hat. 

Das ist falsch. (Womit ich inhaltlich falsch meine, nicht nicht falsche Auszeichnung als Code)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-16 -9 16 9">

Nix mit „linker oberer Ecke“.

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

… Koordinatensystem des svg-Elements, das seinen Ursprung in der linken oberen Ecke bei (0|0) hat. 

Das ist falsch. (Womit ich inhaltlich falsch meine, nicht nicht falsche Auszeichnung als Code)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-16 -9 16 9">

Nix mit „linker oberer Ecke“.

Im verlinkten Wiki-Artikel wird auf den Beitrag von Ana Tudor verwiesen:

"The main thing that works differently between HTML elements and SVG elements is the local coordinate system of the element. Every element, whether we're talking about HTML elements or SVG elements, has one. For HTML elements, this coordinate system originates at the 50% 50% point of the element. For SVG elements, the origin is, assuming we have no transform applied on the element itself or any of its ancestors inside the <svg> element, at the 0 0 point of the SVG canvas. This will cause different results following rotate, scale, or skew transforms if the 50% 50% point of the SVG element doesn't coincide with the 0 0 point of the SVG canvas."

Das man das mit dem viewBox-Attribut oder eben mit transform verschieben kann, ist klar.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Im verlinkten Wiki-Artikel wird auf den Beitrag von Ana Tudor verwiesen:

"The main thing that works differently between HTML elements and SVG elements is the local coordinate system of the element. Every element, whether we're talking about HTML elements or SVG elements, has one. For HTML elements, this coordinate system originates at the 50% 50% point of the element. For SVG elements, the origin is, assuming we have no transform applied on the element itself or any of its ancestors inside the <svg> element, at the 0 0 point of the SVG canvas. This will cause different results following rotate, scale, or skew transforms if the 50% 50% point of the SVG element doesn't coincide with the 0 0 point of the SVG canvas."

Ja, und? Ana schreibt da nirgends, dass der Koordinatenursprung bei SVG die linke obere Ecke wäre.

LLAP 🖖