SVG-Zeichenfunktion: SVG realisiert das Zeichnen einer Blume (mit Code)

Der Inhalt dieses Artikels befasst sich mit der SVG-Zeichenfunktion: SVG realisiert das Zeichnen einer Blume (mit Code), die einen gewissen Referenzwert hat. Ich hoffe, dass sie für Sie hilfreich ist. Ein wichtiger Unterschied zwischen dem

5ba626b379994d53f7acf72a64f9b697-Markup und SVG und VML besteht darin, dass 5ba626b379994d53f7acf72a64f9b697 über eine JavaScript-basierte Zeichen-API verfügt, während SVG und VML ein XML-Dokument zur Beschreibung des Zeichnens verwenden.

1. Erstellen Sie eine XXX.svg-Datei (diese Datei erstellt einen roten Kreis)

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

SVG ist in XML geschrieben und speichert unter .svg-Datei. Die Datei .svg muss in der Datei .html referenziert werden

2. SVG in HTML

1) Verwenden Sie das Tag d8e2720730be5ddc9c2a3782839e8eb6: wird von allen gängigen Browsern unterstützt und ermöglicht die Verwendung von Skripten

Kommentare: bei Einbettung in einen HTML-Code Seite Die Verwendung des d8e2720730be5ddc9c2a3782839e8eb6-Tags beim Arbeiten mit SVG wird vom Adobe SVG Viewer empfohlen! Wenn Sie jedoch gültiges XHTML erstellen müssen, können Sie d8e2720730be5ddc9c2a3782839e8eb6 nicht verwenden. Es gibt kein d8e2720730be5ddc9c2a3782839e8eb6-Tag in irgendeiner HTML-Spezifikation.

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

pluginspage: Verweist auf die URL zum Herunterladen des Plug-ins

2) Verwenden Sie das Objekt-Tag: HTML4-Standard-Tag, das von allen neueren Browsern unterstützt wird, nicht Erlauben Sie die Verwendung von Skripten

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Codebasis: Zeigen Sie auf die URL, um das Plug-in herunterzuladen

3) Iframe-Tag: (empfohlen)

<iframe src="rect.svg" width="300" height="100">
</iframe>

3. SVG-Form

1. Rechteck80ff875251ab5a90c6ffa49ed85e5688

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

Stil Attribut wird verwendet, um CSS-Eigenschaften zu definieren

Stroke-Width-Attribut definiert die Breite des rechteckigen Rahmens

Stroke-Attribut definiert die Farbe des rechteckigen Rahmens

2 ;

3. Ellipse< ;ellipse>

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

Die Ellipse hat hier nur einen Punkt (mathematische Ellipsen haben normalerweise zwei Brennpunkte)

cx-Attribut definiert die x-Koordinate des Punktes

cy-Attribut Definiert die Y-Koordinate des Punktes

rx-Attribut definiert den horizontalen Radius (die Hälfte der Linie, die durch die beiden Brennpunkte verläuft)

ry-Attribut definiert der vertikale Radius

4. Linie e785e40170d80ec0833f2f6ee57351dc

6. Polyliniec3a67d7f209b7197095528562338c403

7. path>

in a6a892bd01440374d7381745c7181cd9-Elements in SVG und Einführung in das Marker-Attribut

So implementieren Sie SVG Koordinatensystemtransformation (mit Code)

Das obige ist der detaillierte Inhalt vonSVG-Zeichenfunktion: SVG realisiert das Zeichnen einer Blume (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!