Comment HTML5 utilise SVG (exemple de code)

Le contenu de cet article explique comment utiliser SVG (exemple de code) en HTML5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

L'optimisation du code est un besoin toujours en constante évolution des programmeurs, et l'utilisation raisonnable d'images SVG pour remplacer certaines images PNG/JPG et autres formats est une partie importante de l'optimisation frontale depuis. est l'optimisation, Voyons d'abord les avantages des images SVG :

• SVG peut être lu et modifié par de nombreux outils (tels que le Bloc-notes)

• SVG est plus petit et plus compressible que les images JPEG et GIF.

• SVG est évolutif

• Les images SVG peuvent être imprimées en haute qualité à n'importe quelle résolution

• SVG peut être agrandi sans perdre la qualité de l'image

• Le texte des images SVG est facultatif et consultable (idéal pour créer des cartes)

• SVG peut fonctionner avec Technologie Java

• SVG est un standard ouvert

• Fichier SVG C'est du XML pur

A quelques petits exemples d'images SVG :

Jetons un coup d'œil au troisième Le code pour une icône de partage :

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

Les étudiants qui ne connaissent pas SVG doivent avoir des points d'interrogation sur le visage maintenant, comme la première fois que je les ai vus. Ne vous inquiétez pas, commençons par les bases.

Qu'est-ce que SVG ?

SVG est un format d'image basé sur la syntaxe XML et son nom complet est Scalable Vector Graphics. D'autres formats d'image sont basés sur le traitement des pixels, tandis que SVG est une description de la forme d'une image, il s'agit donc essentiellement d'un fichier texte de petite taille et ne sera pas déformé quel que soit le nombre de fois qu'il est agrandi. De plus, SVG est une norme du World Wide Web Consortium et SVG est intégré aux normes du W3C telles que DOM et XSL.

Comment utiliser ?

En HTML5, vous pouvez intégrer des éléments SVG directement dans les pages HTML, comme le petit cœur rouge ci-dessus :

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

Le code SVG peut également être écrit avec une terminaison . fichier, puis insérez-le dans la page Web à l'aide de balises telles que <img alt="Comment HTML5 utilise SVG (exemple de code)" >, <object></object>, <embed></embed> et <iframe></iframe>.

<img  alt="Comment HTML5 utilise SVG (exemple de code)" >
<object></object>
<embed>
<iframe></iframe></embed>

CSS peut également utiliser SVG

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

Les fichiers SVG peuvent également être convertis en codage BASE64 puis écrits en tant qu'URI de données Page web.

<img  alt="Comment HTML5 utilise SVG (exemple de code)" >

Syntaxe SVG

1.

Si vous souhaitez afficher uniquement une partie de l'image SVG, vous devez spécifier l'attribut viewBox. La valeur de l'attribut

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

comporte quatre nombres, qui sont l'abscisse et l'ordonnée du coin supérieur gauche, ainsi que la largeur et la hauteur de la fenêtre. Dans le code ci-dessus, l'image SVG mesure 100 pixels de large x 100 pixels de haut et l'attribut viewBox spécifie que la fenêtre commence à partir du point (50, 50). Donc, ce que vous voyez réellement, c'est le quart de cercle dans le coin inférieur droit.

Notez que la fenêtre doit s'insérer dans l'espace dans lequel elle se trouve. Dans le code ci-dessus, la taille de la fenêtre d'affichage est de 50 x 50. Puisque la taille de l'image SVG est de 100 x 100, la fenêtre d'affichage sera agrandie pour s'adapter à la taille de l'image SVG, c'est-à-dire qu'elle sera agrandie quatre fois.

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

Si vous ne spécifiez pas l'attribut width et l'attribut height et spécifiez uniquement l'attribut viewBox, cela équivaut à donner uniquement le rapport hauteur/largeur de l'image SVG. Dans ce cas, la taille par défaut de l'image SVG sera égale à la taille de l'élément HTML qu'elle contient.

2. La balise

Le code ci-dessus définit trois cercles. Les attributs cx, cy et r de l'étiquette sont respectivement l'abscisse, l'ordonnée et le rayon, et l'unité est le pixel. Les coordonnées sont relatives à l'origine du coin supérieur gauche du canevas

class est utilisé pour spécifier la classe CSS correspondante.

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

Les propriétés CSS de SVG sont différentes de celles des éléments Web.

remplissage : couleur de remplissage

.red {
  fill: red;
}

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

trait : couleur du trait

largeur du trait : largeur de la bordure

3. ;line> est utilisé pour tracer une ligne droite.

Dans le code ci-dessus, l'attribut x1 et l'attribut y1 de la balise représentent les coordonnées en abscisse et en ordonnée du point de départ du segment de ligne ; coordonnées en abscisse et en ordonnée du point final du segment de ligne ; L'attribut style représente le style du segment de ligne.
4. La balise

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

La balise L'attribut points de

spécifie les coordonnées de chaque point final. L'abscisse et l'ordonnée sont séparées par des virgules et les points sont séparés par des espaces.

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();

注意，如果使用<img alt="Comment HTML5 utilise SVG (exemple de code)" >标签插入 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做的动画效果，文字效果我们以后给大家详细讲解，今天就先到这里吧。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!