Heim > Web-Frontend > H5-Tutorial > Ein Beispiel für die Erstellung einfacher Grafiken mit SVG

Ein Beispiel für die Erstellung einfacher Grafiken mit SVG

零下一度
Freigeben: 2017-06-28 10:33:17
Original
1911 Leute haben es durchsucht

Kreis

<svg width="200" height="200" >
    <circle 
        cx="100" 
        cy="100" 
        r="80" 
        stroke="green" 
        stroke-width="4" 
        fill="none"/>
</svg>
Nach dem Login kopieren

Rechteck Rechteck

<svg>
    <rect 
        x="10" 
        y="10" 
        rx="5" 
        ry="5" 
        width="150" 
        height="100" 
        stroke="red" 
        fill="none">
    </rect>
</svg>
Nach dem Login kopieren

Ellipse Ellipse

<svg>
    <ellipse 
        cx="400" 
        cy="60" 
        rx="70" 
        ry="50" 
        stroke="red" 
        fill="none">
    </ellipse>
</svg>
Nach dem Login kopieren

Linie

<svg>
    <line 
        x1="10" 
        y1="120" 
        x2="160" 
        y2="220" 
        stroke="red">
    </line>
</svg>
Nach dem Login kopieren
Nach dem Login kopieren

Polylinie Polylinie

<svg>
    <line 
        x1="10" 
        y1="120" 
        x2="160" 
        y2="220" 
        stroke="red">
    </line>
</svg>
Nach dem Login kopieren
Nach dem Login kopieren

Polygon

<svg>
    <polygon 
        points="250 120 
                300 220
                200 220"
        stroke="red"
        stroke-width="5"
        fill="yellow"
        transform="translate(150 0)">
    </polygon>
</svg>
Nach dem Login kopieren

Pfadpfad

Für Pfaddaten verfügbare Befehle
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

<svg>
    <path 
    d="M250 150 L150 350 L350 350 Z" />
</svg>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEin Beispiel für die Erstellung einfacher Grafiken mit SVG. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage