Wie HTML5 SVG verwendet (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von SVG (Codebeispiel) in HTML5. Ich hoffe, dass er für Sie hilfreich ist.

Codeoptimierung ist immer ein ewiges Bedürfnis von Programmierern, und die sinnvolle Verwendung von SVG-Bildern als Ersatz für einige PNG/JPG-Bilder und andere Formatbilder ist ein wichtiger Teil der Front-End-Optimierung Schauen wir uns also zunächst die Vorteile von SVG-Bildern an:

• 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 in jeder Auflösung in hoher Qualität gedruckt werden

• SVG kann vergrößert werden, ohne dass die Bildqualität verloren geht

• Text in SVG-Bildern ist optional und durchsuchbar (ideal zum Erstellen von Karten)

• SVG kann mit ausgeführt werden Java-Technologie

• SVG ist ein offener Standard

• SVG-Datei Es ist reines XML

A ein paar kleine Beispiele für SVG-Bilder:

Werfen wir einen Blick auf den dritten Code eines Share-Symbols:

<svg>
  <g>
    <path></path>
    <path></path>
  </g>
</svg>

Studenten Wer SVG nicht kennt, muss jetzt Fragezeichen im Gesicht haben, genau wie beim ersten Mal, als ich sie sah. Keine Sorge, fangen wir bei den Grundlagen an.

Was ist SVG?

SVG ist ein Bildformat, das auf XML-Syntax basiert, und sein vollständiger Name ist Scalable Vector Graphics. Andere Bildformate basieren auf der Pixelverarbeitung, und SVG beschreibt die Form des Bildes. Es handelt sich also im Wesentlichen um eine Textdatei mit geringer Größe, die nicht verzerrt wird, egal wie oft sie vergrößert wird. Darüber hinaus ist SVG ein Standard des World Wide Web Consortium und SVG ist in W3C-Standards wie DOM und XSL integriert.

Wie benutzt man?

In HTML5 können Sie SVG-Elemente direkt in HTML-Seiten einbetten, wie zum Beispiel das kleine rote Herz oben:

  <svg>
    <defs>
      <rect></rect>
      <mask>
        <use></use>
    </mask>
    </defs>
    <g>
      <use></use>
      <path></path>
    </g>
  </svg>

SVG-Code kann auch in eine Datei mit der Endung .svg geschrieben werden Datei und fügen Sie dann die Webseite mit Tags wie <img alt="Wie HTML5 SVG verwendet (Codebeispiel)" >, <object></object>, <embed></embed> und <iframe></iframe> ein.

<img  alt="Wie HTML5 SVG verwendet (Codebeispiel)" >
<object></object>
<embed>
<iframe></iframe></embed>

CSS kann auch SVG verwenden

.logo {
  background: url(logo.svg);
}

SVG-Dateien können auch in die BASE64-Kodierung konvertiert und dann als Daten auf die Webseite geschrieben werden URI.

<img  alt="Wie HTML5 SVG verwendet (Codebeispiel)" >

SVG-Syntax

1.

SVG-Code Platzieren Sie es im Top-Level-Tag

<svg>
  <circle></circle>
</svg>

Wenn Sie nur einen Teil des SVG-Bildes anzeigen möchten, müssen Sie das viewBox-Attribut angeben. Der Wert des Attributs

<svg>
  <circle></circle>
</svg>

besteht aus vier Zahlen, die die Abszisse und Ordinate der oberen linken Ecke sowie die Breite und Höhe des Ansichtsfensters darstellen. Im obigen Code ist das SVG-Bild 100 Pixel breit x 100 Pixel hoch und das viewBox-Attribut gibt an, dass das Ansichtsfenster am Punkt (50, 50) beginnt. Was Sie also tatsächlich sehen, ist der Viertelkreis in der unteren rechten Ecke.

Beachten Sie, dass das Ansichtsfenster in den Raum passen muss, in dem es sich befindet. Im obigen Code beträgt die Größe des Ansichtsfensters 50 x 50. Da die Größe des SVG-Bilds 100 x 100 beträgt, wird das Ansichtsfenster auf die Größe des SVG-Bilds vergrößert, d. h. es wird viermal vergrößert.

Wenn Sie das Breitenattribut und das Höhenattribut nicht angeben und nur das ViewBox-Attribut angeben, entspricht dies der Angabe nur des Seitenverhältnisses des SVG-Bilds. In diesem Fall entspricht die Standardgröße des SVG-Bildes der Größe des darin enthaltenen HTML-Elements.

2. Tag

<svg>
  <circle></circle>
  <circle></circle>
  <circle></circle>
</svg>

Der obige Code definiert drei Kreise. Die cx-, cy- und r-Attribute der -Beschriftung sind die Abszisse, die Ordinate bzw. der Radius, und die Einheit ist Pixel. Die Koordinaten beziehen sich auf den Ursprung der oberen linken Ecke der

class-Attribut wird verwendet, um die entsprechende CSS-Klasse anzugeben.

.red {
  fill: red;
}

.fancy {
  fill: none;
  stroke: black;
  stroke-width: 3pt;
}

Die CSS-Eigenschaften von SVG unterscheiden sich von denen von Webelementen.

Füllung: Füllfarbe
Strich: Strichfarbe
Strichbreite: Rahmenbreite

3. Tag
< Das Tag ;line> wird zum Zeichnen einer geraden Linie verwendet.

<svg>
  <line></line>
</svg>

Im obigen Code stellen das x1-Attribut und das y1-Attribut des -Tags die Abszisse und die Ordinate des Startpunkts des Liniensegments dar, und das x2-Attribut stellt die Abszisse und die Ordinate dar des Endpunkts des Liniensegments; Das Attribut repräsentiert den Stil des Liniensegments.

4. -Tag
Das Punkteattribut von

<svg>
  <polyline></polyline>
</svg>

gibt die Koordinaten jedes Endpunkts an. Die Abszisse und Ordinate werden durch Kommas und Punkte durch Leerzeichen getrennt.

5. 标签
标签用于绘制矩形。

<svg>
  <rect></rect>
</svg>

的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；width属性和height属性指定了矩形的宽度和高度（单位像素）。

6. 标签
标签用于绘制椭圆。

<svg>
  <ellipse></ellipse>
</svg>

的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。

7. 标签
标签用于绘制多边形。

<svg>
  <polygon></polygon>
</svg>

的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

8. 标签

标签用于制路径。

<svg>
<path></path>
</svg>

的d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。

M：移动到（moveto）
L：画直线到（lineto）
Z：闭合路径

9. 标签

标签用于绘制文本。

<svg>
  <text>肆客足球</text>
</svg>

的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。

10. 标签

标签用于复制一个形状。

<svg>
  <circle></circle>

  <use></use>
  <use></use>
</svg>

的href属性指定所要复制的节点，x属性和y属性是左上角的坐标。另外，还可以指定width和height坐标。

11. 标签

标签用于将多个形状组成一个组（group），方便复用。

<svg>
  <g>
    <text>圆形</text>
    <circle></circle>
  </g>

  <use></use>
  <use></use>
</svg>

12. 标签

标签用于自定义形状，它内部的代码不会显示，仅供引用。

<svg>
  <defs>
    <g>
      <text>圆形</text>
      <circle></circle>
    </g>
  </defs>

  <use></use>
  <use></use>
  <use></use>
</svg>

13. 标签
标签用于自定义一个形状，该形状可以被引用来平铺一个区域。

<svg>
  <defs>
    <pattern>
      <circle></circle>
    </pattern>
  </defs>
  <rect></rect>
</svg>

上面代码中，标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。

14. 标签
标签用于插入图片文件。

<svg>
  <image></image>
</svg>

上面代码中，的xlink:href属性表示图像的来源。

15. 标签
标签用于产生动画效果。

<svg>
  <rect>
    <animate></animate>
  </rect>
</svg>

上面代码中，矩形会不断移动，产生动画效果。

的属性含义如下。

attributeName：发生动画效果的属性名。
from：单次动画的初始值。
to：单次动画的结束值。
dur：单次动画的持续时间。
repeatCount：动画的循环模式。
可以在多个属性上面定义动画。

<animate></animate>
<animate></animate>

16. 标签
标签对 CSS 的transform属性不起作用，如果需要变形，就要使用标签。

<svg>
  <rect>
    <animatetransform></animatetransform>
  </rect>
</svg>

上面代码中，的效果为旋转（rotate），这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400 400"表示结束时，角度为360，围绕(400, 400)旋转。

JavaScript 操作SVG

1. DOM操作
如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。

<svg>
  <circle></circle>
<svg></svg></svg>

上面代码插入网页之后，就可以用 CSS 定制样式。

circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #f8f8f8;
}

然后，可以用 JavaScript 代码操作 SVG。

var mycircle = document.getElementById('mycircle');

mycircle.addEventListener('click', function(e) {
  console.log('circle clicked - enlarging');
  mycircle.setAttribute('r', 60);
}, false);

上面代码指定，如果点击图形，就改写circle元素的r属性。

2. 获取 SVG DOM
使用<object></object>、<iframe></iframe>、<embed></embed>标签插入 SVG 文件，可以获取 SVG DOM。

var svgObject = document.getElementById('object').contentDocument;
var svgIframe = document.getElementById('iframe').contentDocument;
var svgEmbed = document.getElementById('embed').getSVGDocument();

注意，如果使用&lt;img alt=&quot;Wie HTML5 SVG verwendet (Codebeispiel)&quot; &gt;标签插入 SVG 文件，就无法获取 SVG DOM。

3. 读取 SVG 源码
由于 SVG 文件就是一段 XML 文本，因此可以通过读取 XML 代码的方式，读取 SVG 源码。

<p>
  <svg>
    <!-- svg code -->
  </svg>
</p>

使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。

var svgString = new XMLSerializer()
  .serializeToString(document.querySelector('svg'));

4. SVG 图像转为 Canvas 图像
首先，需要新建一个Image对象，将 SVG 图像指定到该Image对象的src属性。

var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});

var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg);

img.src = url;

然后，当图像加载完成后，再将它绘制到<canvas></canvas>元素。

img.onload = function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
};

小结

SVG能做的远不止这些，利用SVG做的动画效果，文字效果我们以后给大家详细讲解，今天就先到这里吧。

Das obige ist der detaillierte Inhalt vonWie HTML5 SVG verwendet (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!