Was ist SVG? Häufig verwendete SVG-Methoden (mit Code)-H5-Tutorial-php.cn

Der Inhalt dieses Artikels befasst sich mit der Frage: Was ist SVG? Die häufig verwendeten SVG-Methoden (mit Code) haben einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Was ist SVG?
SVG steht für Scalable Vector Graphics
SVG wird verwendet, um vektorbasierte Grafiken für das Web zu definieren.
SVG verwendet das XML-Format, um Grafiken zu definieren.
SVG-Bilder werden vergrößert oder in der Größe geändert. Es entsteht kein Grafikverlust Qualität
SVG ist ein Standard des World Wide Web Consortium
SVG ist in W3C-Standards wie DOM und XSL integriert

Im Vergleich zu anderen Bildformaten bietet die Verwendung von SVG folgende Vorteile:
SVG kann von vielen Tools (z. B. Notepad) gelesen und geändert werden
SVG ist kleiner und komprimierbarer als JPEG- und GIF-Bilder.
SVG ist skalierbar
SVG-Bilder können mit hoher Qualität in jeder Auflösung gedruckt werden
SVG kann ohne Verlust der Bildqualität vergrößert werden
Text in SVG-Bildern ist skalierbar, auswählbar und durchsuchbar (ideal zum Erstellen von Karten)
SVG kann mit Java-Technologie ausgeführt werden
SVG ist ein offener Standard

SVG-Dateien sind reines XML

Codestruktur

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
 
<p>This is an HTML paragraph</p>
 
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
 
</body>
</html>

Nach dem Login kopieren

Die Verwendung und Bedienung von Von SVG bereitgestellte vordefinierte Formelemente:

-Tags können zum Erstellen von Rechtecken sowie Varianten von Rechtecken verwendet werden

<rect x="20" y="20" rx="20" ry="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>

Nach dem Login kopieren

Code-Erklärung:
1) Die Breiten- und Höhenattribute des Rect-Elements können die Höhe und Breite des Rechtecks definieren
2) Das Stilattribut wird zum Definieren von CSS-Eigenschaften verwendet
3 ) Das Fill-Attribut von CSS definiert die Füllfarbe des Rechtecks (RGB-Wert, Farbname oder Hexadezimalwert)
4) Das Stroke-Width-Attribut von CSS definiert die Breite des Rechteckrahmens
5 ) Das Stroke-Attribut von CSS definiert die Farbe von Das Rechteckrand
6)x-Attribut definiert die linke Position des Rechtecks (z. B. definiert x="0", dass der Abstand vom Rechteck zur linken Seite des Browserfensters 0px)
7)y beträgt Das Attribut definiert die obere Position des Rechtecks (z. B. definiert y="0" den Abstand vom Rechteck zum oberen Rand des Browserfensters auf 0 Pixel)
8) Das Fill-Opacity-Attribut von CSS definiert die Transparenz der Füllfarbe (Der zulässige Bereich ist: 0 - 1)
9) Das Stroke-Opacity-Attribut von CSS definiert die Transparenz der Strichfarbe (der zulässige Bereich ist: 0 - 1)
10) Die Attribute rx und ry können Stellen Sie sicher, dass das Rechteck abgerundete Ecken hat.

Tag kann verwendet werden, um einen Kreis zu erstellen

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

Nach dem Login kopieren

Code-Erklärung:
1) Die cx- und cy-Attribute definieren die x- und y-Koordinaten des Punktes. Wenn cx und cy weggelassen werden, wird der Mittelpunkt des Kreises auf (0, 0) gesetzt
2)r Das r-Attribut definiert den Radius des Kreises.

-Tag kann zum Erstellen von Ellipsen verwendet werden

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

Nach dem Login kopieren

Code-Erklärung:
1 )cx-Attribut definiert die x-Koordinate des Punkts
2) cy-Attribut definiert die y-Koordinate des Punkts
3) rx-Attribut definiert den horizontalen Radius
4) ry-Attribut definiert den vertikalen Radius

-Tag wird zum Erstellen von Linien verwendet

<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

Nach dem Login kopieren

Code-Erklärung:
1) Das x1-Attribut definiert den Anfang der Linie auf der x-Achse
2) Das y1-Attribut definiert den Anfang der Linie auf der y-Achse
3) Das x2-Attribut definiert das Ende der Linie auf der x-Achse
4) Das y2-Attribut definiert das Ende der Linie auf der y-Achse

-Tag wird verwendet, um Grafiken mit nicht weniger als drei Seiten zu erstellen

<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

Nach dem Login kopieren

Code-Erklärung:
1) Das Punkteattribut definiert die x- und y-Koordinaten jeder Ecke des Polygons

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"  style="fill:white;stroke:red;stroke-width:2"/>

Nach dem Login kopieren

Code-Erklärung: 1) Das Punkteattribut definiert die x- und y-Koordinaten jeder Ecke jedes Liniensegments

Das Tag wird verwendet, um den Pfad zu definieren

<path d="M250 150 L150 350 L350 350 Z" />

Nach dem Login kopieren

Die folgenden Befehle können für den Pfad verwendet werden Daten:

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

Nach dem Login kopieren

Kommentar: Alle oben genannten Befehle erlauben Kleinbuchstaben. Großbuchstaben stehen für absolute Positionierung, Kleinbuchstaben für relative Positionierung

SVG-Filter Verfügbare Filter sind:

feBlendfeColorMatrixfeComponentTransfer

feComposite

feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feT ile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Gaussian BlurGaußian Blur

标签用来定义 SVG 滤镜。标签使用必需的 id 属性来定义向图形应用哪个滤镜？
标签必须嵌套在标签内。标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>

Nach dem Login kopieren

代码解释：
1) 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
2)filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
3)滤镜效果是通过标签进行定义的。fe 后缀可用于所有的滤镜
4) 标签的 stdDeviation 属性可定义模糊的程度
5)in="SourceGraphic" 这个部分定义了由整个图像创建效果

可用来定义 SVG 的线性渐变

标签必须嵌套在的内部。标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可被定义为水平、垂直或角形的渐变：
1)当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
2)当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
3)当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"  style="fill:url(#orange_red)"/>

Nach dem Login kopieren

代码解释：
1) 标签的 id 属性可为渐变定义一个唯一的名称
2)fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
3) 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
4)渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个标签来规定。offset 属性用来定义渐变的开始和结束位置。

用来定义放射性渐变

标签必须嵌套在中。标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。

<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>

Nach dem Login kopieren

代码解释：
1) 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个标签来规定。offset 属性用来定义渐变的开始和结束位置。

在svg中提供了如g元素这样的将多个元素组织在一起的元素。由g元素编组在一起的可以设置相同的颜色，可以进行坐标变

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

  <g fill="dodgerblue">
    <rect x="10" y="10" width="40" height="40" ry="10" />
    <rect x="80" y="80" width="40" height="40" ry="10" />
    <rect x="150" y="150" width="40" height="40" ry="10" />
  </g>

</svg>

Nach dem Login kopieren