ElementAttribute
Da ich noch nach Wochen feststellen muss, dass die Syntax-Regeln zwischen SVG und CSS immer noch nicht verinnerlicht sind, stelle ich sie hier gegenüber. CDATA stellt eine CSS-konforme Schreibweise innerhalb des SVG im Definitionsabschnitt dar. Generell befinden sich die Vektorgrafiken in HTML-Dateien, konkret in HTX-Dateien inkludiert in der Hauptseite main.php und werden über die ganz normalen Stylesheets formatiert. Zusätzlich besteht halt die Möglichkeit innerhalb des SVG-Modells weitere Formatierungen vorzunehmen.
<defs>
<style type="text/css">
<![CDATA[
.mittig {text-anchor:middle;}
]]>
</style>
</defs>
Diese Gliederung zu komplettieren, bedarf eines längeren Zeitraums. Die Zusammenstellung erfolgt nach Finden und diese einer Gliederung zu unterstellen. Es wird aus diesem Grunde auch nicht vollständig sein. Auch stelle ich als Bedingung, dass deren Eigenschaften von Browsern dargestellt werden müssen. Also, was nicht geht - bleibt außen vor!
| SVG-Sytax | CSS-Syntax und CDATA | |
| Ausschneiden | ||
| GrundformenElemente, GrafikElemente | clip-path | <clipPath id="fd"> ... </clipPath> clip-path: url(#id) übegibt die Referenz auf ein Element, gewöhnlicher Weise <g> oder <use> sowie flächenerzeugende Elemente |
| clip-rule | ||
| Positionierung Dimensionierung | ||
| GrundformenElemente, GrafikElemente | ||
| cx | cx="10" horizontaler Kreis-/Ellipsenmittelpunk | |
| cx=".5" Position des Verlaufszentrums für
<radialgradient cx=".5"> 0 bis 1 oder % |
||
| cy | cy="10" vertikaler Kreis-/Ellipsenmittelpunk | |
| cy=".5" Position des Verlaufszentrums für
<radialgradient cy=".5"> 0 bis 1 oder % |
||
| fx | fx=".5" Verschiebung des Verlaufszentrums für
<radialgradient fx=".5"> 0 bis 1 oder % |
|
| fy | fy="50%" Verschiebung des Verlaufszentrums für
<radialgradient fy=".5"> 0 bis 1 oder % |
|
| height | Rechteckhöhe height="10" | height:10px; |
| points | absolute x-/y-Positionierung für Polygon und Polyline | |
| r | KreisRadius r="10" | kein Äquivalent nur über Eckengestaltung:
border-radius: 30px; wenn Rechteck < 60x60 |
| rx | EllipsenRadius rx="10" horizontal | |
| ry | EllipsenRadius ry="10" vertikal | |
| viewBox | Änderung des Koordinatensystems für alle Elemente
|
|
| width | Rechteckbreite width="10" | width:10px; |
| x | horizontale Position x="10" | left:10px; |
| x1 x2 | Attribute des <line> Elementes horizontaler Start- und Endpunkt (absolut) |
|
| Attribute des <linearGradient> Elementes
horizontaler Start- und Endpunkt des Verlaufsbereiches, als Dezimalbruch oder Prozentangabe |
||
| y | vertikale Position y="10" vertikaler Start- und Endpunkt (absolut) |
top:10px; |
| y1 y2 | Attribute des <line> Elementes | |
| Attribute des <linearGradient> Elementes
vertikaler Start- und Endpunkt des Verlaufsbereiches, als Dezimalbruch wie auch Prozentangabe. |
||
| Referenzierung | ||
| alle Elemente | ||
| class="Klassenname" | class="Klassenname" | |
| Striche und Füllungen | ||
| GrundformenElemente (soweit eine Eigenschaft auch angewendet werden kann. Eckenform für einen Kreis wäre einfach Quatsch und ein Strich <line> hat auch keine Füllung!), GrafikElemente <text> <path> | ||
| Familienname | stroke und fill | CSS-Notation nur für SVG-Elemente |
| Farbe | stroke="#000" "#000" "Black" "rgb(0,0,0)" "rgba(0,0,0,1)" | stroke:#000; |
| Strichstärke | stroke-width="Zahl" | stroke:Zahl; |
| separiert | stroke-dasharray="10%,4%" | stroke-dasharray:10%,4%; |
| Linienende | stroke-linecap="butt" || "round" || "square" | stroke-linecap:butt; || :round; || :square; |
| Eckenform | stroke-linejoin="miter" "bevel" "round" | stroke-linejoin:miter; || :bevel; || :round; |
| Transparenz | stroke-opacity="0" bis "1" | stroke-opacity=.55; z.B. |
| Farbe | fill="rgb(255,255,0)" || fill="#ff0" || fill="yellow" | fill:yellow; usw. |
| Transparenz | fill-opacity="0" bis "1" | fill-opacity:1; |
| Freistellen | fill-rule="nonzero" || "evenodd" | fill-rule:nonzero; || :evenodd; |
| Transformationen | ||
| Transformation geht vom transformierenden Element (lokales Koordinatensystem) links oben aus. | Transformation geht vom Elementmittelpunkt aus, soweit transform-origin: nichts abweichendes bestimmt. | |
| Startpunkt ändern | viewBox, transform="ref(svg, x, y)" | transform-origin:x y; |
| rotate | transform="rotate(90)"
optionale Angabe der Drehung um die x-/y-Koordinaten transform="rotate(zahl x y) |
transform:rotate(90deg); |
| scale | transform="scale(2)" | (1, 2)
|
transform:scale(2); |
| translate | transform="translate(10)" | (10 10)
|
transform:translate(10px) | (10px, 10px); |
| skew | transform="skewX(45)"
transform="skewY(30)" |
transform:skewX(45deg);
transform:skewY(-45deg); |
| räumliche Darstellung |
|
perspective()
Um bei Attributen, die eine z-Achse verschieben können, eine Wirkung zu erzeugen. |